跳到主要內容
版本：3.5.2

標籤

Docusaurus 提供 <Tabs> 組件，感謝 MDX，您可以在 Markdown 中使用此組件

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

<Tabs>
  <TabItem value="apple" label="Apple" default>
    This is an apple 🍎
  </TabItem>
  <TabItem value="orange" label="Orange">
    This is an orange 🍊
  </TabItem>
  <TabItem value="banana" label="Banana">
    This is a banana 🍌
  </TabItem>
</Tabs>
https://127.0.0.1:3000
這是蘋果 🍎

也可以提供 值 和 預設值 屬性給 標籤

<Tabs
  defaultValue="apple"
  values={[
    {label: 'Apple', value: 'apple'},
    {label: 'Orange', value: 'orange'},
    {label: 'Banana', value: 'banana'},
  ]}>
  <TabItem value="apple">This is an apple 🍎</TabItem>
  <TabItem value="orange">This is an orange 🍊</TabItem>
  <TabItem value="banana">This is a banana 🍌</TabItem>
</Tabs>
https://127.0.0.1:3000
這是蘋果 🍎
標籤 屬性優先於 標籤項目 屬性
<Tabs
  defaultValue="apple"
  values={[
    {label: 'Apple 1', value: 'apple'},
    {label: 'Orange 1', value: 'orange'},
    {label: 'Banana 1', value: 'banana'},
  ]}>
  <TabItem value="apple" label="Apple 2">
    This is an apple 🍎
  </TabItem>
  <TabItem value="orange" label="Orange 2">
    This is an orange 🍊
  </TabItem>
  <TabItem value="banana" label="Banana 2" default>
    This is a banana 🍌
  </TabItem>
</Tabs>
https://127.0.0.1:3000
這是蘋果 🍎
提示

預設情況下，在建置過程中所有索引標籤都會立即呈示，且搜尋引擎可以索引隱藏的索引標籤。

只要使用 <Tabs lazy /> 即可只呈示預設索引標籤。

顯示預設索引標籤​

第一個索引標籤會預設顯示，若要覆寫此行為，您可以針對某個索引標籤項目新增 default 來指定預設索引標籤。您也可以將 Tabs 組件的 defaultValue prop 設定為您想要的標籤值。例如，以上面的範例來說，針對 value="apple" 索引標籤設定 default 或針對索引標籤設定 defaultValue="apple"，都可以強制將「Apple」索引標籤預設開啟。

如果針對 Tabs 提供 defaultValue，但它不是指向不存在的值，那麼 Docusaurus 會傳回一個錯誤。如果您不希望任何索引標籤預設顯示，請使用 defaultValue={null}。

同步化索引標籤選項​

您可能會希望類似的索引標籤選項彼此同步。例如，您可能想要針對 Windows 使用者提供不同的說明和針對 macOS 使用者提供不同的說明，而且您希望只要按一下即可變更所有特定於作業系統的說明索引標籤。若要達成這個目標，您可以針對所有相關索引標籤提供相同的 groupId prop。請注意，這會在 localStorage 中保留選擇，而且當其中一個 <Tab> 執行個體的值變更時，所有具有相同 groupId 的 <Tab> 執行個體都會自動更新。請注意，群組識別碼是全球命名空間。

<Tabs groupId="operating-systems">
  <TabItem value="win" label="Windows">Use Ctrl + C to copy.</TabItem>
  <TabItem value="mac" label="macOS">Use Command + C to copy.</TabItem>
</Tabs>

<Tabs groupId="operating-systems">
  <TabItem value="win" label="Windows">Use Ctrl + V to paste.</TabItem>
  <TabItem value="mac" label="macOS">Use Command + V to paste.</TabItem>
</Tabs>
https://127.0.0.1:3000
請使用 Ctrl + C 來複製。
請使用 Ctrl + V 來貼上。

對於具相同 groupId 的所有索引標籤群組而言，可能的值不一定要相同。如果針對一個索引標籤群組選擇了不存在於具有相同 groupId 的另一個索引標籤群組的值，則具有缺少值的索引標籤群組不會變更其索引標籤。您可以從以下範例看出。請試著選擇 Linux，而上面的索引標籤群組則不會變更。

