跳到主要内容

标签 Tag

用于标记和选择。

安装使用

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

用法示例

类型

const App: React.FC = () => {
return (
<>
<TiTag variant="contained">面性 = 实心标签</TiTag>
<TiTag variant="filled">面性次要 = 辅助色实心标签</TiTag>
<TiTag variant="outlined">线性 = 描边标签</TiTag>
</>
)
}

尺寸

const App: React.FC = () => {
return (
<>
<TiTag size="small">小尺寸</TiTag>
<TiTag size="medium">中尺寸</TiTag>
<TiTag size="big">大尺寸</TiTag>
</>
)
}

图标 icon

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

优惠券模式

const App: React.FC = () => {
return (
<>
<TiTag shape="coupon" variant="contained">面性 = 实心标签</TiTag>
<TiTag shape="coupon" variant="filled">面性次要 = 辅助色实心标签</TiTag>
<TiTag shape="coupon" variant="outlined">线性 = 描边标签</TiTag>
</>
)
}

TiTag API

属性 Properties

名称类型必填默认值说明备注
variantstringcontained类型,可选值contained filled outlined-
sizestringmedium大小,可选值small medium big-
shapestringround形状,可选值normal | coupon-
leftIconstring''左侧图标名称-
rightIconstring''右侧图标名称-
extStylestring-根节点样式-

插槽 Slots

名称说明备注
default默认插槽-
prefix前缀-
suffix后缀-

外部样式类 External Classes

名称说明备注
extClass根节点样式类-

CSS 变量 CSS Variables

变量默认值说明备注
--theme-trvar(--theme-r, 250)标签主题色,r 色值-
--theme-tgvar(--theme-g, 44)标签主题色, g 色值-
--theme-tbvar(--theme-b, 25)标签主题色, b 色值-
--tag-themergb(--theme-tr, --theme-tg, --theme-tb)标签主题色-
--tag-height32px高度-
--tag-padding0 8pxpadding 间距-
--tag-border-width1px边宽度-
--tag-border-stylesolid边风格-
--tag-border-color-边颜色,跟随主题色-
--tag-background-color-背景色,跟随主题色-
--tag-text-color#fff文字颜色-
--tag-font-size20px字号-
--tag-font-weight400字重-