按钮 btn

通过 ZUI btn 类实现，默认拥有 btn 类样式，更多用法请参考 ZUI 按钮 文档。

简单使用

zin 声明

btn('保存');

生成的 HTML

<button class="btn" type="button">
  <span class="text">保存</span>
</button>

按钮外观类型

通过 type 属性设置按钮外观类型，可选值为 'default'、'primary'、'success'、'info'、'warning'、'danger'、'link'。

zin 声明

btn
(
    set::type('primary'),
    '保存'
);

生成的 HTML

<button class="btn primary" type="button">
  <span class="text">保存</span>
</button>

包含链接

通过 url 属性设置按钮链，此时按钮会自动使用 <a> 元素进行渲染。

zin 声明

btn
(
    set::url('https://zui.oop.cc'),
    '打 ZUI 网站'
);

生成的 HTML

<a class="btn btn-default" href="https://zui.oop.cc">
  <span class="text">打 ZUI 网站</span>
</a>

包含图标

通过 icon 属性设置按钮图标，使用 trailingIcon 设置末尾图标。

zin 声明

btn
(
    set::icon('home'),
    '首页'
);

生成的 HTML

<button class="btn" type="button">
  <i class="icon icon-home"></i>
  <span class="text">首页</span>
</button>

属性

名称	类型	所属部件	可选	默认值	说明
text	string	btn	✓	null	按钮的文本。
icon	string	btn	✓	null	图标名称。
iconClass	string	btn	✓	null	图标的样式类。
square	bool	btn	✓	null	是否为方形按钮，通常用于只显示一个图标的按钮。
disabled	bool	btn	✓	null	是否禁用按钮。
active	bool	btn	✓	null	是否为激活状态。
url	string	btn	✓	null	按钮的链接地址。
target	string	btn	✓	null	按钮的链接目标。
size	stringint	btn	✓	null	按钮的尺寸，可选值为 'xl'、'lg'、'md'、'sm' 或者通过数字设置宽高，如 20。
trailingIcon	string	btn	✓	null	按钮尾部图标的名称。
trailingIconClass	string	btn	✓	null	按钮尾部图标的样式类。
caret	stringbool	btn	✓	null	按钮的下拉箭头，可选值为 'top'（向上）、'bottom'（向下） 或者 true（自动）。
hint	string	btn	✓	null	按钮的提示文本（鼠标悬停时显示）。
type	string	btn	✓	null	按钮的类型，可选值为 'default'、'primary'、'success'、'info'、'warning'、'danger'、'link'。
btnType	string	btn	✓	null	按钮的类型，可选值为 'button'、'submit'、'reset'。