layui/example/docs/zh-CN/components/button.md
2021-11-23 11:08:40 +08:00

5.7 KiB

::: 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 使用 lay-button-container 标签, 创建一个按钮容器

新增 删除 修改

:::

::: title 加载按钮 :::

::: demo 传入 loading 属性, 控制按钮的加载状态

加载

:::

::: title 事件处理 :::

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

单击事件

:::

::: title 按钮属性 :::

::: table

属性 描述 可选值
type 主题 primary normal warm danger disabled
size 尺寸 lg sm xs
fluid 最大化 true false
radius 圆角 true false
border 边框 green blue orange red black

:::

::: title 按钮事件 :::

::: table

事件 描述 参数
click 单击事件 --

:::