Skip to content

Commit

Permalink
chore(style guide): Add/improve tabs example syntax
Browse files Browse the repository at this point in the history
  • Loading branch information
@austin-schaefer
austin-schaefer committed Jun 12, 2023
1 parent b7cf625 commit 2a288b2
Showing 1 changed file with 89 additions and 10 deletions.
99 changes: 89 additions & 10 deletions src/content/docs/style-guide/structure/tabs.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,26 +8,105 @@ 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=` section, and match the content of the TabsPages by putting the `id=` 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 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.

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

### Example: Horizontal tabs

Code:

```
<Tabs>
<TabsBar>
<TabsBarItem id=""></TabsBarItem>
<TabsBarItem id=""></TabsBarItem>
<TabsBarItem id=""></TabsBarItem>
<TabsBarItem id="1">Tab one</TabsBarItem>
<TabsBarItem id="2">Tab two</TabsBarItem>
<TabsBarItem id="3">Tab three</TabsBarItem>
</TabsBar>
<TabsPages>
<TabsPageItem id="">
<TabsPageItem id="1">
Contents for tab one
</TabsPageItem>
<TabsPageItem id="">
<TabsPageItem id="2">
Contents for tab two
</TabsPageItem>
<TabsPageItem id="">
<TabsPageItem id="3">
Contents for tab 3
</TabsPageItem>
</TabsPages>
</Tabs>
```
<Callout variant="tip">
The Keyboard Maestro for the Tabs component is `kktabgroup`.
</Callout>

Output:

<Tabs>
<TabsBar>
<TabsBarItem id="1">Tab one</TabsBarItem>
<TabsBarItem id="2">Tab two</TabsBarItem>
<TabsBarItem id="3">Tab three</TabsBarItem>
</TabsBar>

<TabsPages>
<TabsPageItem id="1">
Contents for tab one
</TabsPageItem>
<TabsPageItem id="2">
Contents for tab two
</TabsPageItem>
<TabsPageItem id="3">
Contents for tab 3
</TabsPageItem>
</TabsPages>
</Tabs>


### Example: Vertical tabs

Code:

```
<Tabs stacked>
<TabsBar>
<TabsBarItem id="1">Tab one</TabsBarItem>
<TabsBarItem id="2">Tab two</TabsBarItem>
<TabsBarItem id="3">Tab three</TabsBarItem>
</TabsBar>
<TabsPages>
<TabsPageItem id="1">
Contents for tab one
</TabsPageItem>
<TabsPageItem id="2">
Contents for tab two
</TabsPageItem>
<TabsPageItem id="3">
Contents for tab 3
</TabsPageItem>
</TabsPages>
</Tabs>
```

Output:

<Tabs stacked>
<TabsBar>
<TabsBarItem id="1">Tab one</TabsBarItem>
<TabsBarItem id="2">Tab two</TabsBarItem>
<TabsBarItem id="3">Tab three</TabsBarItem>
</TabsBar>

<TabsPages>
<TabsPageItem id="1">
Contents for tab one
</TabsPageItem>
<TabsPageItem id="2">
Contents for tab two
</TabsPageItem>
<TabsPageItem id="3">
Contents for tab 3
</TabsPageItem>
</TabsPages>
</Tabs>

0 comments on commit 2a288b2

Please sign in to comment.