晶片

晶片產生一個緊湊的元素，可以代表輸入、屬性或動作。

簡介

晶片最常使用於兩種主要的使用情境：作為資訊內容的膠囊或作為篩選選項。

元件

在安裝完成後，您可以使用以下基本元素開始建構此元件

import Chip from '@mui/joy/Chip';

export default function MyApp() {
  return <Chip>My chip</Chip>;
}

基本用法

晶片預設為中等尺寸、主要顏色和實心變體。

這是一個晶片

<Chip>This is a chip</Chip>

<Chip>This is a chip</Chip>

按下 Enter 鍵開始編輯

裝飾器

使用 startDecorator 和/或 endDecorator 屬性來為晶片添加輔助圖示。

今天晴朗

明天多雲

<Chip variant="soft" startDecorator={<Sun />}>
  Today is sunny
</Chip>
<Chip variant="soft" startDecorator={<Cloud />}>
  Tomorrow is cloudy
</Chip>

<Chip variant="soft" startDecorator={<Sun />}>
  Today is sunny
</Chip>
<Chip variant="soft" startDecorator={<Cloud />}>
  Tomorrow is cloudy
</Chip>

按下 Enter 鍵開始編輯

刪除按鈕

若要在晶片內新增刪除動作，請使用互補的 ChipDelete 元件。

onDelete 回呼函數會在以下情況於 ChipDelete 上觸發：

按下 Backspace、Enter 或 Delete 鍵時。
點擊 ChipDelete 時。

import ChipDelete from '@mui/joy/ChipDelete';

移除

刪除

作為連結

您也可以透過將 component 屬性值設為 a，將晶片元件作為連結使用。由於連結是用於頁面導航最合適的元件，因此當您想要連結使用相同的晶片設計時，這非常有用。

這樣做會自動將渲染的 HTML 標籤從 <div> 變更為 <a>。

錨點晶片

<Chip slotProps={{ action: { component: 'a', href: '#as-link' } }}>
  Anchor chip
</Chip>

<Chip slotProps={{ action: { component: 'a', href: '#as-link' } }}>
  Anchor chip
</Chip>

按下 Enter 鍵開始編輯

可點擊

若要讓晶片可點擊，請將函數傳遞給 onClick 屬性。

標記

<Chip
  variant="outlined"
  color="neutral"
  size="lg"
  startDecorator={<Avatar size="sm" src={`/static/images/avatar/1.jpg`} />}
  endDecorator={<CheckIcon fontSize="md" />}
  onClick={() => alert('You clicked the Joy Chip!')}
>
  Mark
</Chip>

<Chip
  variant="outlined"
  color="neutral"
  size="lg"
  startDecorator={<Avatar size="sm" src={`/static/images/avatar/1.jpg`} />}
  endDecorator={<CheckIcon fontSize="md" />}
  onClick={() => alert('You clicked the Joy Chip!')}
>
  Mark
</Chip>

按下 Enter 鍵開始編輯

可點擊且可刪除

同時使用 onClick 屬性和互補的 ChipDelete 元件，使晶片支援兩個動作。

清除

<Chip
  variant="outlined"
  color="danger"
  onClick={() => alert('You clicked the chip!')}
  endDecorator={
    <ChipDelete
      color="danger"
      variant="plain"
      onClick={() => alert('You clicked the delete button!')}
    >
      <DeleteForever />
    </ChipDelete>
  }
>
  Clear
</Chip>

<Chip
  variant="outlined"
  color="danger"
  onClick={() => alert('You clicked the chip!')}
  endDecorator={
    <ChipDelete
      color="danger"
      variant="plain"
      onClick={() => alert('You clicked the delete button!')}
    >
      <DeleteForever />
    </ChipDelete>
  }
>
  Clear
</Chip>

按下 Enter 鍵開始編輯

與單選按鈕

常見於篩選 UI，將 Radio 元件與 Chip 包裝在一起使用。當您想要啟用單選時，請使用單選按鈕。

與核取方塊

與上述類似，將 Checkbox 元件與 Chip 包裝在一起使用。當您想要啟用多選時，請使用核取方塊。

CSS 變數範例

試玩滑桿元件中所有可用的 CSS 變數，看看設計如何變化。

您可以使用這些變數來自訂 sx 屬性和主題中的元件。

一些文字

人員名稱

<Chip
  startDecorator={<Avatar />}
  endDecorator={<ChipDelete />}
>

CSS 變數

--Chip-minHeight

--Chip-radius

--Chip-gap

--Chip-paddingInline

--Chip-decoratorChildHeight

API

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