跳到主要内容

按钮 Button

按钮用于触发一个操作,如路由跳转、打开弹框、提交表单等

安装使用

import { TiButton } from '@titian-design/mobile-react'

用法示例

按钮类型

const App: React.FC = () => {
return (
<>
<TiButton type="primary">默认</TiButton>
<TiButton type="warning">警告</TiButton>
<TiButton type="success">成功</TiButton>
<TiButton type="error">错误</TiButton>
<TiButton type="info">信息</TiButton>
</>
)
}

按钮风格

const App: React.FC = () => {
return (
<>
<TiButton variant="contained">面性强调</TiButton>
<TiButton variant="filled">面性次要</TiButton>
<TiButton variant="outlined">线框按钮</TiButton>
<TiButton variant="text">文字按钮</TiButton>
</>
)
}

按钮尺寸

const App: React.FC = () => {
return (
<>
<TiButton size="tiny">高度48px</TiButton>
<TiButton size="small">高度56px</TiButton>
<TiButton size="medium">高度64px</TiButton>
<TiButton size="big">高度80px</TiButton>
<TiButton size="large">高度96px</TiButton>
</>
)
}

按钮颜色

const App: React.FC = () => {
return (
<>
<TiButton color="#7232dd">确定</TiButton>
<TiButton color="blue">确定</TiButton>
<TiButton color="rgb(7, 193, 96)">确定</TiButton>
<TiButton color="linear-gradient(to right, #4bb0ff, #6149f6)">渐变按钮</TiButton>
</>
)
}

按钮圆角

const App: React.FC = () => {
return (
<>
<TiButton shape="capsule">胶囊按钮</TiButton>
<TiButton shape="round">默认圆角按钮</TiButton>
<TiButton shape="rect">直角按钮</TiButton>
</>
)
}

按钮边框

发丝线,仅适用 variant="outlined"风格

const App: React.FC = () => {
return (
<>
<TiButton variant="outlined" hairline>一像素边框</TiButton>
</>
)
}

禁用按钮

const App: React.FC = () => {
return (
<>
<TiButton disabled>确定</TiButton>
</>
)
}

块级按钮

const App: React.FC = () => {
return (
<>
<TiButton block>块级</TiButton>
<TiButton extStyle={{ width: '200px' }}>定宽</TiButton>
<TiButton>自适应宽度</TiButton>
</>
)
}

搭配图标

const App: React.FC = () => {
return (
<>
<TiButton prefixIcon="home">左图标</TiButton>
<TiButton suffixIcon="arrow-right">右图标</TiButton>
</>
)
}

加载状态

const App: React.FC = () => {
return (
<>
<TiButton loading />
<TiButton loading loadingSize={46}>提交</TiButton>
<TiButton loadingType="spinner" loading />
<TiButton loadingText="加载中" loading />
</>
)
}

TiButton API

属性 Properties

名称类型必填默认值说明备注
typestringprimary按钮类型,可选值为 primary info error warning success simplesimple仅在variant: outlined 模式下可用,灰色调
sizestringbig按钮尺寸,可选值为 tiny small medium big large分别对应高度48px 56px 64px 80px 96px-
variantstringcontained按钮风格,可选值为 contained filled outlined text-
colorstring-按钮颜色,十六进制色值 #ffffff linear-gradient渐变色渐变色仅在variant:contained模式下可用,color的权重高于type
shapestringround按钮圆角风格,可选值为 capsule round rect-
hairlinebooleanfalse当 size 为 tiny small medium,是否使用发丝 1px 边框-
disabledbooleanfalse是否禁用按钮-
loadingbooleanfalse是否显示为加载状态-
blockbooleanfalse将按钮宽度调整为其父宽度的选项-
prefixIconstring-按钮文字左侧图标-
suffixIconstring-按钮文字右侧图标-
loadingSizenumber30加载图标大小,单位 px-
loadingTypestringcircular加载图标类型,可选择circular spinner-
loadingTextstring-加载图标文字-
extStylestring | Record<string, string>-根节点样式-

事件 Events

名称参数列表描述备注
onClick(e: Event) => void点击按钮,且按钮状态不为加载或禁用时触发-

插槽 Slots

名称说明备注
default默认插槽-

外部样式类 External Classes

名称说明备注
extClass根节点样式类-
loadingClass加载图标样式类-
prefixIconClass左侧图标样式类-
suffixIconClass右侧图标样式类-

CSS 变量 CSS Variable

变量 默认值说明备注
--button-height不同size,默认高度不同。tiny small medium big large分别对应48px 56px 64px 80px 96px高度-
--button-padding-v0垂直方向内边距-
--button-padding-h不同size,默认左右内边距不同。tiny small medium big large分别对应12px 20px 24px 28px 36px水平方向内边距-
--button-font-size不同size,默认字号不同。tiny small medium big large分别对应24px 26px 26px 28px 32px字号-
--button-radiuscalc(var(--capsule-radius-size, 0px) + 8px)圆角,修改后不在跟随全局风格-
--capsule-radius-size0px全局圆角增量,控制图标风格。在项目根节点统一设置-
--button-margin0整体外边距-