代码拉取完成,页面将自动刷新
按钮
import { Button } from '@ls-design/ui-react';
<Button>默认按钮</Button>
支持 priamry
、success
、danger
、warning
四种类型
<Button>默认按钮</Button>
<Button type="primary">主要按钮</Button>
<Button type="success">成功按钮</Button>
<Button type="danger">危险按钮</Button> <Button type="warning">警告按钮</Button>
plain
属性可以设置朴素按钮,朴素按钮的文字为按钮颜色,背景为白色
<Button plain type="primary">主要按钮</Button>
<Button plain type="success">成功按钮</Button>
light
可以设置浅色按钮,浅色按钮的文字为按钮颜色,背景为对应的浅色
<Button light type="primary">主要按钮</Button>
<Button light type="success">成功按钮</Button>
支持 big
、small
和默认尺寸
<Button type="primary" size="small">小号尺寸</Button>
<Button type="primary" size="big">大号尺寸</Button>
<Button type="primary" size="large">特大尺寸</Button>
<Button type="primary">普通尺寸</Button>
通过 loading
属性设置加载状态, 其中 loadingcolor
属性控制 loading
颜色,loadingsize
属性控制 loading 大小,loadingtype
属性控制 loading 类型,loading 参考 loading 组件
<Button loading type="danger" loadtype="circular">加载中...</Button> <Button loading type="warning">加载中...</Button>
<Button onClick="{changeLoading}" loading="{isLoading}" type="success"> Click me! </Button>
通过 icon
属性设置图标
<Button type="primary" icon="图标地址">
{' '}
喜欢{' '}
</Button>
参数 | 解释 | 参数类型 |
---|---|---|
type | 类型, priamry 、success 、danger 、warning |
string |
size | 尺寸, small 、normal 、big 、large |
string |
disabled | 是否禁用 | boolean |
icon | 图标 | string |
shape | 形状, square |
string |
plain | 是否为朴素按钮 | boolean |
light | 是否为浅色按钮 | boolean |
loading | 是否为loading态 | boolean |
loadtype | 加载图标类型, circular |
string |
loadingcolor | 加载颜色 | CSSProperties |
loadingsize | 加载图标大小 | string |
提供了 CSS 变量 可自定义样式
名称 | 解释 | 默认值 |
---|---|---|
--button-height |
按钮高度 | 32px |
--button-hspacing |
按钮左右内边距 | 12px |
--button-font-size |
按钮字体大小 | 14px |
--button-border-radius |
按钮圆角 | 8px |
--button-color |
文字颜色 | #fff |
--button-icon-hspacing |
icon 左右间距 | 6px |
--button-big-border-radius |
大尺寸按钮圆角 | 8px |
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。