15308555518/ docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-12-26 01:33:02 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(theme-classic): make first tab the default tab (#5647) 

* Initial work

* Little doc fix

* Doc fix
This commit is contained in:
Joshua Chen 2021-10-07 23:06:17 +08:00 committed by GitHub
parent 7b64e85dc3
commit d6b4eeb358
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 27 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/docusaurus-theme-classic/src/theme/Tabs/index.tsx
View File

@ -44,7 +44,8 @@ function TabsComponent(props: Props): JSX.Element {
});
const defaultValue =
defaultValueProp ??
children.find((child) => child.props.default)?.props.value;
children.find((child) => child.props.default)?.props.value ??
children[0]?.props.value;
const {tabGroupChoices, setTabGroupChoices} = useUserPreferencesContext();
const [selectedValue, setSelectedValue] = useState(defaultValue);

4
website/docs/blog.mdx
View File

@ -177,7 +177,7 @@ Blog post authors can be declared directly inside the FrontMatter:
````mdx-code-block
<Tabs groupId="author-frontmatter">
<TabItem value="single" label="Single author" default>
<TabItem value="single" label="Single author">
```yml title="my-blog-post.md"
---
@ -261,7 +261,7 @@ In blog posts FrontMatter, you can reference the authors declared in the global
````mdx-code-block
<Tabs groupId="author-frontmatter">
<TabItem value="single" label="Single author" default>
<TabItem value="single" label="Single author">
```yml title="my-blog-post.md"
---

2
website/docs/deployment.mdx
View File

@ -144,7 +144,7 @@ Finally, to deploy your site to GitHub Pages, run:
````mdx-code-block
<Tabs>
<TabItem value="bash" label="Bash" default>
<TabItem value="bash" label="Bash">
```bash
GIT_USER=<GITHUB_USERNAME> yarn deploy

4
website/docs/guides/markdown-features/markdown-features-admonitions.mdx
View File

@ -97,7 +97,7 @@ import TabItem from '@theme/TabItem';
:::tip Use tabs in admonitions
<Tabs>
<TabItem value="apple" label="Apple" default>This is an apple 🍎</TabItem>
<TabItem value="apple" label="Apple">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>
@ -114,7 +114,7 @@ import TabItem from '@theme/TabItem';
```mdx-code-block
<Tabs>
<TabItem value="apple" label="Apple" default>This is an apple 🍎</TabItem>
<TabItem value="apple" label="Apple">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>

4
website/docs/guides/markdown-features/markdown-features-code-blocks.mdx
View File

