Button 组件

常用的操作按钮

基础用法

按钮的基础用法。

使用type、plain、round和circle属性来定义 Button 的样式。

<dy-button>默认按钮</dy-button>
<dy-button type="info">默认按钮</dy-button>
<dy-button type="success">默认按钮</dy-button>
<dy-button type="primary">默认按钮</dy-button>
<dy-button type="warning">默认按钮</dy-button>

显示代码

禁用状态

按钮的不可用状态。

可以使用disabled属性来定义按钮是否可用，它接受一个Boolean值。

<dy-button type="info" disabled>禁用按钮</dy-button>
<dy-button type="success" disabled>禁用按钮</dy-button>
<dy-button type="primary" disabled>禁用按钮</dy-button>
<dy-button type="warning" disabled>禁用按钮</dy-button>

显示代码

图标按钮

带图标的按钮可增强辨识度（有文字）或节省空间（无文字）。

设置icon属性即可，icon 的列表可以参考 Element 的 icon 组件，也可以设置在文字右边的 icon ，只要使用i标签即可，可以使用自定义图标。

<dy-button type="primary" icon="dy-icon-edit"></dy-button>
<dy-button type="success" icon="dy-icon-share"></dy-button>
<dy-button type="warning" icon="dy-icon-refresh"></dy-button>
<dy-button type="primary" icon="dy-icon-play" icon-position="left">按钮</dy-button>
<dy-button type="primary" icon="dy-icon-star" icon-position="right">按钮</dy-button>

显示代码

按钮组

以按钮组的方式出现，常用于多项类似操作。

使用<dy-button-group>标签来嵌套按钮。

<dy-button-group>
    <dy-button type="primary" icon="dy-icon-arrow-left" icon-position="left">上一页</dy-button>
    <dy-button type="primary" icon="dy-icon-arrow-right" icon-position="right">下一页</dy-button>
</dy-button-group>
<dy-button-group>
    <dy-button type="primary" icon="dy-icon-edit" icon-position="left" ></dy-button>
    <dy-button type="primary" icon="dy-icon-share" icon-position="right"></dy-button>
    <dy-button type="primary" icon="dy-icon-setting" icon-position="right"></dy-button>
</dy-button-group>

显示代码