标签 Tag

用于标记和选择。

使用

API

安装使用

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

用法示例

标签类型

面性 = 实心标签面性次要 = 辅助色实心标签线性 = 描边标签

codesanbox

copy

code

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

export default function App() {
  return (
    <>
      <TiTag variant="contained">面性 = 实心标签</TiTag>
      <TiTag variant="filled">面性次要 = 辅助色实心标签</TiTag>
      <TiTag variant="outlined">线性 = 描边标签</TiTag>
    </>
  );
}

标签使用图标

左右图标

codesanbox

copy

code

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

export default function App() {
  return (
    <TiTag leftIcon="home" rightIcon="arrow-right">
      左右图标
    </TiTag>
  );
}

标签尺寸

小尺寸中尺寸大尺寸

codesanbox

copy

code

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

export default function App() {
  return (
    <>
      <TiTag size="small">小尺寸</TiTag>
      <TiTag size="medium">中尺寸</TiTag>
      <TiTag size="big">大尺寸</TiTag>
    </>
  );
}

优惠券模式

面性 = 实心标签面性次要 = 辅助色实心标签线性 = 描边标签

codesanbox

copy

code

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

export default function App() {
  return (
    <>
      <TiTag shape="coupon" variant="contained">
        面性 = 实心标签
      </TiTag>
      <TiTag shape="coupon" variant="filled">
        面性次要 = 辅助色实心标签
      </TiTag>
      <TiTag shape="coupon" variant="outlined">
        线性 = 描边标签
      </TiTag>
    </>
  );
}

TiTag API

属性 Properties

名称	类型	必填	默认值	说明	备注
variant	string	否	contained	类型，可选值contained filled outlined	-
size	string	否	medium	大小，可选值small medium big	-
shape	string	否	round	形状，可选值normal | coupon	-
leftIcon	string	否	''	左侧图标名称	-
rightIcon	string	否	''	右侧图标名称	-
extStyle	string	否	-	根节点样式	-

插槽 Slots

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

外部样式类 External Classes

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

CSS 变量 CSS Variables

变量	默认值	说明	备注
--tag-background-color	theme.color.brand.1000	背景色	-
--tag-border-width	1px	边宽度	-
--tag-border-style	solid	边风格	-
--tag-border-color	theme.color.brand.1000	边颜色	-
--tag-font-size	theme.fontSize.t3	文字字号（size = 中号 medium/大号 big）	-
	theme.fontSize.t2	文字字号（size = 小号 small）	-
--tag-line-height	theme.lineHeight.single.t2	文字行高（size = 中号 medium）	-
	theme.lineHeight.single.t1	文字行高（size = 小号 small）	-
	theme.lineHeight.single.t4	文字行高（size = 大号 big）	-
--tag-font-weight	theme.fontWeight.regular	文字字重	-
--tag-text-color	theme.color.gray.texticon.invert	文字颜色（variant = 面性 / contained）	-
	theme.color.brand.1000	文字颜色（variant = 面性次要 filled / 线性 outlined）	-
--tag-icon-font-size	theme.fontSize.t2	文字左右图标尺寸	-
	theme.fontSize.t4	文字左右图标尺寸（size = 大号 big）	-
--tag-text-icon-gap	theme.spacing.gap.g1	文字和图标间距	-
--tag-padding-v	theme.spacing.vertical.v1	上下内边距	-
--tag-padding-h	theme.spacing.horizontal.h2	上下内边距	-
--tag-padding	var(--tag-padding-v) var(--tag-padding-h)	内边距	-
--tag-radius	theme.borderRadius.r1	圆角	-