UNPKG

@patternfly/patternfly

Version:

Assets, source, tooling, and content for PatternFly 4

github.com/patternfly/patternfly

patternfly/patternfly

59 lines (52 loc) • 2.3 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
--- id: Tab content section: components cssPrefix: pf-c-tab-content --- ## Examples ### Basic ```hbs {{#> tab-content tab-content--IsActive="true" tab-content--attribute='id="tab1-panel"'}} Panel 1 {{/tab-content}} {{#> tab-content tab-content--attribute='id="tab2-panel"'}} Panel 2 {{/tab-content}} {{#> tab-content tab-content--attribute='id="tab3-panel"'}} Panel 3 {{/tab-content}} {{#> tab-content tab-content--attribute='id="tab4-panel"'}} Panel 4 {{/tab-content}} ``` ### Light 300 background ```hbs {{#> tab-content tab-content--modifier="pf-m-light-300" tab-content--IsActive="true" tab-content--attribute='id="light-300-tab1-panel"'}} Panel 1 {{/tab-content}} {{#> tab-content tab-content--modifier="pf-m-light-300" tab-content--attribute='id="tab2-panel"'}} Panel 2 {{/tab-content}} {{#> tab-content tab-content--modifier="pf-m-light-300" tab-content--attribute='id="tab3-panel"'}} Panel 3 {{/tab-content}} {{#> tab-content tab-content--modifier="pf-m-light-300" tab-content--attribute='id="tab4-panel"'}} Panel 4 {{/tab-content}} ``` ## Documentation ### Overview Tab content should be used with the [tabs component](/documentation/core/components/tabs). ### Accessibility | Attribute | Applied to | Outcome | | -- | -- | -- | | `role="tabpanel"` | `.pf-c-tab-content` | Indicates that the element serves as a container for a set of tabs. **Required** | | `aria-labelledby=[ID of tab element]` | `.pf-c-tab-content` | Provides an accessible name for the tab panel by referring to the tab element that controls it. **Required** | `id=[ID of tab panel]` | `.pf-c-tab-content` | Provides an ID for the tab panel, and should be used as the value of `aria-controls` on the tab element that controls the panel. **Required** | `hidden` | `.pf-c-tab-content` | Indicates that the tab panel is not visible. **Required on all but the active tab panel** | `tabindex="0"` | `.pf-c-tab-content` | Puts the tab panel in the page tab sequence and facilitates movement to panel content for assistive technology users. **Required** ### Usage | Class | Applied to | Outcome | | -- | -- | -- | | `.pf-c-tab-content` | `<section>` | Initiates the tab content component. **Required** | | `.pf-m-light-300` | `.pf-c-tab-content` | Modifies the tab content component background color. |