Chips 筛选标签

小型交互式组件,用于表示输入、属性或操作

构成

1: 容器

必有

2: 文字

必有

1: 容器

必有,宽度可自定义

2: 前缀 icon

必有,可替换

3: 文字

必有

4: 后缀 icon

必有,选中箭头朝上

2

1

1

1

2

3

3

4

2

1: 容器

必有,宽度可自定义

2:文字

必有

3: 对勾

可选(多选使用)

Chips

Chips

BTC

变体/类型

Display Chips 展示筛选标签:

Chips

Menu Chips 菜单筛选标签:

BTC

Filter Chips 过滤筛选标签:

Chips

多选

Chips

使用场景

Chips

Chips

Chips

Chips

Chips

Chips

Chips

Chips

Chips

Chips

Tab

Tab

TON 生态

板块

Chips

Chips

Chips

Chips

Chips

Chips

Chips

Chips

Chips

Secondary

Primary

类型说明:

Display Chips 基础筛选标签:

用于展示静态信息,如标签、分类,用于tabs搭配使用,也可单独使用

Menu Chips 菜单筛选标签:

用于筛选内,主要使用dex+场景使用

Filter Chips 过滤筛选标签:

用于筛选内容,可以单选或多选,特点:可选中/取消选中,通常用于数据过滤,可以单选或多选

交互

Chips

Default

组件的初始或未交互状态

Chips

hover

鼠标悬浮状态

Chips

Selected

当前内容已被选择或标记

Chips

Disable

表示当前不可交互或不可用的选项

标注

多语言适配

punchaw

Resnt 7D nisqapi

Qayna punchawchaww

Resnt 7D nisqapiapiapi

不等宽自适应边距8px

等宽设定

说明:

断点适配

不等宽:自适应宽度

等宽设定,内容超出字号动态变小+折行

RTL

BTC

LTR

اَلْعَرَبِيَّةُ

RTL

用法

ChipsChipsChipsChips

Chips

正确

ChipsChipsChipsChipsChipsCChipsC

Chips

Chips

错误

多语言下缩到最小字号或折行最多两行,齐高

Chips Chips Chips Chips 筛选标签 筛选标签

DESIGN

中文