SpicyRabbit

Appearance

On this page

Button ​

示例 ​

按钮类型 ​

html
<MtButton theme="primary">主要按钮</MtButton>
<MtButton theme="success">成功按钮</MtButton>
<MtButton theme="danger">危险按钮</MtButton>
<MtButton theme="warning">警告按钮</MtButton>
<MtButton theme="error">错误按钮</MtButton>
<MtButton theme="info">信息按钮</MtButton>
<MtButton theme="default">默认按钮</MtButton>
折叠

尺寸 ​

html
<MtButton size="large" theme="primary">主要按钮</MtButton>
<MtButton size="middle" theme="primary">主要按钮</MtButton>
<MtButton size="small" theme="primary">主要按钮</MtButton>
<MtButton size="tiny" theme="primary">主要按钮</MtButton>
折叠

朴素风格 ​

html
<MtButton plain theme="primary">主要按钮</MtButton>
<MtButton plain theme="success">成功按钮</MtButton>
<MtButton plain theme="danger">危险按钮</MtButton>
<MtButton plain theme="warning">警告按钮</MtButton>
<MtButton plain theme="error">错误按钮</MtButton>
<MtButton plain theme="info">信息按钮</MtButton>
<MtButton plain theme="default">默认按钮</MtButton>
折叠

圆角风格 ​

html
<MtButton round theme="primary">主要按钮</MtButton>
<MtButton round theme="success">成功按钮</MtButton>
<MtButton round theme="danger">危险按钮</MtButton>
<MtButton round theme="warning">警告按钮</MtButton>
<MtButton round theme="error">错误按钮</MtButton>
<MtButton round theme="info">信息按钮</MtButton>
<MtButton round theme="default">默认按钮</MtButton>
折叠

波纹动效 ​

html
<MtButton ripple theme="primary">主要按钮</MtButton>
<MtButton ripple theme="success">成功按钮</MtButton>
<MtButton ripple theme="danger">危险按钮</MtButton>
<MtButton ripple theme="warning">警告按钮</MtButton>
<MtButton ripple theme="error">错误按钮</MtButton>
<MtButton ripple theme="info">信息按钮</MtButton>
<MtButton ripple theme="default">默认按钮</MtButton>
折叠

波纹动效自定义颜色 ​

html
<MtButton ripple ripple-color="blue" theme="primary">主要按钮</MtButton>
<MtButton ripple ripple-color="green" theme="success">成功按钮</MtButton>
<MtButton ripple ripple-color="yellow" theme="danger">危险按钮</MtButton>
<MtButton ripple ripple-color="brown" theme="warning">警告按钮</MtButton>
<MtButton ripple ripple-color="red" theme="error">错误按钮</MtButton>
<MtButton ripple ripple-color="black" theme="info">信息按钮</MtButton>
<MtButton ripple ripple-color="orange" theme="default">默认按钮</MtButton>
折叠

Props ​

参数说明类型可选值默认值
theme按钮类型ThemeType——primary success danger warning error default info
size按钮尺寸SizeTypelarge middle small tinymiddle
round圆角风格booleantrue、falsefalse
plain朴素风格booleantrue、falsefalse
ripple波纹动效booleantrue、falsefalse

Slots ​

名称说明
default默认插槽