diff --git a/packages/docusaurus-theme-classic/src/theme/Tabs/index.tsx b/packages/docusaurus-theme-classic/src/theme/Tabs/index.tsx index 13ea03591d..0c35907f4f 100644 --- a/packages/docusaurus-theme-classic/src/theme/Tabs/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/Tabs/index.tsx @@ -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); diff --git a/website/docs/blog.mdx b/website/docs/blog.mdx index c89ef45d9f..ecb0312384 100644 --- a/website/docs/blog.mdx +++ b/website/docs/blog.mdx @@ -177,7 +177,7 @@ Blog post authors can be declared directly inside the FrontMatter: ````mdx-code-block - + ```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 - + ```yml title="my-blog-post.md" --- diff --git a/website/docs/deployment.mdx b/website/docs/deployment.mdx index 62aaf57faa..d562499091 100644 --- a/website/docs/deployment.mdx +++ b/website/docs/deployment.mdx @@ -144,7 +144,7 @@ Finally, to deploy your site to GitHub Pages, run: ````mdx-code-block - + ```bash GIT_USER= yarn deploy diff --git a/website/docs/guides/markdown-features/markdown-features-admonitions.mdx b/website/docs/guides/markdown-features/markdown-features-admonitions.mdx index e66c0d84ec..69784e5dc1 100644 --- a/website/docs/guides/markdown-features/markdown-features-admonitions.mdx +++ b/website/docs/guides/markdown-features/markdown-features-admonitions.mdx @@ -97,7 +97,7 @@ import TabItem from '@theme/TabItem'; :::tip Use tabs in admonitions - This is an apple 🍎 + This is an apple 🍎 This is an orange 🍊 This is a banana 🍌 @@ -114,7 +114,7 @@ import TabItem from '@theme/TabItem'; ```mdx-code-block - This is an apple 🍎 + This is an apple 🍎 This is an orange 🍊 This is a banana 🍌 diff --git a/website/docs/guides/markdown-features/markdown-features-code-blocks.mdx b/website/docs/guides/markdown-features/markdown-features-code-blocks.mdx index 69b488496f..5c355f1e46 100644 --- a/website/docs/guides/markdown-features/markdown-features-code-blocks.mdx +++ b/website/docs/guides/markdown-features/markdown-features-code-blocks.mdx @@ -375,7 +375,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; - + ```js function helloWorld() { @@ -410,7 +410,7 @@ And you will get the following: ````mdx-code-block - + ```js function helloWorld() { diff --git a/website/docs/guides/markdown-features/markdown-features-tabs.mdx b/website/docs/guides/markdown-features/markdown-features-tabs.mdx index 01ed2cad93..d2f2e186f8 100644 --- a/website/docs/guides/markdown-features/markdown-features-tabs.mdx +++ b/website/docs/guides/markdown-features/markdown-features-tabs.mdx @@ -35,7 +35,7 @@ import TabItem from '@theme/TabItem'; ```mdx-code-block - This is an apple 🍎 + This is an apple 🍎 This is an orange 🍊 This is a banana 🍌 @@ -111,7 +111,7 @@ It is also possible to provide `values` and `defaultValue` props to `Tabs`: ]}> This is an apple 🍎 This is an orange 🍊 - This is a banana 🍌 + This is a banana 🍌
@@ -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 ``. +It is possible to only render the default tab with ``. ::: ## 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 - Use Ctrl + C to copy. + Use Ctrl + C to copy. Use Command + C to copy. // highlight-next-line - Use Ctrl + V to paste. + Use Ctrl + V to paste. Use Command + V to paste. ``` @@ -156,12 +154,12 @@ You may want choices of the same kind of tabs to sync with each other. For examp ```mdx-code-block - Use Ctrl + C to copy. + Use Ctrl + C to copy. Use Command + C to copy. - Use Ctrl + V to paste. + Use Ctrl + V to paste. Use Command + V to paste. @@ -172,7 +170,7 @@ For all tab groups that have the same `groupId`, the possible values do not need ```jsx - + I am Windows. @@ -187,7 +185,7 @@ For all tab groups that have the same `groupId`, the possible values do not need ```mdx-code-block - I am Windows. + I am Windows. I am macOS. I am Linux. @@ -201,13 +199,13 @@ Tab choices with different `groupId`s will not interfere with each other: ```jsx // highlight-next-line - Windows in windows. + Windows in windows. macOS is macOS. // highlight-next-line - Windows is windows. + Windows is windows. Unix is unix. ``` @@ -215,12 +213,12 @@ Tab choices with different `groupId`s will not interfere with each other: ```mdx-code-block - Windows in windows. + Windows in windows. macOS is macOS. - Windows is windows. + Windows is windows. Unix is unix. @@ -236,9 +234,7 @@ import TabItem from '@theme/TabItem'; // highlight-next-line - - This is an apple 🍎 - + This is an apple 🍎 This is an orange 🍊 This is a banana 🍌 ; @@ -247,7 +243,7 @@ import TabItem from '@theme/TabItem'; ```mdx-code-block - This is an apple 🍎 + This is an apple 🍎 This is an orange 🍊 This is a banana 🍌 diff --git a/website/docs/i18n/i18n-crowdin.mdx b/website/docs/i18n/i18n-crowdin.mdx index dd0b77172c..f1ae9a11cd 100644 --- a/website/docs/i18n/i18n-crowdin.mdx +++ b/website/docs/i18n/i18n-crowdin.mdx @@ -364,7 +364,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; - + ```bash GIT_USER= yarn deploy