Skip to content
目录

button

按钮。用于替代原生button

使用方式

html
<!-- 引入 -->
<script type="module" src="https://cdn.jsdelivr.net/npm/webzen-ui/src/component/wz-button/index.js">
<!-- 使用 -->
<wz-button>button</wz-button>

风格 type

按钮有4种风格,分别为primarydangercommon和默认。

html
<wz-button type="primary" id="btn">primary</wz-button>
<wz-button type="danger">dashed</wz-button>
<wz-button type="common">common</wz-button>
<wz-button>default</wz-button>

尺寸size

按钮有大、中、小三种尺寸,分别为largedefault(默认)、small

html
<wz-button type="primary" size="small">primary</wz-button>
<wz-button type="primary" size="default">primary</wz-button>
<wz-button type="primary" size="large">primary</wz-button>

禁用disabled

通过disabled可以禁用按钮,禁用后该按钮上的事件失效

html
<wz-button type="primary">dashed</wz-button>
   <wz-button type="primary" disabled>dashed</wz-button>

事件 js操作 event

与普通button标签一致。

js
btn.size = 'small';
//原生属性操作
btn.setAttribute('size','small');

MIT License.