Chip

Chipsは、入力、属性、やアクションを表すコンパクトな要素です。

Chips 使用すると、ユーザーは情報を入力したり、選択を行ったり、コンテンツをフィルター処理したり、アクションを起動したりできます。

ここで、スタンドアロンコンポーネントとして含まれているが、最も一般的な用途は、 何らかの形の入力ので、ここで示した挙動の一部はコンテキストに表示されません。

Chip

Chipsの例としてアバター画像やSVGアイコンや文字などがあります。

• onClick プロパティが定義されたチップは、フォーカスの変更外観、 ホバー、およびクリックすることができます。
• onDelete プロパティが定義されたチップは、ホバー時の外観を変更する削除 アイコンを表示します。

Outlined Chips

Outlined chipsは代替スタイルを提供します。

{{"デモ": "pages/components/chips/OutlinedChips.js"}}

Chip array

値の配列から複数のチップをレンダリングする例。 チップを削除すると、それがアレイから削除されます。 何のため、ことに注意してください のonClick プロパティが定義されていないchipはフォーカスされないだけでなく、 クリックされたか、触られた間、gaindepthもありません。

Small Chip

あなたは小さなチップを定義するために サイズ propsを使うことができます。

デフォルトのバリアント

アウトライン化されたバリアント

Chip Playground

アクセシビリティ

チップが削除またはクリック可能な場合は、タブの順序でボタンになります。 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.

API

• <Chip />