package.docs.components.TabContent.examples.TabContent.md Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of patternfly Show documentation

Assets, source, tooling, and content for PatternFly 4

The newest version!

---
id: Tab content
section: components
cssPrefix: pf-v6-c-tab-content
---## Examples

### Basic

```html

  Panel 1


  Panel 2


  Panel 3


  Panel 4


```

### Padding

```html

  Panel 1


  Panel 2


  Panel 3


  Panel 4


```

### Secondary

```html

  Panel 1


  Panel 2


  Panel 3


  Panel 4


```

## Documentation

### Overview

Tab content should be used with the [tabs component](/components/tabs).

### Accessibility

| Attribute | Applied to | Outcome |
| -- | -- | -- |
| `role="tabpanel"` | `.pf-v6-c-tab-content` | Indicates that the element serves as a container for a set of tabs. **Required** |
| `aria-labelledby=[ID of tab element]` | `.pf-v6-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-v6-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-v6-c-tab-content` | Indicates that the tab panel is not visible. **Required on all but the active tab panel**
| `tabindex="0"` | `.pf-v6-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-v6-c-tab-content` | `` |  Initiates the tab content component. **Required** |
| `.pf-v6-c-tab-content__body` | `` |  Initiates the tab content body component. |
| `.pf-m-padding` | `.pf-v6-c-tab-content__body` | Modifies the tab content body component padding. |
| `.pf-m-secondary` | `.pf-v6-c-tab-content` |  Modifies the tab content component for secondary styles. |