按钮 Button

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

使用

API

安装使用

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

用法示例

按钮类型

默认警告成功错误信息

codesanbox

copy

code

import React from 'react';
import { TiButton } from 'titian-h5-react';

export default function App() {
  return (
    <>
      <TiButton type="primary">默认</TiButton>
      <TiButton type="warning">警告</TiButton>
      <TiButton type="success">成功</TiButton>
      <TiButton type="error">错误</TiButton>
      <TiButton type="info">信息</TiButton>
    </>
  );
}

按钮尺寸

高度48px高度56px高度64px高度80px高度96px

codesanbox

copy

code

import React from 'react';
import { TiButton } from 'titian-h5-react';

export default function App() {
  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>
    </>
  );
}

按钮圆角

胶囊按钮默认圆角按钮直角按钮

codesanbox

copy

code

import React from 'react';
import { TiButton } from 'titian-h5-react';

export default function App() {
  return (
    <>
      <TiButton shape="capsule">胶囊按钮</TiButton>
      <TiButton shape="round">默认圆角按钮</TiButton>
      <TiButton shape="rect">直角按钮</TiButton>
    </>
  );
}

禁用按钮

面性强调面性次要线框按钮文字按钮

codesanbox

copy

code

import React from 'react';
import { TiButton } from 'titian-h5-react';

export default function App() {
  return (
    <>
      <TiButton disabled variant="contained">
        面性强调
      </TiButton>
      <TiButton disabled variant="filled">
        面性次要
      </TiButton>
      <TiButton disabled variant="outlined">
        线框按钮
      </TiButton>
      <TiButton disabled variant="text">
        文字按钮
      </TiButton>
    </>
  );
}

搭配图标

左图标右图标

codesanbox

copy

code

import React from 'react';
import { TiButton } from 'titian-h5-react';

export default function App() {
  return (
    <>
      <TiButton prefixIcon="home">左图标</TiButton>
      <TiButton suffixIcon="arrow-right">右图标</TiButton>
    </>
  );
}

按钮风格

面性强调面性次要线框按钮文字按钮

codesanbox

copy

code

import React from 'react';
import { TiButton } from 'titian-h5-react';

export default function App() {
  return (
    <>
      <TiButton variant="contained">面性强调</TiButton>
      <TiButton variant="filled">面性次要</TiButton>
      <TiButton variant="outlined">线框按钮</TiButton>
      <TiButton variant="text">文字按钮</TiButton>
    </>
  );
}

按钮颜色

确定确定确定渐变按钮

codesanbox

copy

code

import React from 'react';
import { TiButton } from 'titian-h5-react';

export default function App() {
  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>
    </>
  );
}

按钮边框

一像素边框

发丝线，仅适用 variant='outlined' 风格

codesanbox

copy

code

import React from 'react';
import { TiButton } from 'titian-h5-react';

export default function App() {
  return (
    <TiButton variant="outlined" hairline>
      一像素边框
    </TiButton>
  );
}

块级按钮

块级定宽自适应宽度

codesanbox

copy

code

import React from 'react';
import { TiButton } from 'titian-h5-react';

export default function App() {
  return (
    <>
      <TiButton block>块级</TiButton>
      <TiButton extStyle={{ width: '200px' }}>定宽</TiButton>
      <TiButton>自适应宽度</TiButton>
    </>
  );
}

加载状态

提交

codesanbox

copy

code

import React from 'react';
import { TiButton } from 'titian-h5-react';

export default function App() {
  return (
    <>
      <TiButton loading />
      <TiButton loading loadingSize={46}>
        提交
      </TiButton>
      <TiButton loadingType="spinner" loading />
      <TiButton loadingText="加载中" loading />
    </>
  );
}

TiButton API

属性 Properties

名称	类型	必填	默认值	说明	备注
type	string	否	primary	按钮类型，可选值为 primary info error warning success simple	simple仅在variant: outlined 模式下可用，灰色调
size	string	否	big	按钮尺寸，可选值为 tiny small medium big large分别对应高度48px 56px 64px 80px 96px	-
variant	string	否	contained	按钮风格，可选值为 contained filled outlined text semi-outlined	-
color	string	否	theme.color.brand.1000	按钮颜色，十六进制色值 #ffffff linear-gradient渐变色	渐变色仅在variant：contained模式下可用，color的权重高于type
shape	string	否	round	按钮圆角风格，可选值为 capsule round rect	-
hairline	boolean	否	true	当 size 为 tiny small medium，是否使用发丝 1px 边框	-
disabled	boolean	否	false	是否禁用按钮	-
loading	boolean	否	false	是否显示为加载状态	-
block	boolean	否	false	将按钮宽度调整为其父宽度的选项	-
prefixIcon	string	否	-	按钮文字左侧图标	-
suffixIcon	string	否	-	按钮文字右侧图标	-
loadingSize	number	否	30	加载图标大小，单位 px	-
loadingType	string	否	circular	加载图标类型，可选择circular spinner	-
loadingText	string	否	-	加载图标文字	-
extStyle	string | Record<string, string>	否	-	根节点样式	-

事件 Events

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

插槽 Slots

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

外部样式类 External Classes

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

CSS 变量 CSS Variable

变量	默认值	说明	备注
--button-padding-v	theme.spacing.vertical.v2	垂直方向内边距（size="tiny"）	-
	theme.spacing.vertical.v3	垂直方向内边距（size="small"）	-
	theme.spacing.vertical.v4	垂直方向内边距（size="medium"）	-
	theme.spacing.vertical.v5	垂直方向内边距（size="big"）	-
	theme.spacing.vertical.v7	垂直方向内边距（size="large"）	-
--button-padding-h	theme.spacing.horizontal.h3	水平方向内边距（size="tiny"）	-
	theme.spacing.horizontal.h5	水平方向内边距（size="small"）	-
	theme.spacing.horizontal.h6	水平方向内边距（size="medium"）	-
	theme.spacing.horizontal.h8	水平方向内边距（size="big"）	-
	theme.spacing.horizontal.h11	水平方向内边距（size="large"）	-
--button-font-size	theme.fontSize.t4	字号（size="tiny"）	-
	theme.fontSize.t5	字号（size="small"）	-
	theme.fontSize.t5	字号（size="medium"）	-
	theme.fontSize.t6	字号（size="big"）	-
	theme.fontSize.t8	字号（size="large"）	-
--button-radius	theme.borderRadius.r2	圆角	-
--button-margin	0	整体外边距	-
--button-line-height	theme.lineHeight.multiline.t2	行高（size="tiny"）	-
	theme.lineHeight.multiline.t2	行高（size="small"）	-
	theme.lineHeight.multiline.t2	行高（size="medium"）	-
	theme.lineHeight.multiline.t4	行高（size="big"）	-
	theme.lineHeight.multiline.t4	行高（size="large"）	-
--button-font-weight	theme.fontWeight.semibold	字重	-
--button-icon-size	theme.fontSize.t6	icon尺寸（size="tiny"）	-
	theme.fontSize.t8	icon尺寸（size="small"）	-
	theme.fontSize.t8	icon尺寸（size="medium"）	-
	theme.fontSize.t8	icon尺寸（size="big"）	-
	theme.fontSize.t10	icon尺寸（size="large"）	-
--button-icon-gap	theme.spacing.gap.g2	文字和图标间距	-