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 筛选标签 筛选标签