图标 Icon

基本用法

图标 Icon - 图1

  1. <template lang="html">
  2.       <div>
  3.      <div class="demo-hidden">
  4.         <za-panel>
  5.           <za-panel-header title="基本"></za-panel-header>
  6.           <za-panel-body>
  7.             <div class="grid">
  8.               <div v-for='(i, index) in ICONS' class="grid-column" style="width: 33.33%;display: inline-block;padding: 15px;" :key="index">
  9.                 <za-icon theme="primary" :type='i' class='icon' style="fontSize:30px"/>
  10.                 <span class="icon-name">{{i}}</span>
  11.               </div>
  12.             </div>
  13.           </za-panel-body>
  14.         </za-panel>
  15.       </div>
  16.       </div>
  17. </template>
  18. <script>
  19. const ICONS = [
  20.   'right', 'right-round', 'right-round-fill',
  21.   'wrong', 'wrong-round', 'wrong-round-fill',
  22.   'info-round', 'info-round-fill',
  23.   'question-round', 'question-round-fill',
  24.   'warning-round', 'warning-round-fill',
  25.   'arrow-left', 'arrow-right', 'arrow-top', 'arrow-bottom',
  26.   'add', 'add-round', 'add-round-fill',
  27.   'minus', 'minus-round', 'minus-round-fill',
  28.   'broadcast',
  29. ].sort();
  31. export default {
  32.   data() {
  33.     return {
  34.       ICONS
  35.     }
  36.   }
  37. };
  38. </script>

API

Icon Attributes

属性类型默认值可选值／参数说明
prefixClsstringza-stepper类名前缀
themestring'default''default', 'primary', 'info', 'success', 'warning', 'error'主题
typestring'right', 'right-round', 'right-round-fill','wrong', 'wrong-round', 'wrong-round-fill', 'info-round', 'info-round-fill', 'question-round', 'question-round-fill', 'warning-round', 'warning-round-fill', 'arrow-left', 'arrow-right', 'arrow-top', 'arrow-bottom', 'add', 'add-round', 'add-round-fill', 'minus', 'minus-round', 'minus-round-fill', 'broadcast'图标类型