晶片

晶片是精簡的元素，代表輸入、屬性或動作。

晶片允許使用者輸入資訊、進行選擇、篩選內容或觸發動作。

雖然這裡作為獨立元件包含在內，但最常見的用途將是以某種形式的輸入，因此此處展示的某些行為未在上下文中顯示。

基本晶片

Chip 元件支援外框和填滿樣式。

填滿晶片

外框晶片

<Chip label="Chip Filled" />
<Chip label="Chip Outlined" variant="outlined" />

<Chip label="Chip Filled" />
<Chip label="Chip Outlined" variant="outlined" />

按下 Enter 開始編輯

晶片動作

您可以使用以下動作。

定義了 onClick 屬性的晶片會在焦點、懸停和點擊時改變外觀。
定義了 onDelete 屬性的晶片將顯示一個刪除圖示，該圖示在懸停時會改變外觀。

可點擊

<Chip label="Clickable" onClick={handleClick} />
<Chip label="Clickable" variant="outlined" onClick={handleClick} />

<Chip label="Clickable" onClick={handleClick} />
<Chip label="Clickable" variant="outlined" onClick={handleClick} />

按下 Enter 開始編輯

可刪除

<Chip label="Deletable" onDelete={handleDelete} />
<Chip label="Deletable" variant="outlined" onDelete={handleDelete} />

<Chip label="Deletable" onDelete={handleDelete} />
<Chip label="Deletable" variant="outlined" onDelete={handleDelete} />

按下 Enter 開始編輯

可點擊且可刪除

可點擊可刪除

<Chip
  label="Clickable Deletable"
  onClick={handleClick}
  onDelete={handleDelete}
/>
<Chip
  label="Clickable Deletable"
  variant="outlined"
  onClick={handleClick}
  onDelete={handleDelete}
/>

<Chip
  label="Clickable Deletable"
  onClick={handleClick}
  onDelete={handleDelete}
/>
<Chip
  label="Clickable Deletable"
  variant="outlined"
  onClick={handleClick}
  onDelete={handleDelete}
/>

按下 Enter 開始編輯

可點擊連結

可點擊連結可點擊連結

<Chip label="Clickable Link" component="a" href="#basic-chip" clickable />
<Chip
  label="Clickable Link"
  component="a"
  href="#basic-chip"
  variant="outlined"
  clickable
/>

<Chip label="Clickable Link" component="a" href="#basic-chip" clickable />
<Chip
  label="Clickable Link"
  component="a"
  href="#basic-chip"
  variant="outlined"
  clickable
/>

按下 Enter 開始編輯

自訂刪除圖示

<Chip
  label="Custom delete icon"
  onClick={handleClick}
  onDelete={handleDelete}
  deleteIcon={<DoneIcon />}
/>
<Chip
  label="Custom delete icon"
  onClick={handleClick}
  onDelete={handleDelete}
  deleteIcon={<DeleteIcon />}
  variant="outlined"
/>

<Chip
  label="Custom delete icon"
  onClick={handleClick}
  onDelete={handleDelete}
  deleteIcon={<DoneIcon />}
/>
<Chip
  label="Custom delete icon"
  onClick={handleClick}
  onDelete={handleDelete}
  deleteIcon={<DeleteIcon />}
  variant="outlined"
/>

按下 Enter 開始編輯

晶片裝飾

您可以將裝飾新增到元件的開頭。

使用 avatar 屬性新增頭像，或使用 icon 屬性新增圖示。

頭像晶片

頭像

<Chip avatar={<Avatar>M</Avatar>} label="Avatar" />
<Chip
  avatar={<Avatar alt="Natacha" src="/static/images/avatar/1.jpg" />}
  label="Avatar"
  variant="outlined"
/>

<Chip avatar={<Avatar>M</Avatar>} label="Avatar" />
<Chip
  avatar={<Avatar alt="Natacha" src="/static/images/avatar/1.jpg" />}
  label="Avatar"
  variant="outlined"
/>

按下 Enter 開始編輯

圖示晶片

帶有圖示

<Chip icon={<FaceIcon />} label="With Icon" />
<Chip icon={<FaceIcon />} label="With Icon" variant="outlined" />

<Chip icon={<FaceIcon />} label="With Icon" />
<Chip icon={<FaceIcon />} label="With Icon" variant="outlined" />

按下 Enter 開始編輯

顏色晶片

您可以使用 color 屬性從主題調色盤中定義顏色。

primary

success

primary

success

<Stack direction="row" spacing={1}>
  <Chip label="primary" color="primary" />
  <Chip label="success" color="success" />
</Stack>
<Stack direction="row" spacing={1}>
  <Chip label="primary" color="primary" variant="outlined" />
  <Chip label="success" color="success" variant="outlined" />
</Stack>

<Stack direction="row" spacing={1}>
  <Chip label="primary" color="primary" />
  <Chip label="success" color="success" />
</Stack>
<Stack direction="row" spacing={1}>
  <Chip label="primary" color="primary" variant="outlined" />
  <Chip label="success" color="success" variant="outlined" />
</Stack>

按下 Enter 開始編輯

尺寸晶片

您可以使用 size 屬性來定義小型晶片。

小型

<Chip label="Small" size="small" />
<Chip label="Small" size="small" variant="outlined" />

<Chip label="Small" size="small" />
<Chip label="Small" size="small" variant="outlined" />

按下 Enter 開始編輯

多行晶片

預設情況下，晶片僅以單行顯示標籤。為了使其支援多行內容，請使用 sx 屬性將 height:auto 新增到 Chip 元件，並將 whiteSpace: normal 新增到 label 樣式。

這是一個具有多行的晶片。

<Chip
  sx={{
    height: 'auto',
    '& .MuiChip-label': {
      display: 'block',
      whiteSpace: 'normal',
    },
  }}
  label="This is a chip that has multiple lines."
/>

<Chip
  sx={{
    height: 'auto',
    '& .MuiChip-label': {
      display: 'block',
      whiteSpace: 'normal',
    },
  }}
  label="This is a chip that has multiple lines."
/>

按下 Enter 開始編輯

晶片陣列

從值陣列呈現多個晶片的範例。刪除晶片會將其從陣列中移除。請注意，由於未定義 onClick 屬性，因此可以聚焦 Chip，但在點擊或觸摸時不會獲得深度效果。

Angular
jQuery
Polymer
React
Vue.js

晶片遊樂場

無障礙功能

如果晶片是可刪除或可點擊的，那麼它在 tab 鍵順序中就是一個按鈕。當晶片被聚焦時（例如當使用 tab 鍵時），釋放（keyup 事件）Backspace 或 Delete 將呼叫 onDelete 處理常式，而釋放 Escape 將使晶片失去焦點。

API

請參閱以下文件，以取得此處提及的元件所有可用屬性和類別的完整參考。

<Chip />