You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@@ -22,24 +22,24 @@ import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
22
22
23
23
A `<Tabs>` component contains multiple `<Tab>` components that may be used to navigate between sets of content within a page.
24
24
25
-
You can adjust a tab in the following ways:
25
+
You can adjust a tab in the following ways:
26
26
27
27
- To label a tab with text, pass a `<TabTitleText>` component into the `title` property of a `<Tab>`.
28
-
- To disable a tab, use the `isDisabled` property. Tabs using `isDisabled` are not perceivable or operable by users navigating via assistive technologies.
28
+
- To disable a tab, use the `isDisabled` property. Tabs using `isDisabled` are not perceivable or operable by users navigating via assistive technologies.
29
29
- To disable a tab, but keep it perceivable to assistive technology users, use the `isAriaDisabled` property. If a disabled tab has a tooltip, use this property instead of `isDisabled`.
30
-
- To add a tooltip to an aria-disabled tab, use the `tooltip` property.
30
+
- To add a tooltip to an aria-disabled tab, use the `tooltip` property.
31
31
32
-
Tabs can be styled as 'default' or 'boxed':
32
+
Tabs can be styled as 'default' or 'boxed':
33
33
34
-
- Default tabs do not have any borders and use a bottom line to distinguish between a selected tab, a hovered tab, and an inactive tab.
34
+
- Default tabs do not have any borders and use a bottom line to distinguish between a selected tab, a hovered tab, and an inactive tab.
35
35
- Boxed tabs are outlined to emphasize the area that a tab spans. To preview boxed tabs in the following examples, select the 'isBox' checkbox, which sets the `isBox` property to true.
36
36
37
37
```ts file="./TabsDefault.tsx"
38
38
```
39
39
40
40
### Boxed secondary tabs
41
41
42
-
To change the background color of boxed tabs or the tab content, use the `variant` property.
42
+
To change the background color of boxed tabs or the tab content, use the `variant` property.
43
43
44
44
Toggle the tab color by selecting the 'Tabs secondary variant' checkbox in the following example.
45
45
@@ -50,14 +50,14 @@ Toggle the tab color by selecting the 'Tabs secondary variant' checkbox in the f
50
50
51
51
Vertical tabs are placed on the left-hand side of a page or container and may appear in both 'default' and 'boxed' tab variations.
52
52
53
-
To style tabs vertically, use the `isVertical` property.
53
+
To style tabs vertically, use the `isVertical` property.
54
54
55
55
```ts file="./TabsVertical.tsx"
56
56
```
57
57
58
58
### Vertical expandable tabs
59
59
60
-
Vertical tabs can be made expandable to save space. Users can select the caret to expand a menu and switch between tabs.
60
+
Vertical tabs can be made expandable to save space. Users can select the caret to expand a menu and switch between tabs.
61
61
62
62
Expandable tabs can be enabled at different breakpoints. The following example passes `expandable={{ default: 'expandable', md: 'nonExpandable', lg: 'expandable' }}` into the `<Tabs>` component.
63
63
@@ -75,14 +75,14 @@ To flag the default expanded state for uncontrolled tabs, use the `defaultIsExpa
75
75
76
76
### Default overflow tabs
77
77
78
-
By default, overflow is applied when there are too many tabs for the width of the container they are in. This overflow can be navigated by side-scrolling within the tabs section, or by selecting the left and right arrows.
78
+
By default, overflow is applied when there are too many tabs for the width of the container they are in. This overflow can be navigated by side-scrolling within the tabs section, or by selecting the left and right arrows.
79
79
80
80
```ts file="./TabsDefaultOverflow.tsx"
81
81
```
82
82
83
83
### Horizontal overflow tabs
84
84
85
-
Horizontal overflow can be used instead of the default application. To navigate horizontal overflow tabs users can select the last tab, labeled “more”, to see the overflowed content.
85
+
Horizontal overflow can be used instead of the default application. To navigate horizontal overflow tabs users can select the last tab, labeled “more”, to see the overflowed content.
86
86
87
87
To enable horizontal overflow, use the `isOverflowHorizontal` property.
88
88
@@ -102,7 +102,7 @@ The tooltip should also have the `id` property passed in. The value of `id` shou
102
102
103
103
### Uncontrolled tabs
104
104
105
-
To allow the `<Tabs>` component to manage setting the active tab and displaying correct content itself, use uncontrolled tabs, as shown in the following example.
105
+
To allow the `<Tabs>` component to manage setting the active tab and displaying correct content itself, use uncontrolled tabs, as shown in the following example.
106
106
107
107
108
108
```ts file="./TabsUncontrolled.tsx"
@@ -124,7 +124,7 @@ To adjust the left padding of tabs, use the `usePageInsets` property. This prope
124
124
125
125
### With icons and text
126
126
127
-
You can render different content in the `title` property of a tab to add icons and text.
127
+
You can render different content in the `title` property of a tab to add icons and text.
128
128
129
129
To add an icon to a tab, pass a `<TabTitleIcon>` component that contains the icon of your choice into the `title`. To use an icon alongside styled text, keep the text in the `<TabTitleText>` component.
130
130
@@ -133,53 +133,53 @@ To add an icon to a tab, pass a `<TabTitleIcon>` component that contains the ico
133
133
134
134
### Subtabs
135
135
136
-
Use subtabs within other components, like modals. Subtabs have less visually prominent styling.
136
+
Use subtabs within other components, like modals. Subtabs have less visually prominent styling.
137
137
138
-
To apply subtab styling to tabs, use the `isSubtab` property.
138
+
To apply subtab styling to tabs, use the `isSubtab` property.
139
139
140
140
```ts file="./TabsSubtabs.tsx"
141
141
```
142
142
143
143
### Filled tabs with icons
144
144
145
-
To allow tabs to fill the available width of the page section, use the `isFilled` property.
145
+
To allow tabs to fill the available width of the page section, use the `isFilled` property.
146
146
147
147
```ts file="./TabsFilledWithIcons.tsx"
148
148
```
149
149
150
150
### Tabs linked to nav elements
151
151
152
-
To let tabs link to nav elements, pass `{TabsComponent.nav}` into the `component` property.
152
+
To let tabs link to nav elements, pass `{TabsComponent.nav}` into the `component` property.
153
153
154
-
Nav tabs should use the `href` property to link the tab to the URL of another page or page section. A tab with an `href` will render as an `<a>` instead of a `<button>`.
154
+
Nav tabs should use the `href` property to link the tab to the URL of another page or page section. A tab with an `href` will render as an `<a>` instead of a `<button>`.
155
155
156
156
```ts file="./TabsNav.tsx"
157
157
```
158
158
159
159
### Subtabs linked to nav elements
160
160
161
-
Subtabs can also link to nav elements.
161
+
Subtabs can also link to nav elements.
162
162
163
163
```ts file="./TabsNavSubtab.tsx"
164
164
```
165
165
166
166
### With separate content
167
167
168
-
If a `<TabContent>` component is defined outside of a `<Tabs>` component, use the `tabContentRef` and `tabContentId` properties
168
+
If a `<TabContent>` component is defined outside of a `<Tabs>` component, use the `tabContentRef` and `tabContentId` properties
169
169
170
170
```ts file="./TabsSeparateContent.tsx"
171
171
```
172
172
173
173
### With tab content with body and padding
174
174
175
-
To add a content body to a `<TabContent>` component, pass a `<TabContentBody>`. To add padding to the body section, use the `hasPadding` property.
175
+
To add a content body to a `<TabContent>` component, pass a `<TabContentBody>`. To add padding to the body section, use the `hasPadding` property.
176
176
177
177
```ts file="./TabsContentWithBodyPadding.tsx"
178
178
```
179
179
180
180
### Children mounting on click
181
181
182
-
To mount tab children (add to the DOM) when a tab is clicked, use the `mountOnEnter` property.
182
+
To mount tab children (add to the DOM) when a tab is clicked, use the `mountOnEnter` property.
183
183
184
184
Note that this property does not create the tab children until the tab is clicked, so they are not preloaded into the DOM.
185
185
@@ -197,30 +197,30 @@ To unmount tab children (remove from the DOM) when they are no longer visible, u
197
197
198
198
You may control tabs from outside of the tabs component. For example, select the "Hide tab 2" button below to make "Tab item 2" invisible.
199
199
200
-
The tab its content should only be mounted when the tab is visible.
200
+
The tab its content should only be mounted when the tab is visible.
201
201
202
202
```ts file="./TabsToggledSeparateContent.tsx"
203
203
```
204
204
205
205
### Dynamic tabs
206
206
207
-
To enable closeable tabs, pass the `onClose` property to the `<Tabs>` component. To enable a button that adds new tabs, pass the `onAdd` property to `<Tabs>`.
207
+
To enable closeable tabs, pass the `onClose` property to the `<Tabs>` component. To enable a button that adds new tabs, pass the `onAdd` property to `<Tabs>`.
208
208
209
209
```ts file="./TabsDynamic.tsx"
210
210
```
211
211
212
212
### With help action popover
213
213
214
-
You may add a help action to a tab to provide users with additional context in a popover.
214
+
You may add a help action to a tab to provide users with additional context in a popover.
215
215
216
-
To render an action beside the tab content, use the `actions` property of a `<Tab>`. Pass a popover and a `<TabsAction>` component into the `actions` property.
216
+
To render an action beside the tab content, use the `actions` property of a `<Tab>`. Pass a popover and a `<TabsAction>` component into the `actions` property.
217
217
218
218
```ts file="./TabsHelp.tsx"
219
219
```
220
220
221
221
### With help and close actions
222
222
223
-
To add multiple actions to a tab, create a `<TabAction>` component for each action.
223
+
To add multiple actions to a tab, create a `<TabAction>` component for each action.
224
224
225
225
The following example passes in both help popover and close actions.
0 commit comments