Skip to content

Button 按钮

按钮用于执行一个即时操作。

Color 属性

html
<z-button color="default">BUTTON</z-button>
<z-button color="primary">BUTTON</z-button>
<z-button color="danger">BUTTON</z-button>
<z-button color="warning">BUTTON</z-button>
<z-button color="success">BUTTON</z-button>
<z-button color="info">BUTTON</z-button>

<z-button color="primaryLight">BUTTON</z-button>
<z-button color="dangerLight">BUTTON</z-button>
<z-button color="successLight">BUTTON</z-button>
<z-button color="warningLight">BUTTON</z-button>
<z-button color="infoLight">BUTTON</z-button>

Shape 属性

html
<z-button color="primary" shape="circle">
  <z-icon name="plus"></z-icon>
</z-button>
<z-button color="primaryLight" shape="circle">
  <z-icon name="plus"></z-icon>
</z-button>
<z-button color="info" shape="round">BUTTON</z-button>
<z-button color="success" shape="round">BUTTON</z-button>
<z-button color="primary" shape="square">
  <z-icon name="plus"></z-icon>
</z-button>
<z-button color="primaryLight" shape="square">
  <z-icon name="plus"></z-icon>
</z-button>

Size 属性

html
<z-button size="mini">BUTTON</z-button>
<z-button size="small">BUTTON</z-button>
<z-button size="large">BUTTON</z-button>

Disabled 属性

html
<z-button disabled color="primary">BUTTON</z-button>

Loading 属性

html
<z-button loading color="primary">BUTTON</z-button>

isText 属性

html
<z-button isText color="default">BUTTON</z-button>
<z-button isText color="primary">BUTTON</z-button>
<z-button isText color="success">BUTTON</z-button>
<z-button isText color="danger">BUTTON</z-button>
<z-button isText color="warning">BUTTON</z-button>
<z-button isText color="info">BUTTON</z-button>

Attributes

Events

事件名说明
click点击按钮时触发
focus按钮获得焦点时触发
blur按钮失去焦点时触发

Released under the MIT License.