1 | @# Tabs
|
2 |
|
3 | @reactExample TabsExample
|
4 |
|
5 | @## Props
|
6 |
|
7 | Tab selection is managed by `id`, much like the HTML `<select>` element respects
|
8 | `<option value>`. This is more reliable than using a numeric index as it does
|
9 | not require translating between arbitrary indices and tab names. It does,
|
10 | however, require that every `Tab` have a _locally unique `id` value_.
|
11 |
|
12 | Arbitrary elements are supported in the tab list, and order is respected. Yes,
|
13 | you can even insert things _between_ `Tab`s.
|
14 |
|
15 | ```tsx
|
16 | import { Tab, Tabs } from "@blueprintjs/core";
|
17 |
|
18 | <Tabs id="TabsExample" onChange={this.handleTabChange} selectedTabId="rx">
|
19 | <Tab id="ng" title="Angular" panel={<AngularPanel />} />
|
20 | <Tab id="mb" title="Ember" panel={<EmberPanel />} panelClassName="ember-panel" />
|
21 | <Tab id="rx" title="React" panel={<ReactPanel />} />
|
22 | <Tab id="bb" disabled title="Backbone" panel={<BackbonePanel />} />
|
23 | <Tabs.Expander />
|
24 | <input className="@ns-input" type="text" placeholder="Search..." />
|
25 | </Tabs>
|
26 | ```
|
27 |
|
28 | @### Tabs
|
29 |
|
30 | `Tabs` is the top-level component responsible for rendering the tab list and coordinating selection.
|
31 | It can be used in controlled mode by providing `selectedTabId` and `onChange` props, or in
|
32 | uncontrolled mode by optionally providing `defaultSelectedTabId` and `onChange`.
|
33 |
|
34 | Children of the `Tabs` are rendered in order in the tab list, which is a flex container.
|
35 | `Tab` children are managed by the component; clicking one will change selection. Arbitrary other
|
36 | children are simply rendered in order; interactions are your responsibility.
|
37 |
|
38 | Insert a `<Tabs.Expander />` between any two children to right-align all
|
39 | subsequent children (or bottom-align when `vertical`).
|
40 |
|
41 | @interface ITabsProps
|
42 |
|
43 | @### Tab
|
44 |
|
45 | `Tab` is a minimal wrapper with no functionality of its own—it is managed entirely by its
|
46 | parent `Tabs` wrapper. Tab title text can be set either via `title` prop or via React children
|
47 | (for more complex content).
|
48 |
|
49 | The associated tab `panel` will be visible when the `Tab` is active. Omitting
|
50 | `panel` is supported and can be useful when you want the associated panel to
|
51 | appear elsewhere in the DOM (by rendering it yourself as needed).
|
52 |
|
53 | @interface ITabProps
|
54 |
|
55 | @## CSS
|
56 |
|
57 | Blueprint offers tab styles with the class `@ns-tabs`. You should add the proper
|
58 | accessibility attributes (`role`, `aria-selected`, and `aria-hidden`) as
|
59 | necessary if you choose to implement tabs with CSS.
|
60 |
|
61 | `.@ns-tab-panel` elements with `aria-hidden="true"` are hidden automatically by
|
62 | the Blueprint CSS. You may also simply omit hidden tabs from your markup to
|
63 | improve performance (the `Tabs` JavaScript component supports this through the
|
64 | `renderActiveTabPanelOnly` prop).
|
65 |
|
66 | @css tabs
|