1 Star 0 Fork 0

LS/ls-design

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
克隆/下载
zh-CN-react.md 3.59 KB
一键复制 编辑 原始数据 按行查看 历史

Button


简介

按钮

import { Button } from '@ls-design/ui-react';

基本使用

<Button>默认按钮</Button>

按钮类型

支持 priamrysuccessdangerwarning四种类型

<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>

按钮尺寸

支持 bigsmall 和默认尺寸

<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>

Props

参数 解释 参数类型
type 类型, priamrysuccessdangerwarning string
size 尺寸, smallnormalbiglarge 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
Loading...
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/LShere/ls-design.git
git@gitee.com:LShere/ls-design.git
LShere
ls-design
ls-design
master

搜索帮助