跳到主要内容

Chip 标签

胶囊形（pill）标签：圆角 999、可点击、可选中。Suggestion / 多选筛选 / 内联标记等场景的底层组件。

实时预览​

下方渲染的就是 src/components/ui/Chip/Chip.tsx 本体，通过 react-native-web 翻译成浏览器节点。

单选 · selected 切换
leading icon · 建议气泡
trailing close · 多选 token
静态展示（无 onPress · 不响应按压）
VIP
拜访周期 7 天

状态​

状态视觉
默认白底 + 细线边框 (#EDEDED)，文本 fg-1 (#333)
选中 (selected)主色边框 (#EB6E00) + 主色文本
按下透明度 0.7（仅当传 onPress 时）
非交互（无 onPress）不响应按压、不显示按压态

用法​

import { Chip, Icon } from '@unif/react-native-design';

{/* 单个可选中 chip */}
<Chip
  label="待跟进"
  selected={filter === 'pending'}
  onPress={() => setFilter('pending')}
/>

{/* 带 leading icon */}
<Chip
  label="今天的安排"
  leading={<Icon name="spark" size={12} />}
  onPress={onSuggestion}
/>

{/* 静态展示（消息气泡里附带的 meta 标签等） */}
<Chip label="VIP" />

{/* 带 trailing 关闭按钮（多选 token 风格） */}
<Chip
  label="王经理"
  selected
  trailing={<Icon name="close" size={12} />}
  onPress={() => removeFilter('manager-wang')}
/>

API​

PropType默认说明
labelstring—显示文本
selectedboolean?false选中态（主色边框 + 文本）
onPress() => void 可选—点击回调；不传时 chip 渲染为静态 <View>，不响应按压
leadingReactNode?—前置插槽（图标 / 小圆点等）
trailingReactNode?—后置插槽（关闭按钮等）
styleViewStyle?—附加样式

不要​

  • ❌ 不要把 <Chip> 当成"按钮的小号版" —— 实际按钮（包括小号）走 Button size="sm"。Chip 的视觉重心在"可选状态"，不在"主操作"。
  • ❌ 不要在 Chip 内嵌长文本 —— 单行 numberOfLines=1 截断；超过两个字的多选项考虑用 Cell 列表。
  • ❌ 不要用 Chip 表达状态语义（done/error）—— 那是 Tag 的领域。