@ -375,7 +375,7 @@ import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
<Tabs>
<TabItem value="js" label="JavaScript" default>
<TabItem value="js" label="JavaScript">
```js
function helloWorld() {
@ -410,7 +410,7 @@ And you will get the following:
````mdx-code-block
<Tabs>
<TabItem value="js" label="JavaScript" default>
<TabItem value="js" label="JavaScript">
```js
function helloWorld() {

38
website/docs/guides/markdown-features/markdown-features-tabs.mdx
View File

@ -35,7 +35,7 @@ import TabItem from '@theme/TabItem';
```mdx-code-block
<BrowserWindow>
<Tabs>
<TabItem value="apple" label="Apple" default>This is an apple 🍎</TabItem>
<TabItem value="apple" label="Apple">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>
@ -111,7 +111,7 @@ It is also possible to provide `values` and `defaultValue` props to `Tabs`:
]}>
<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">This is a banana 🍌</TabItem>
<TabItem value="banana" label="Banana 2" default>This is a banana 🍌</TabItem>
</Tabs>
</BrowserWindow>
<br/>
@ -123,17 +123,15 @@ It is also possible to provide `values` and `defaultValue` props to `Tabs`:
By default, all tabs are rendered eagerly during the build process, and search engines can index hidden tabs.
It is possible to only render the default tab with `<Tabs lazy={true} />`.
It is possible to only render the default tab with `<Tabs lazy />`.
:::
## Displaying a default tab
Add `default` to one of the tab items to make it displayed by default. You can also set the `defaultValue` prop in the `Tabs` component to the label value of your choice.
The first tab is displayed by default, and to override this behavior, you can specify a default tab by adding `default` to one of the tab items. You can also set the `defaultValue` prop of the `Tabs` component to the label value of your choice. For example, in the example above, either setting `default` for the `value="apple"` tab or setting `defaultValue="apple"` for the tabs forces the "Apple" tab to be open by default.
For example, in the example above, setting `default` for the `value="apple"` tab forces it to be open by default.
If none of the children contains the `default` prop, neither is the `defaultValue` provided for the `Tabs`, or it refers to an non-existing value, only the tab headings appear until the user clicks on a tab.
If `defaultValue` is provided for the `Tabs`, but it refers to an non-existing value, only the tab headings will appear until the user clicks on a tab.
## Syncing tab choices {#syncing-tab-choices}
@ -142,13 +140,13 @@ You may want choices of the same kind of tabs to sync with each other. For examp
```jsx
// highlight-next-line
<Tabs groupId="operating-systems">
<TabItem value="win" label="Windows" default>Use Ctrl + C to copy.</TabItem>
<TabItem value="win" label="Windows">Use Ctrl + C to copy.</TabItem>
<TabItem value="mac" label="MacOS">Use Command + C to copy.</TabItem>
</Tabs>
// highlight-next-line
<Tabs groupId="operating-systems">
<TabItem value="win" label="Windows" default>Use Ctrl + V to paste.</TabItem>
<TabItem value="win" label="Windows">Use Ctrl + V to paste.</TabItem>
<TabItem value="mac" label="MacOS">Use Command + V to paste.</TabItem>
</Tabs>
```
@ -156,12 +154,12 @@ You may want choices of the same kind of tabs to sync with each other. For examp
```mdx-code-block
<BrowserWindow>
<Tabs groupId="operating-systems">
<TabItem value="win" label="Windows" default>Use Ctrl + C to copy.</TabItem>
<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" default>Use Ctrl + V to paste.</TabItem>
<TabItem value="win" label="Windows">Use Ctrl + V to paste.</TabItem>
<TabItem value="mac" label="MacOS">Use Command + V to paste.</TabItem>
</Tabs>
</BrowserWindow>
@ -172,7 +170,7 @@ For all tab groups that have the same `groupId`, the possible values do not need
```jsx
<Tabs groupId="operating-systems">
<TabItem value="win" label="Windows" default>
<TabItem value="win" label="Windows">
I am Windows.
</TabItem>
<TabItem value="mac" label="MacOS">
@ -187,7 +185,7 @@ For all tab groups that have the same `groupId`, the possible values do not need
```mdx-code-block
<BrowserWindow>
<Tabs groupId="operating-systems">
<TabItem value="win" label="Windows" default>I am Windows.</TabItem>
<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>
@ -201,13 +199,13 @@ Tab choices with different `groupId`s will not interfere with each other:
```jsx
// highlight-next-line
<Tabs groupId="operating-systems">
<TabItem value="win" label="Windows" default>Windows in windows.</TabItem>
<TabItem value="win" label="Windows">Windows in windows.</TabItem>
<TabItem value="mac" label="MacOS">macOS is macOS.</TabItem>
</Tabs>
// highlight-next-line
<Tabs groupId="non-mac-operating-systems">
<TabItem value="win" label="Windows" default>Windows is windows.</TabItem>
<TabItem value="win" label="Windows">Windows is windows.</TabItem>
<TabItem value="unix" label="Unix">Unix is unix.</TabItem>
</Tabs>
```
@ -215,12 +213,12 @@ Tab choices with different `groupId`s will not interfere with each other:
```mdx-code-block
<BrowserWindow>
<Tabs groupId="operating-systems">
<TabItem value="win" label="Windows" default>Windows in windows.</TabItem>
<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" default>Windows is windows.</TabItem>
<TabItem value="win" label="Windows">Windows is windows.</TabItem>
<TabItem value="unix" label="Unix">Unix is unix.</TabItem>
</Tabs>
</BrowserWindow>
@ -236,9 +234,7 @@ import TabItem from '@theme/TabItem';
// highlight-next-line
<Tabs className="unique-tabs">
<TabItem value="Apple" default>
This is an apple 🍎
</TabItem>
<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>;
@ -247,7 +243,7 @@ import TabItem from '@theme/TabItem';
```mdx-code-block
<BrowserWindow>
<Tabs className="unique-tabs">
<TabItem value="Apple" default>This is an apple 🍎</TabItem>
<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>

2
website/docs/i18n/i18n-crowdin.mdx
View File

@ -364,7 +364,7 @@ import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
<Tabs>
<TabItem value="bash" label="Bash" default>
<TabItem value="bash" label="Bash">
```bash
GIT_USER=<GITHUB_USERNAME> yarn deploy