按钮组件

按钮是用户界面中最常用的交互元素之一，用于触发操作或事件。我们的按钮组件提供多种样式、尺寸和状态，满足不同场景下的需求。

基础组件高频使用

基础用法

按钮有三种基本类型：主要按钮、次要按钮和边框按钮。

示例代码

<button class="btn btn-primary">主要按钮</button>
<button class="btn btn-secondary">次要按钮</button>
<button class="btn btn-outline">边框按钮</button>

按钮尺寸

按钮提供三种不同尺寸：大号、默认和小号。

示例代码

<button class="btn btn-primary btn-small">小号按钮</button>
<button class="btn btn-primary">默认按钮</button>
<button class="btn btn-primary btn-large">大号按钮</button>

圆角按钮

添加 btn-round 类可以创建更圆润的按钮。

示例代码

<button class="btn btn-primary btn-round">圆角主要按钮</button>
<button class="btn btn-secondary btn-round">圆角次要按钮</button>
<button class="btn btn-outline btn-round">圆角边框按钮</button>

图标按钮

按钮可以只包含图标，或者图标和文字组合。

示例代码

<button class="btn btn-primary">
    <i class="mdi mdi-plus"></i>
    创建实例
</button>
<button class="btn btn-secondary">
    <i class="mdi mdi-refresh"></i>
    刷新
</button>
<button class="btn btn-primary btn-icon">
    <i class="mdi mdi-delete"></i>
</button>

禁用状态

当按钮处于禁用状态时，将无法点击并呈现灰色外观。

示例代码

<button class="btn btn-primary" disabled>禁用主要按钮</button>
<button class="btn btn-secondary" disabled>禁用次要按钮</button>
<button class="btn btn-outline" disabled>禁用边框按钮</button>

按钮组

将多个按钮组合在一起形成一个整体。

示例代码

<div class="btn-group">
    <button class="btn btn-primary">选项一</button>
    <button class="btn btn-primary">选项二</button>
    <button class="btn btn-primary">选项三</button>
</div>

API

按钮组件的属性和类。

属性	说明	类型	默认值
btn	基础类，所有按钮都需要添加	string	-
btn-primary	主要按钮样式	string	-
btn-secondary	次要按钮样式	string	-
btn-outline	边框按钮样式	string	-
btn-round	圆角按钮	string	-
btn-large	大号按钮	string	-
btn-small	小号按钮	string	-
btn-icon	图标按钮	string	-
disabled	禁用按钮	boolean	false