按钮 Button

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

使用

API

安装使用

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

用法示例

按钮类型

默认警告成功错误信息

codesanbox

copy

code

<template>
  <TiButton type="primary">默认</TiButton>
  <TiButton type="warning">警告</TiButton>
  <TiButton type="success">成功</TiButton>
  <TiButton type="error">错误</TiButton>
  <TiButton type="info">信息</TiButton>
</template>

<script lang="ts" setup>
import { TiButton } from 'titian-h5-vue';
</script>

按钮尺寸

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

codesanbox

copy

code

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

<script lang="ts" setup>
import { TiButton } from 'titian-h5-vue';
</script>

按钮圆角

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

codesanbox

copy

code

<template>
  <TiButton shape="capsule">胶囊按钮</TiButton>
  <TiButton shape="round">默认圆角按钮</TiButton>
  <TiButton shape="rect">直角按钮</TiButton>
</template>

<script lang="ts" setup>
import { TiButton } from 'titian-h5-vue';
</script>

禁用按钮

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

codesanbox

copy

code

<template>
  <TiButton disabled variant="contained"> 面性强调 </TiButton>
  <TiButton disabled variant="filled"> 面性次要 </TiButton>
  <TiButton disabled variant="outlined"> 线框按钮 </TiButton>
  <TiButton disabled variant="text"> 文字按钮 </TiButton>
</template>

<script lang="ts" setup>
import { TiButton } from 'titian-h5-vue';
</script>

搭配图标

左图标右图标

codesanbox

copy

code

<template>
  <TiButton prefixIcon="home">左图标</TiButton>
  <TiButton suffixIcon="arrow-right">右图标</TiButton>
</template>

<script lang="ts" setup>
import { TiButton } from 'titian-h5-vue';
</script>

按钮风格

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

codesanbox

copy

code

<template>
  <TiButton variant="contained">面性强调</TiButton>
  <TiButton variant="filled">面性次要</TiButton>
  <TiButton variant="outlined">线框按钮</TiButton>
  <TiButton variant="text">文字按钮</TiButton>
</template>

<script lang="ts" setup>
import { TiButton } from 'titian-h5-vue';
</script>

按钮颜色

确定确定确定渐变按钮

codesanbox

copy

code

<template>
  <TiButton color="#7232dd">确定</TiButton>
  <TiButton color="blue">确定</TiButton>
  <TiButton color="rgb(7, 193, 96)">确定</TiButton>
  <TiButton color="linear-gradient(to right, #4bb0ff, #6149f6)">渐变按钮</TiButton>
</template>

<script lang="ts" setup>
import { TiButton } from 'titian-h5-vue';
</script>

按钮边框

一像素边框

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

codesanbox

copy

code

<template>
  <TiButton variant="outlined" hairline> 一像素边框 </TiButton>
</template>

<script lang="ts" setup>
import { TiButton } from 'titian-h5-vue';
</script>

块级按钮

块级定宽自适应宽度

codesanbox

copy

code

<template>
  <TiButton block>块级</TiButton>
  <TiButton :extStyle="{ width: '200px' }">定宽</TiButton>
  <TiButton>自适应宽度</TiButton>
</template>

<script lang="ts" setup>
import { TiButton } from 'titian-h5-vue';
</script>

加载状态

提交

codesanbox

copy

code

<template>
  <TiButton loading />
  <TiButton loading :loadingSize="46"> 提交 </TiButton>
  <TiButton loadingType="spinner" loading />
  <TiButton loadingText="加载中" loading />
</template>

<script lang="ts" setup>
import { TiButton } from 'titian-h5-vue';
</script>

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	将按钮宽度调整为其父宽度的选项	-
prefix-icon	string	否	-	按钮文字左侧图标	-
suffix-icon	string	否	-	按钮文字右侧图标	-
loading-size	number	否	30	加载图标大小，单位 px	-
loading-type	string	否	circular	加载图标类型，可选择circular spinner	-
loading-text	string	否	-	加载图标文字	-
ext-style	string | Record<string, string>	否	-	根节点样式	-

事件 Events

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

插槽 Slots

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

外部样式类 External Classes

名称	说明	备注
ext-class	根节点样式类	-
loading-class	加载图标样式类	-
prefix-icon-class	左侧图标样式类	-
suffix-icon-class	右侧图标样式类	-

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	文字和图标间距	-