<Tabs groupId="operating-systems">
  <TabItem value="win" label="Windows">
    I am Windows.
  </TabItem>
  <TabItem value="mac" label="macOS">
    I am macOS.
  </TabItem>
  <TabItem value="linux" label="Linux">
    I am Linux.
  </TabItem>
</Tabs>
https://127.0.0.1:3000
我是 Windows。

具有不同群組識別碼的索引標籤選項不會彼此干擾

<Tabs groupId="operating-systems">
  <TabItem value="win" label="Windows">Windows in windows.</TabItem>
  <TabItem value="mac" label="macOS">macOS is macOS.</TabItem>
</Tabs>

<Tabs groupId="non-mac-operating-systems">
  <TabItem value="win" label="Windows">Windows is windows.</TabItem>
  <TabItem value="unix" label="Unix">Unix is unix.</TabItem>
</Tabs>
https://127.0.0.1:3000
Windows 中的 Windows。
Windows 是 Windows。

自訂標籤​

您可能需要自訂某組標籤的外觀。您可以在 className prop 傳遞字串，然後將指定的 CSS 類別新增至 Tabs 元件

<Tabs className="unique-tabs">
  <TabItem value="Apple">This is an apple 🍎</TabItem>
  <TabItem value="Orange">This is an orange 🍊</TabItem>
  <TabItem value="Banana">This is a banana 🍌</TabItem>
</Tabs>
https://127.0.0.1:3000
這是蘋果 🍎

自訂標籤標題​

您也可以使用 attributes 欄位自訂每個標籤標題。可以透過 Tabs 中的 values prop 或每個 TabItem 的 prop 將額外的 prop 傳遞至標題，方法與宣告 label 相同。

some-doc.mdx
import styles from './styles.module.css';

<Tabs>
  <TabItem value="apple" label="Apple" attributes={{className: styles.red}}>
    This is an apple 🍎
  </TabItem>
  <TabItem value="orange" label="Orange" attributes={{className: styles.orange}}>
    This is an orange 🍊
  </TabItem>
  <TabItem value="banana" label="Banana" attributes={{className: styles.yellow}}>
    This is a banana 🍌
  </TabItem>
</Tabs>
styles.module.css
.red {
  color: red;
}
.red[aria-selected='true'] {
  border-bottom-color: red;
}

.orange {
  color: orange;
}
.orange[aria-selected='true'] {
  border-bottom-color: orange;
}

.yellow {
  color: yellow;
}
.yellow[aria-selected='true'] {
  border-bottom-color: yellow;
}
https://127.0.0.1:3000

這是蘋果 🍎

提示

className 會併入其他預設類別名稱。您也可以搭配 CSS 屬性選擇器使用自訂 data-value 欄位 ({'data-value': 'apple'})

styles.module.css
li[role='tab'][data-value='apple'] {
  color: red;
}

查詢字串​

可以將已選取的標籤保留到網址搜尋參數中。這可讓您分享一個已預先選取標籤的頁面連結，例如從您的 Android 應用程式連結到已預先選取 Android 標籤的說明文件。此功能不提供錨點連結，瀏覽器不會捲動至標籤。

使用 queryString prop 啟用此功能，並定義要使用的搜尋參數名稱。

<Tabs queryString="current-os">
  <TabItem value="android" label="Android">
    Android
  </TabItem>
  <TabItem value="ios" label="iOS">
    iOS
  </TabItem>
</Tabs>
https://127.0.0.1:3000
Android

點擊標籤後，網址末端會新增搜尋參數：?current-os=android 或 ?current-os=ios。

提示

queryString 可以與 groupId 搭配使用。

為方便起見，當 queryString prop 為 true 時，groupId 值將作為替代方案。

<Tabs groupId="current-os" queryString>
  <TabItem value="android" label="Android">
    Android
  </TabItem>
  <TabItem value="ios" label="iOS">
    iOS
  </TabItem>
</Tabs>
https://127.0.0.1:3000
Android

當頁面載入時，標籤查詢字串選項會優先於 groupId 選項還原 (使用 localStorage)。

編輯此頁面
最後更新時間在 Sébastien Lorber 更新