layui/package/document-component/src/document/zh-CN/components/button.md

::: anchor :::

::: title 基本介绍 :::

::: describe 按钮用于开始一个即时操作。 :::

::: title 基础使用 :::

::: demo 使用 lay-button 标签, 创建一个按钮

原始按钮 默认按钮 百搭按钮 暖色按钮 警告按钮

:::

::: title 简约按钮 :::

::: demo 使用 border 属性设置边框颜色

原始按钮 默认按钮 百搭按钮 暖色按钮 警告按钮

:::

::: title 次要按钮 :::

::: demo 使用 border-style 属性设置边框样式

原始按钮 默认按钮 百搭按钮 暖色按钮 警告按钮

:::

::: title 按钮尺寸 :::

::: demo 使用 size 属性, 创建指定尺寸的按钮, 可选值 lg sm xs

原始按钮 默认按钮 百搭按钮 暖色按钮 警告按钮 禁用按钮

:::

::: title 流式按钮 :::

::: demo 使用 fluid 属性, 使其适合父最大宽度

最大化按钮

最大化按钮

:::

::: title 圆角按钮 :::

::: demo 使用 radius 属性，创建圆角按钮

原始按钮 默认按钮 百搭按钮 暖色按钮 警告按钮 禁用按钮

:::

::: title 按钮分组 :::

::: demo 使用 lay-button-group 标签, 创建一个按钮组

默认按钮 默认按钮 默认按钮 默认按钮 默认按钮 默认按钮

:::

::: title 图标按钮 :::

::: demo 结合 lay-icon 组件, 创建图标按钮

:::

::: title 按钮容器 :::

::: demo 尽管按钮在同节点并排时会自动拉开间距，但在按钮太多的情况，效果并不是很美好。因为你需要用到按钮容器

新增 删除 修改

:::

::: title 加载按钮 :::

::: demo 使用 loading 属性, 控制按钮的加载状态

加载 加载

:::

::: title 事件处理 :::

::: demo 使用 @click 设置单击回调

单击事件

:::

::: title 下拉按钮 :::

::: demo 配合 lay-dropdown 系列组件, 完成下拉按钮。

更多操作 导入 导出

:::

::: title Button 属性 :::

::: table

属性	描述	类型	默认值	可选值	版本
type	主题	string	primary	primary normal warm danger	--
size	尺寸	string	--	lg sm xs	--
fluid	最大化	boolean	false	true false	--
radius	圆角	boolean	false	true false	--
border	边框	string	green	green blue orange red	--
border-style	边框样式	string	soild	soild dashed dotted	--
disabled	禁用	boolean	false	true false	--
loading	加载	boolean	false	true false	--
native-type	原生类型	string	button	button submit reset	--
prefix-icon	前置图标	string	--	内置 icon 集	--
suffix-icon	后置图标	string	--	内置 icon 集	--
loading-icon	后置图标	string	--	内置 icon 集	1.4.0

:::

::: title Button 插槽 :::

::: table

名称	描述	参数
default	默认内容	--

:::

::: title Button Group 属性 :::

::: table

属性	描述	类型	默认值	可选值
-	-	-	-

:::

::: title Button Group 插槽 :::

::: table

事件	描述	参数
default	默认内容	--

:::

::: contributor button :::

::: previousNext button :::