Skip to content

Commit

Permalink
chore(style guide): Further clarify tab syntax
Browse files Browse the repository at this point in the history
  • Loading branch information
austin-schaefer committed Jun 13, 2023
1 parent 2a288b2 commit 996e95c
Showing 1 changed file with 11 additions and 11 deletions.
22 changes: 11 additions & 11 deletions src/content/docs/style-guide/structure/tabs.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,15 @@ redirects:

Tabs, like `collapsers`, present various sets of information in a condensed space. Tabs present their information all at once, and unlike collapsers, you can't have multiple tabs from the same group visible at once. Tabs are framed by Tabs tags, with the `TabsBar` subgroup responsible for formatting the "tabs" themselves, and the TabsPages controlling the formatting and presentation of the copy under each individual tab.

You can set tab groups as either horizontal or vertical tabs. For vertical tabs, use `<Tabs stacked>` instead of `<Tabs>` as the header. For each TabsBarItem, set the title for the tab in the `id="YOUR_ID_HERE"` section, and match the content of the TabsPages by putting the `id="YOUR_ID_HERE"` entry in the appropriate `TabsPageItem id=""` section.
You can set tab groups as either horizontal or vertical tabs. For vertical tabs, use `<Tabs stacked>` instead of `<Tabs>` as the header. For each `<TabsBarItem>`, set the ID for the tab in the `id="YOUR_ID_HERE"` section, and match the content of the `<TabsPages>` by putting a matching ID in the appropriate `<TabsPageItem id="YOUR_ID_HERE">` section.

<Callout variant="tip">
The Keyboard Maestro for the Tabs component is `kktabgroup`.
</Callout>

### Example: Horizontal tabs
## Example: Horizontal tabs

Code:
### Code

```
<Tabs>
Expand All @@ -34,13 +34,13 @@ Code:
Contents for tab two
</TabsPageItem>
<TabsPageItem id="3">
Contents for tab 3
Contents for tab three
</TabsPageItem>
</TabsPages>
</Tabs>
```

Output:
### Output

<Tabs>
<TabsBar>
Expand All @@ -57,15 +57,15 @@ Output:
Contents for tab two
</TabsPageItem>
<TabsPageItem id="3">
Contents for tab 3
Contents for tab three
</TabsPageItem>
</TabsPages>
</Tabs>


### Example: Vertical tabs
## Example: Vertical tabs

Code:
### Code

```
<Tabs stacked>
Expand All @@ -83,13 +83,13 @@ Code:
Contents for tab two
</TabsPageItem>
<TabsPageItem id="3">
Contents for tab 3
Contents for tab three
</TabsPageItem>
</TabsPages>
</Tabs>
```

Output:
### Output

<Tabs stacked>
<TabsBar>
Expand All @@ -106,7 +106,7 @@ Output:
Contents for tab two
</TabsPageItem>
<TabsPageItem id="3">
Contents for tab 3
Contents for tab three
</TabsPageItem>
</TabsPages>
</Tabs>

0 comments on commit 996e95c

Please sign in to comment.