layui/example/docs/zh-CN/components/button.md

::: anchor :::

::: title 基本介绍 :::

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

::: title 基础使用 :::

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

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

:::

::: title 简约按钮 :::

::: demo 使用 border 属性设置边框主题

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

:::

::: 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 Button 变量 :::

::: 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
disabled	禁用	boolean	false	true false
loading	加载	boolean	false	true false
native-type	原生类型	string	button	button submit reset

:::

::: title Button 插槽 :::

::: table

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

:::

::: title Button Group 属性 :::

::: table

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

:::

::: title Button Group 插槽 :::

::: table

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

:::

::: comment :::

::: previousNext button :::