基础

icon 图标

提供少量 iconFont 图标。
⚠️ 若您需要使用更多种类的 icon 图标,可以在 iconFont上添加自主构建图标项目并下载 svg 覆盖本项目原 svg。但这种做法可能会导致原有 icon 名无法使用的错误。

基础用法

<gear-icon class="icon" name="warn"></gear-icon>
<gear-icon class="icon" name="error"></gear-icon>
<gear-icon class="icon" name="loading"></gear-icon>
<gear-icon class="icon" name="setting"></gear-icon>
<gear-icon class="icon" name="left"></gear-icon>
<gear-icon class="icon" name="right"></gear-icon>
<gear-icon class="icon" name="down"></gear-icon>
<gear-icon class="icon" name="like"></gear-icon>

Attributes

参数 说明 类型 可选值 默认值
name 图标名称 String - -



button 按钮

基础用法

默认按钮 图标按钮 加载按钮 点击加载
<gear-button>默认按钮</gear-button>
<gear-button icon="setting">图标按钮</gear-button>
<gear-button :loading="true">加载按钮</gear-button>
<gear-button icon="setting" icon-position="right" :loading="loading" @click="loading = !loading">
  点击加载
</gear-button>

Attributes

参数 说明 类型 可选值 默认值
icon icon 图标 String - -
icon-position icon 方位 String left,right left
:loading loading 效果 Boolean - -



button-group 组合按钮

横向排列的按钮组合

基础用法

上一页 更多 下一页
<gear-button-group>
  <gear-button icon="left">上一页</gear-button>
  <gear-button>更多</gear-button>
  <gear-button icon="right" icon-position="right">下一页</gear-button>
</gear-button-group>