3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-05-01 03:08:17 +02:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source 
* 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 = const defaultValue =
defaultValueProp ?? 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 {tabGroupChoices, setTabGroupChoices} = useUserPreferencesContext();
const [selectedValue, setSelectedValue] = useState(defaultValue); 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 ````mdx-code-block
<Tabs groupId="author-frontmatter"> <Tabs groupId="author-frontmatter">
<TabItem value="single" label="Single author" default> <TabItem value="single" label="Single author">
```yml title="my-blog-post.md" ```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 ````mdx-code-block
<Tabs groupId="author-frontmatter"> <Tabs groupId="author-frontmatter">
<TabItem value="single" label="Single author" default> <TabItem value="single" label="Single author">
```yml title="my-blog-post.md" ```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 ````mdx-code-block
<Tabs> <Tabs>
<TabItem value="bash" label="Bash" default> <TabItem value="bash" label="Bash">
```bash ```bash
GIT_USER=<GITHUB_USERNAME> yarn deploy 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 :::tip Use tabs in admonitions
<Tabs> <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="orange" label="Orange">This is an orange 🍊</TabItem>
<TabItem value="banana" label="Banana">This is a banana 🍌</TabItem> <TabItem value="banana" label="Banana">This is a banana 🍌</TabItem>
</Tabs> </Tabs>
@ -114,7 +114,7 @@ import TabItem from '@theme/TabItem';
```mdx-code-block ```mdx-code-block
<Tabs> <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="orange" label="Orange">This is an orange 🍊</TabItem>
<TabItem value="banana" label="Banana">This is a banana 🍌</TabItem> <TabItem value="banana" label="Banana">This is a banana 🍌</TabItem>
</Tabs> </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'; import TabItem from '@theme/TabItem';
<Tabs> <Tabs>
<TabItem value="js" label="JavaScript" default> <TabItem value="js" label="JavaScript">
```js ```js
function helloWorld() { function helloWorld() {
@ -410,7 +410,7 @@ And you will get the following:
````mdx-code-block ````mdx-code-block
<Tabs> <Tabs>
<TabItem value="js" label="JavaScript" default> <TabItem value="js" label="JavaScript">
```js ```js
function helloWorld() { 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 ```mdx-code-block
<BrowserWindow> <BrowserWindow>
<Tabs> <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="orange" label="Orange">This is an orange 🍊</TabItem>
<TabItem value="banana" label="Banana">This is a banana 🍌</TabItem> <TabItem value="banana" label="Banana">This is a banana 🍌</TabItem>
</Tabs> </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="apple" label="Apple 2">This is an apple 🍎</TabItem>
<TabItem value="orange" label="Orange 2">This is an orange 🍊</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> </Tabs>
</BrowserWindow> </BrowserWindow>
<br/> <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. 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 ## 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 `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.
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.
## Syncing tab choices {#syncing-tab-choices} ## 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 ```jsx
// highlight-next-line // highlight-next-line
<Tabs groupId="operating-systems"> <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> <TabItem value="mac" label="MacOS">Use Command + C to copy.</TabItem>
</Tabs> </Tabs>
// highlight-next-line // highlight-next-line
<Tabs groupId="operating-systems"> <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> <TabItem value="mac" label="MacOS">Use Command + V to paste.</TabItem>
</Tabs> </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 ```mdx-code-block
<BrowserWindow> <BrowserWindow>
<Tabs groupId="operating-systems"> <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> <TabItem value="mac" label="MacOS">Use Command + C to copy.</TabItem>
</Tabs> </Tabs>
<Tabs groupId="operating-systems"> <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> <TabItem value="mac" label="MacOS">Use Command + V to paste.</TabItem>
</Tabs> </Tabs>
</BrowserWindow> </BrowserWindow>
@ -172,7 +170,7 @@ For all tab groups that have the same `groupId`, the possible values do not need
```jsx ```jsx
<Tabs groupId="operating-systems"> <Tabs groupId="operating-systems">
<TabItem value="win" label="Windows" default> <TabItem value="win" label="Windows">
I am Windows. I am Windows.
</TabItem> </TabItem>
<TabItem value="mac" label="MacOS"> <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 ```mdx-code-block
<BrowserWindow> <BrowserWindow>
<Tabs groupId="operating-systems"> <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="mac" label="MacOS">I am macOS.</TabItem>
<TabItem value="linux" label="Linux">I am Linux.</TabItem> <TabItem value="linux" label="Linux">I am Linux.</TabItem>
</Tabs> </Tabs>
@ -201,13 +199,13 @@ Tab choices with different `groupId`s will not interfere with each other:
```jsx ```jsx
// highlight-next-line // highlight-next-line
<Tabs groupId="operating-systems"> <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> <TabItem value="mac" label="MacOS">macOS is macOS.</TabItem>
</Tabs> </Tabs>
// highlight-next-line // highlight-next-line
<Tabs groupId="non-mac-operating-systems"> <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> <TabItem value="unix" label="Unix">Unix is unix.</TabItem>
</Tabs> </Tabs>
``` ```
@ -215,12 +213,12 @@ Tab choices with different `groupId`s will not interfere with each other:
```mdx-code-block ```mdx-code-block
<BrowserWindow> <BrowserWindow>
<Tabs groupId="operating-systems"> <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> <TabItem value="mac" label="MacOS">macOS is macOS.</TabItem>
</Tabs> </Tabs>
<Tabs groupId="non-mac-operating-systems"> <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> <TabItem value="unix" label="Unix">Unix is unix.</TabItem>
</Tabs> </Tabs>
</BrowserWindow> </BrowserWindow>
@ -236,9 +234,7 @@ import TabItem from '@theme/TabItem';
// highlight-next-line // highlight-next-line
<Tabs className="unique-tabs"> <Tabs className="unique-tabs">
<TabItem value="Apple" default> <TabItem value="Apple">This is an apple 🍎</TabItem>
This is an apple 🍎
</TabItem>
<TabItem value="Orange">This is an orange 🍊</TabItem> <TabItem value="Orange">This is an orange 🍊</TabItem>
<TabItem value="Banana">This is a banana 🍌</TabItem> <TabItem value="Banana">This is a banana 🍌</TabItem>
</Tabs>; </Tabs>;
@ -247,7 +243,7 @@ import TabItem from '@theme/TabItem';
```mdx-code-block ```mdx-code-block
<BrowserWindow> <BrowserWindow>
<Tabs className="unique-tabs"> <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="Orange">This is an orange 🍊</TabItem>
<TabItem value="Banana">This is a banana 🍌</TabItem> <TabItem value="Banana">This is a banana 🍌</TabItem>
</Tabs> </Tabs>

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

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