Tab

Tab Docusaurus cung cấp thành phần mà bạn có thể sử dụng trong Markdown nhờ MDX:

<Tabs>

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>

Quả táo Cam Chuối Đây là một quả táo 🍎 Cũng có thể cung cấp và đạo cụ cho:valuesdefaultValueTabs

<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>

Quả táo Cam Chuối Đây là một quả táo 🍎 Tabs Đạo cụ được ưu tiên hơn các đạo cụ:TabItem mẹo Theo mặc định, tất cả các tab được hiển thị háo hức trong quá trình xây dựng và các công cụ tìm kiếm có thể lập chỉ mục các tab ẩn.

Chỉ có thể hiển thị tab mặc định với .

<Tabs lazy />

Hiển thị tab mặc định Tab đầu tiên được hiển thị theo mặc định và để ghi đè hành vi này, bạn có thể chỉ định tab mặc định bằng cách thêm vào một trong các mục tab. Bạn cũng có thể đặt prop của component thành giá trị label mà bạn chọn. Ví dụ: trong ví dụ trên, cài đặt cho tab hoặc cài đặt cho các tab buộc tab "Apple" phải được mở theo mặc định.defaultdefaultValueTabsdefaultvalue="apple"defaultValue="apple"

Docusaurus sẽ ném lỗi nếu a được cung cấp cho nhưng nó đề cập đến một giá trị không tồn tại. Nếu bạn muốn không có tab nào được hiển thị theo mặc định, hãy sử dụng .defaultValueTabsdefaultValue=

Đồng bộ hóa các lựa chọn tab Bạn có thể muốn các lựa chọn của cùng một loại tab đồng bộ hóa với nhau. Ví dụ: bạn có thể muốn cung cấp các hướng dẫn khác nhau cho người dùng trên Windows so với người dùng trên macOS và bạn muốn thay đổi tất cả các tab hướng dẫn dành riêng cho hệ điều hành chỉ bằng một cú nhấp chuột. Để đạt được điều đó, bạn có thể cung cấp cho tất cả các tab liên quan cùng một đạo cụ. Lưu ý rằng làm điều này sẽ giữ nguyên lựa chọn và tất cả các trường hợp có cùng nhau sẽ tự động cập nhật khi giá trị của một trong số chúng được thay đổi. Lưu ý rằng ID nhóm được không gian tên toàn cầu.

groupIdlocalStorage<Tab>groupId

<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>

Windows macOS Sử dụng Ctrl + C để sao chép. Windows macOS Sử dụng Ctrl + V để dán. Đối với tất cả các nhóm tab có cùng , các giá trị có thể không cần phải giống nhau. Nếu một nhóm tab được chọn một giá trị không tồn tại trong một nhóm tab khác có cùng giá trị , nhóm tab có giá trị bị thiếu sẽ không thay đổi tab của nó. Bạn có thể thấy điều đó từ ví dụ sau. Thử chọn Linux và các nhóm tab trên không thay đổi.groupIdgroupId

<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>

Windows macOS Linux Tôi là Windows. Các lựa chọn tab có ID nhóm khác nhau sẽ không can thiệp vào nhau:

<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>

Windows macOS Windows in windows. Windows Unix Windows is windows. Customizing tabs You might want to customize the appearance of a certain set of tabs. You can pass the string in prop, and the specified CSS class will be added to the component:classNameTabs

<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>

Apple Orange Banana This is an apple 🍎 Tùy chỉnh tiêu đề tab Bạn cũng có thể tùy chỉnh từng tiêu đề tab một cách độc lập bằng cách sử dụng trường. Các props bổ sung có thể được chuyển đến các tiêu đề thông qua prop in , hoặc props của mỗi tiêu đề —theo cách tương tự như bạn khai báo .attributesvaluesTabsTabItemlabel

một số-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;
}

Quả táo Cam Chuối Đây là một quả táo 🍎

mẹo className sẽ được hợp nhất với các tên lớp mặc định khác. Bạn cũng có thể sử dụng trường tùy chỉnh () được ghép nối với bộ chọn thuộc tính

CSS:data-value{'data-value': 'apple'}

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

Query string It is possible to persist the selected tab into the url search parameters. This enables you to share a link to a page which pre-selects the tab - linking from your Android app to documentation with the Android tabs pre-selected. This feature does not provide an anchor link - the browser will not scroll to the tab.

Use the prop to enable this feature and define the search param name to use.queryString

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

Người máy Ios Người máy Ngay sau khi nhấp vào một tab, một tham số tìm kiếm sẽ được thêm vào cuối url: hoặc .?current-os=android?current-os=ios

mẹo queryString có thể được sử dụng cùng với .groupId

Để thuận tiện, khi prop là , giá trị sẽ được sử dụng làm dự phòng.queryStringtruegroupId

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

Người máy Ios Người máy Khi trang tải, lựa chọn chuỗi truy vấn tab sẽ được khôi phục ưu tiên hơn lựa chọn (sử dụng ).groupIdlocalStorage