Skip to content

Commit

Permalink
Merge pull request #13483 from newrelic/austin-schaefer-patch-9
Browse files Browse the repository at this point in the history 
chore(style guide): Add/improve tabs example syntax
  • Loading branch information
@austin-schaefer
austin-schaefer committed Jun 13, 2023
2 parents 432184e + b9c4bfc commit 783f48c
Showing 1 changed file with 90 additions and 11 deletions.
101 changes: 90 additions & 11 deletions src/content/docs/style-guide/structure/tabs.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,28 +6,107 @@ tags:
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.
Tabs, like [collapsers](/docs/style-guide/structure/collapsers/), present various sets of information in a condensed space. They're particularly helpful as a way to present options, or to show off product functionality. 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 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

### Code

```jsx
<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 three
</TabsPageItem>
</TabsPages>
</Tabs>
```

### Output

<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 three
</TabsPageItem>
</TabsPages>
</Tabs>


## Example: Vertical tabs

### Code

```jsx
<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 three
</TabsPageItem>
</TabsPages>
</Tabs>
```
<Callout variant="tip">
The Keyboard Maestro for the Tabs component is `kktabgroup`.
</Callout>

### 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 three
</TabsPageItem>
</TabsPages>
</Tabs>

0 comments on commit 783f48c

Please sign in to comment.