Chip
Chipsは、入力、属性、やアクションを表すコンパクトな要素です。
Chips 使用すると、ユーザーは情報を入力したり、選択を行ったり、コンテンツをフィルター処理したり、アクションを起動したりできます。
ここで、スタンドアロンコンポーネントとして含まれているが、最も一般的な用途は、 何らかの形の入力ので、ここで示した挙動の一部はコンテキストに表示されません。
Chip
Chipsの例としてアバター画像やSVGアイコンや文字などがあります。
onClick
プロパティが定義されたチップは、フォーカスの変更外観、 ホバー、およびクリックすることができます。onDelete
プロパティが定義されたチップは、ホバー時の外観を変更する削除 アイコンを表示します。
Basic
Disabled
M
ClickableN
DeletableClickable deletable
Custom delete icon
Clickable LinkM
Primary clickablePrimary clickable
Deletable primary
Deletable secondary
Outlined Chips
Outlined chipsは代替スタイルを提供します。
{{"デモ": "pages/components/chips/OutlinedChips.js"}}
Chip array
値の配列から複数のチップをレンダリングする例。 チップを削除すると、それがアレイから削除されます。 何のため、ことに注意してください のonClick
プロパティが定義されていないchipはフォーカスされないだけでなく、 クリックされたか、触られた間、gaindepthもありません。
- Angular
- jQuery
- Polymer
- React
- Vue.js
Basic
M
ClickableN
DeletableClickable Deletable
Custom delete icon
Clickable LinkM
Primary ClickablePrimary Clickable
Deletable Primary
Deletable Secondary
Basic
M
ClickableN
DeletableClickable deletable
Custom delete icon
Clickable linkM
Primary clickablePrimary clickable
Deletable primary
Deletable secondary
Chip Component
<Chip />
アクセシビリティ
チップが削除またはクリック可能な場合は、タブの順序でボタンになります。 When the Chip is focused (e.g. when tabbing) releasing (keyup
event) Backspace
or Delete
will call the onDelete
handler while releasing Escape
will blur the Chip.