跳转到内容

Chip 纸片组件

纸片组件是用来表示输入框、属性或操作的紧凑元素。

纸片组件允许用户输入信息、进行选择、过滤内容或触发动作。

在这里,虽然我们将纸片组件归类为一个独立的组件,但更常见的作法是用在表单中作为输入框,因此本篇演示的内容并不会在上下文中显示。

Chip

以下是纸片组件的一个例子,它使用了图片,SVG 图标,“字母” 和(带有字符串的)头像。

  • 定义了 onClick 属性的纸片组件会在聚焦时会有外观的变化。
  • 定义了 onDelete 属性的纸片组件将显示一个删除图标,并在鼠标悬浮时有外观的变化。
Basic
Disabled
M
Clickable
Natacha
Deletable
Clickable deletable
Custom delete icon
Clickable Link
M
Primary clickable
Primary clickable
Deletable primary
Deletable secondary

描边纸片

描边纸片展示了另一种风格。

Basic
Disabled
M
Clickable
Natacha
Deletable
Clickable deletable
Custom delete icon
Clickable link
M
Primary clickable
Primary clickable
Deletable primary
Deletable secondary

纸片阵列

下面是一个通过数组呈现多个纸片的示例。 删除一个纸片元素,则会将其从纸片组的数组中删除。 请注意,由于没有定义 onClick 属性,所以这些纸片在被点击或触碰时可以被聚焦,但不会在立体和阴影上有所变化。

  • Angular
  • jQuery
  • Polymer
  • React
  • Vue.js

小型纸片组件

您可以借助 size 属性来定义一个小型纸片组件。

填充的变量

Basic
M
Clickable
Natacha
Deletable
Clickable Deletable
Custom delete icon
Clickable Link
M
Primary Clickable
Primary Clickable
Deletable Primary
Deletable Secondary

描边的变量

Basic
M
Clickable
Natacha
Deletable
Clickable deletable
Custom delete icon
Clickable link
M
Primary clickable
Primary clickable
Deletable primary
Deletable secondary

在线编译纸片组件

Chip Component
<Chip />

无障碍设计

如果 Chip 是可删除或可点击的,它则应该是一个安装标签顺序排列的按钮。 当纸片被聚焦时(例如在制表符时),释放(keyup 事件) BackspaceDelete 将调用 onDelete 处理程序,从而通过释放 Escape 来模糊纸片组件。