Button

按钮, 用于对表单，对话框等的操作，支持设置外观、大小和状态等属性。

基本用法

填充

1
2
3
4
5
6
7
8
<db-button appearance="primary" value="primary"></db-button>
<db-button appearance="secondary" value="secondary"></db-button>
<db-button appearance="danger" value="danger"></db-button>
<db-button appearance="warning" value="warning"></db-button>
<db-button appearance="info" value="info"></db-button>
<db-button appearance="light" value="light"></db-button>
<db-button appearance="dark" value="dark"></db-button>
<db-button appearance="link" value="link"></db-button>

镂空

1
2
3
4
5
6
7
8
<db-button appearance="outline-primary" value="outline-primary"></db-button>
<db-button appearance="outline-secondary" value="outline-secondary"></db-button>
<db-button appearance="outline-success" value="outline-success"></db-button>
<db-button appearance="outline-danger" value="outline-danger"></db-button>
<db-button appearance="outline-warning" value="outline-warning"></db-button>
<db-button appearance="outline-info" value="outline-info"></db-button>
<db-button appearance="outline-light" value="outline-light"></db-button>
<db-button appearance="outline-dark" value="outline-dark"></db-button>

尺寸

1
2
<db-button appearance="primary" size="large" value="Large button"></db-button>
<db-button appearance="secondary" size="large" value="Large button"></db-button>
1
2
<db-button appearance="primary" size="small" value="Small button"></db-button>
<db-button appearance="secondary" size="small" value="Small button"></db-button>

失效

设置disabled状态为true按钮即可失效

1
2
<db-button appearance="primary" disabled="true" value="Disabled button"></db-button>
<db-button appearance="primary" value="Notdisabled button"></db-button>

水平铺满

设置fluidWidth属性true可以创建水平铺满的块级按钮

1
2
<db-button appearance="primary" fluidWidth="true" value="Block level button"></db-button>
<db-button appearance="secondary" fluidWidth="true" value="Block level button"></db-button>

激活

设置active状态为true按钮即可激活

1
2
<db-button appearance="primary" active="true" value="active button"></db-button>
<db-button appearance="primary" value="Notactive button"></db-button>

超链接

1
<db-button appearance="link" active="true" value="超链接" href="#"></db-button>

值位置

1
2
3
4
5
6
7
8
9
10
11
12
<db-button value="right" appearance="light">
    <db-icon value="far-smile" alt="smile" title="微笑"></db-icon>
</db-button>
<db-button value="left" valuePosition="left" appearance="light">
    <db-icon value="far-smile" alt="smile" title="微笑"></db-icon>
</db-button>
<db-button value="top" valuePosition="top" appearance="light">
    <db-icon value="far-smile" alt="smile" title="微笑"></db-icon>
</db-button>
<db-button value="bottom" valuePosition="bottom" appearance="light">
    <db-icon value="far-smile" alt="smile" title="微笑"></db-icon>
</db-button>

属性

名称 说明 默认值 可选值 值类型
widgetId 标识 string
value 值 按钮 string
valuePosition 值位置 right left, top, right, bottom string
appearance 外观 default primary, secondary, success, danger, warning, info, light, dark, link, outline-primary, outline-secondary, outline-success, outline-danger, outline-warning, outline-info, outline-light, outline-dark, default string
size 尺寸 default small, default, large string
disabled 失效 false true, false boolean
type 类型 button button, submit, reset string
fluid 水平铺满 false true, false boolean
active 激活 false true, false boolean
href 链接地址 string
target 目标 self self, blank, {iframeId} string

事件

名称 参数 描述
onClick 点击按钮时触发