コンテンツへ移動

🎉 Material UI v5 is out now! Check out the announcement blog post

Chip

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

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

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

Chip

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

  • onClick プロパティが定義されたチップは、フォーカスの変更外観、 ホバー、およびクリックすることができます。
  • onDelete プロパティが定義されたチップは、ホバー時の外観を変更する削除 アイコンを表示します。
Basic
Disabled
M
Clickable
N
Deletable
Clickable deletable
Custom delete icon
Clickable Link
M
Primary clickable
Primary 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

Small Chip

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

デフォルトのバリアント

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

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

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

Chip Playground

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.