Skip to content

Commit 76c26f3

Browse files
ajay-dhangarajay-dhangar
committed
Fixed errors
1 parent f4fb1ef commit 76c26f3

File tree

4 files changed

+202
-5
lines changed

4 files changed

+202
-5
lines changed

‎docs/blog.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ Once added, Docusaurus will automatically generate routes for your blog posts.
3636
## Writing Posts {#writing-posts}
3737

3838
Each post is a Markdown (`.md`) or MDX (`.mdx`) file inside the `blog` folder.
39-
Use [front matter](/docs/guides/markdown-features/markdown-features-intro#front-matter) to define metadata such as title, description, author, and tags.
39+
Use [front matter](/docs/markdown-features#front-matter) to define metadata such as title, description, author, and tags.
4040

4141
Example:
4242

‎docs/guides/docs/sidebar/multiple-sidebars.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ You can create **different sidebars** for separate sets of Markdown files and di
99
:::tip
1010
The official Docusaurus site itself is a good example of multiple sidebars:
1111

12-
- [Docs](/docs/introduction)
12+
- [Docs](/docs)
1313
- [API](https://docusaurus.io/docs/cli)
1414
:::
1515

‎docs/guides/markdown-features/markdown-features-tabs.mdx‎

Lines changed: 194 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,194 @@
1+
---
2+
id: tabs
3+
description: Using Tabs in CodeHarborHub Markdown with MDX
4+
slug: /markdown-features/tabs
5+
---
6+
7+
# Tabs
8+
9+
```mdx-code-block
10+
import styles from './markdown-features-tabs-styles.module.css';
11+
```
12+
13+
CodeHarborHub (built on Docusaurus) provides the **`<Tabs>`** component that you can use directly inside Markdown files thanks to [MDX](./markdown-features-react.mdx).
14+
15+
Here’s a basic example:
16+
17+
```jsx
18+
import Tabs from '@theme/Tabs';
19+
import TabItem from '@theme/TabItem';
20+
21+
<Tabs>
22+
<TabItem value="html" label="HTML" default>
23+
HTML content goes here.
24+
</TabItem>
25+
<TabItem value="css" label="CSS">
26+
CSS content goes here.
27+
</TabItem>
28+
<TabItem value="js" label="JavaScript">
29+
JavaScript content goes here.
30+
</TabItem>
31+
</Tabs>
32+
```
33+
34+
```mdx-code-block
35+
<BrowserWindow>
36+
<Tabs>
37+
<TabItem value="html" label="HTML">HTML content goes here.</TabItem>
38+
<TabItem value="css" label="CSS">CSS content goes here.</TabItem>
39+
<TabItem value="js" label="JavaScript">JavaScript content goes here.</TabItem>
40+
</Tabs>
41+
</BrowserWindow>
42+
```
43+
44+
<AdsComponent />
45+
46+
## Using `values` & `defaultValue`
47+
48+
You can provide a `values` array and a `defaultValue` to simplify tab definitions:
49+
50+
```jsx
51+
<Tabs
52+
defaultValue="html"
53+
values={[
54+
{label: 'HTML', value: 'html'},
55+
{label: 'CSS', value: 'css'},
56+
{label: 'JavaScript', value: 'js'},
57+
]}>
58+
<TabItem value="html">HTML content goes here.</TabItem>
59+
<TabItem value="css">CSS content goes here.</TabItem>
60+
<TabItem value="js">JavaScript content goes here.</TabItem>
61+
</Tabs>
62+
```
63+
64+
```mdx-code-block
65+
<BrowserWindow>
66+
<Tabs
67+
defaultValue="html"
68+
values={[
69+
{label: 'HTML', value: 'html'},
70+
{label: 'CSS', value: 'css'},
71+
{label: 'JavaScript', value: 'js'},
72+
]}>
73+
<TabItem value="html">HTML content goes here.</TabItem>
74+
<TabItem value="css">CSS content goes here.</TabItem>
75+
<TabItem value="js">JavaScript content goes here.</TabItem>
76+
</Tabs>
77+
</BrowserWindow>
78+
```
79+
80+
<AdsComponent />
81+
82+
## Syncing Tab Choices {#syncing-tab-choices}
83+
84+
To synchronize multiple tab groups (e.g., **Beginner / Advanced**), use the same `groupId`.
85+
Changing one tab updates all groups with the same ID, and the choice is stored in `localStorage`:
86+
87+
```jsx
88+
<Tabs groupId="skill-level">
89+
<TabItem value="beginner" label="Beginner">Basic code setup</TabItem>
90+
<TabItem value="advanced" label="Advanced">Advanced optimizations</TabItem>
91+
</Tabs>
92+
93+
<Tabs groupId="skill-level">
94+
<TabItem value="beginner" label="Beginner">Intro resources</TabItem>
95+
<TabItem value="advanced" label="Advanced">Performance tips</TabItem>
96+
</Tabs>
97+
```
98+
99+
```mdx-code-block
100+
<BrowserWindow>
101+
<Tabs groupId="skill-level">
102+
<TabItem value="beginner" label="Beginner">Basic code setup</TabItem>
103+
<TabItem value="advanced" label="Advanced">Advanced optimizations</TabItem>
104+
</Tabs>
105+
106+
<Tabs groupId="skill-level">
107+
<TabItem value="beginner" label="Beginner">Intro resources</TabItem>
108+
<TabItem value="advanced" label="Advanced">Performance tips</TabItem>
109+
</Tabs>
110+
</BrowserWindow>
111+
```
112+
113+
<AdsComponent />
114+
115+
## Lazy Rendering {#lazy-rendering}
116+
117+
By default, all tab contents are rendered at build time.
118+
To render only the **active tab** (improves performance on large pages),
119+
add the `lazy` prop:
120+
121+
```jsx
122+
<Tabs lazy>
123+
<TabItem value="html" label="HTML">Rendered only when active.</TabItem>
124+
<TabItem value="css" label="CSS">Rendered only when active.</TabItem>
125+
</Tabs>
126+
```
127+
128+
---
129+
130+
## Styling Tabs {#styling-tabs}
131+
132+
You can add a `className` prop to customize tab styles:
133+
134+
```jsx
135+
<Tabs className="custom-tabs">
136+
<TabItem value="html">HTML</TabItem>
137+
<TabItem value="css">CSS</TabItem>
138+
</Tabs>
139+
```
140+
141+
Then define your styles in a module:
142+
143+
```css title="markdown-features-tabs-styles.module.css"
144+
.custom-tabs :global(.tabs__item) {
145+
color: #25c2a0;
146+
}
147+
.custom-tabs :global(.tabs__item[aria-selected='true']) {
148+
border-bottom: 2px solid #25c2a0;
149+
}
150+
```
151+
152+
<AdsComponent />
153+
154+
## Query String Support {#query-string}
155+
156+
Persist tab selections in the URL so you can share a direct link
157+
to a page with a **specific tab preselected**.
158+
159+
```jsx
160+
<Tabs queryString="topic">
161+
<TabItem value="frontend" label="Frontend">Frontend Docs</TabItem>
162+
<TabItem value="backend" label="Backend">Backend Docs</TabItem>
163+
</Tabs>
164+
```
165+
166+
When a tab is selected, the URL updates to:
167+
168+
```
169+
?topic=frontend
170+
```
171+
172+
:::info
173+
174+
You can also combine with `groupId` for persistent syncing:
175+
176+
For convenience, when the queryString prop is true, the groupId value will be used as a fallback.
177+
178+
```jsx
179+
<Tabs groupId="topic" queryString>
180+
<TabItem value="frontend" label="Frontend">Frontend Docs</TabItem>
181+
<TabItem value="backend" label="Backend">Backend Docs</TabItem>
182+
</Tabs>
183+
```
184+
185+
<BrowserWindow>
186+
<Tabs groupId="topic" queryString>
187+
<TabItem value="frontend" label="Frontend">Frontend Docs</TabItem>
188+
<TabItem value="backend" label="Backend">Backend Docs</TabItem>
189+
</Tabs>
190+
</BrowserWindow>
191+
192+
When the page loads, the tab query string choice will be restored in priority over the groupId choice (using localStorage).
193+
194+
:::

‎sidebars.js‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -66,10 +66,13 @@ const sidebars = {
6666
type: "doc",
6767
id: "guides/markdown-features/introduction",
6868
},
69-
items: ["guides/markdown-features/react"],
69+
items: [
70+
"guides/markdown-features/react",
71+
"guides/markdown-features/tabs",
72+
],
7073
},
71-
'styling-layout',
72-
'browser-support',
74+
"styling-layout",
75+
"browser-support",
7376
"seo",
7477
],
7578
},

0 commit comments

Comments
 (0)