@patternfly/patternfly-doc-core 1.15.3 → 1.15.5

package/dist/docs/api/v6/components/tabs/html

@@ -0,0 +1,633 @@
+# Examples
+
+## Default
+
+### Default tabs example
+
+
+import Example1 from './Example1.html?raw'
+
+<LiveExample html={Example1} />
+
+### Default tabs usage
+
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-m-disabled` | `a.pf-v6-c-tabs__link` | Modifies a tabs link for disabled styles. |
+| `.pf-m-aria-disabled` | `.pf-v6-c-tabs__link` | Modifies a tabs link for disabled styles, but is still hoverable/focusable. |
+
+## Overflow
+
+### Overflow beginning of list example
+
+
+import Example2 from './Example2.html?raw'
+
+<LiveExample html={Example2} />
+
+### Overflow beginning of list usage
+
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-m-scrollable` | `.pf-v6-c-tabs` | Enables the directional scroll buttons. |
+| `.pf-v6-c-tabs__scroll-button` | `<div>` | Initiates a tabs component scroll button container. |
+
+### Horizontal overflow example
+
+
+import Example3 from './Example3.html?raw'
+
+<LiveExample html={Example3} />
+
+### Horizontal overflow expanded example
+
+
+import Example4 from './Example4.html?raw'
+
+<LiveExample html={Example4} />
+
+### Horizontal overflow selected example
+
+
+import Example5 from './Example5.html?raw'
+
+<LiveExample html={Example5} />
+
+## Vertical
+
+### Vertical tabs example
+
+
+import Example6 from './Example6.html?raw'
+
+<LiveExample html={Example6} />
+
+### Vertical expandable example
+
+
+import Example7 from './Example7.html?raw'
+
+<LiveExample html={Example7} />
+
+### Vertical expanded example
+
+
+import Example8 from './Example8.html?raw'
+
+<LiveExample html={Example8} />
+
+### Vertical expandable responsive example
+
+
+import Example9 from './Example9.html?raw'
+
+<LiveExample html={Example9} />
+
+### Vertical expandable example (deprecated)
+
+```html isDeprecated
+<div
+  class="pf-v6-c-tabs pf-m-expandable pf-m-vertical"
+  role="region"
+  id="vertical-expandable-legacy"
+>
+  <div class="pf-v6-c-tabs__toggle">
+    <div class="pf-v6-c-tabs__toggle-button">
+      <button
+        class="pf-v6-c-button pf-m-plain"
+        type="button"
+        aria-label="Details"
+        aria-expanded="true"
+        id="vertical-expandable-legacy-toggle-button"
+        aria-labelledby="vertical-expandable-legacy-toggle-text vertical-expandable-legacy-toggle-button"
+      >
+        <span class="pf-v6-c-button__icon">
+          <span class="pf-v6-c-tabs__toggle-icon">
+            <i class="fas fa-angle-right" aria-hidden="true"></i>
+          </span>
+        </span>
+      </button>
+    </div>
+    <span
+      class="pf-v6-c-tabs__toggle-text"
+      id="vertical-expandable-legacy-toggle-text"
+    >Containers</span>
+  </div>
+
+  <ul class="pf-v6-c-tabs__list" role="tablist">
+    <li class="pf-v6-c-tabs__item" role="presentation">
+      <button
+        type="button"
+        class="pf-v6-c-tabs__link"
+        role="tab"
+        id="vertical-expandable-legacy-users-link"
+      >
+        <span class="pf-v6-c-tabs__item-text">Users</span>
+      </button>
+    </li>
+    <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
+      <button
+        type="button"
+        class="pf-v6-c-tabs__link"
+        role="tab"
+        id="vertical-expandable-legacy-containers-link"
+      >
+        <span class="pf-v6-c-tabs__item-text">Containers</span>
+      </button>
+    </li>
+    <li class="pf-v6-c-tabs__item" role="presentation">
+      <button
+        type="button"
+        class="pf-v6-c-tabs__link"
+        role="tab"
+        id="vertical-expandable-legacy-database-link"
+      >
+        <span class="pf-v6-c-tabs__item-text">Database</span>
+      </button>
+    </li>
+
+    <li class="pf-v6-c-tabs__item" role="presentation">
+      <button
+        type="button"
+        class="pf-v6-c-tabs__link"
+        role="tab"
+        id="vertical-expandable-legacy-server-link"
+      >
+        <span class="pf-v6-c-tabs__item-text">Server</span>
+      </button>
+    </li>
+    <li class="pf-v6-c-tabs__item" role="presentation">
+      <button
+        type="button"
+        class="pf-v6-c-tabs__link"
+        role="tab"
+        id="vertical-expandable-legacy-system-link"
+      >
+        <span class="pf-v6-c-tabs__item-text">System</span>
+      </button>
+    </li>
+    <li class="pf-v6-c-tabs__item" role="presentation">
+      <button
+        type="button"
+        class="pf-v6-c-tabs__link"
+        role="tab"
+        id="vertical-expandable-legacy-network-wired-link"
+      >
+        <span class="pf-v6-c-tabs__item-text">Network</span>
+      </button>
+    </li>
+  </ul>
+</div>
+
+```
+
+### Vertical expanded example (deprecated)
+
+```html isDeprecated
+<div
+  class="pf-v6-c-tabs pf-m-expandable pf-m-expanded pf-m-vertical"
+  role="region"
+  id="vertical-expanded-legacy"
+>
+  <div class="pf-v6-c-tabs__toggle">
+    <div class="pf-v6-c-tabs__toggle-button">
+      <button
+        class="pf-v6-c-button pf-m-plain"
+        type="button"
+        aria-expanded="true"
+        aria-label="Details"
+        id="vertical-expanded-legacy-toggle-button"
+        aria-labelledby="vertical-expanded-legacy-toggle-text vertical-expanded-legacy-toggle-button"
+      >
+        <span class="pf-v6-c-button__icon">
+          <span class="pf-v6-c-tabs__toggle-icon">
+            <i class="fas fa-angle-right" aria-hidden="true"></i>
+          </span>
+        </span>
+      </button>
+    </div>
+    <span
+      class="pf-v6-c-tabs__toggle-text"
+      id="vertical-expanded-legacy-toggle-text"
+    >Containers</span>
+  </div>
+
+  <ul class="pf-v6-c-tabs__list" role="tablist">
+    <li class="pf-v6-c-tabs__item" role="presentation">
+      <button
+        type="button"
+        class="pf-v6-c-tabs__link"
+        role="tab"
+        id="vertical-expanded-legacy-users-link"
+      >
+        <span class="pf-v6-c-tabs__item-text">Users</span>
+      </button>
+    </li>
+    <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
+      <button
+        type="button"
+        class="pf-v6-c-tabs__link"
+        role="tab"
+        id="vertical-expanded-legacy-containers-link"
+      >
+        <span class="pf-v6-c-tabs__item-text">Containers</span>
+      </button>
+    </li>
+    <li class="pf-v6-c-tabs__item" role="presentation">
+      <button
+        type="button"
+        class="pf-v6-c-tabs__link"
+        role="tab"
+        id="vertical-expanded-legacy-database-link"
+      >
+        <span class="pf-v6-c-tabs__item-text">Database</span>
+      </button>
+    </li>
+
+    <li class="pf-v6-c-tabs__item" role="presentation">
+      <button
+        type="button"
+        class="pf-v6-c-tabs__link"
+        role="tab"
+        id="vertical-expanded-legacy-server-link"
+      >
+        <span class="pf-v6-c-tabs__item-text">Server</span>
+      </button>
+    </li>
+    <li class="pf-v6-c-tabs__item" role="presentation">
+      <button
+        type="button"
+        class="pf-v6-c-tabs__link"
+        role="tab"
+        id="vertical-expanded-legacy-system-link"
+      >
+        <span class="pf-v6-c-tabs__item-text">System</span>
+      </button>
+    </li>
+    <li class="pf-v6-c-tabs__item" role="presentation">
+      <button
+        type="button"
+        class="pf-v6-c-tabs__link"
+        role="tab"
+        id="vertical-expanded-legacy-network-wired-link"
+      >
+        <span class="pf-v6-c-tabs__item-text">Network</span>
+      </button>
+    </li>
+  </ul>
+</div>
+
+```
+
+### Vertical expandable responsive example (deprecated)
+
+```html isDeprecated
+<div
+  class="pf-v6-c-tabs pf-m-expandable pf-m-vertical pf-m-non-expandable-on-md pf-m-expandable-on-lg pf-m-non-expandable-on-xl"
+  role="region"
+  id="vertical-expandable-responsive-legacy"
+>
+  <div class="pf-v6-c-tabs__toggle">
+    <div class="pf-v6-c-tabs__toggle-button">
+      <button
+        class="pf-v6-c-button pf-m-plain"
+        type="button"
+        aria-label="Details"
+        aria-expanded="true"
+        id="vertical-expandable-responsive-legacy-toggle-button"
+        aria-labelledby="vertical-expandable-responsive-legacy-toggle-text vertical-expandable-responsive-legacy-toggle-button"
+      >
+        <span class="pf-v6-c-button__icon">
+          <span class="pf-v6-c-tabs__toggle-icon">
+            <i class="fas fa-angle-right" aria-hidden="true"></i>
+          </span>
+        </span>
+      </button>
+    </div>
+    <span
+      class="pf-v6-c-tabs__toggle-text"
+      id="vertical-expandable-responsive-legacy-toggle-text"
+    >Containers</span>
+  </div>
+
+  <ul class="pf-v6-c-tabs__list" role="tablist">
+    <li class="pf-v6-c-tabs__item" role="presentation">
+      <button
+        type="button"
+        class="pf-v6-c-tabs__link"
+        role="tab"
+        id="vertical-expandable-responsive-legacy-users-link"
+      >
+        <span class="pf-v6-c-tabs__item-text">Users</span>
+      </button>
+    </li>
+    <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
+      <button
+        type="button"
+        class="pf-v6-c-tabs__link"
+        role="tab"
+        id="vertical-expandable-responsive-legacy-containers-link"
+      >
+        <span class="pf-v6-c-tabs__item-text">Containers</span>
+      </button>
+    </li>
+    <li class="pf-v6-c-tabs__item" role="presentation">
+      <button
+        type="button"
+        class="pf-v6-c-tabs__link"
+        role="tab"
+        id="vertical-expandable-responsive-legacy-database-link"
+      >
+        <span class="pf-v6-c-tabs__item-text">Database</span>
+      </button>
+    </li>
+
+    <li class="pf-v6-c-tabs__item" role="presentation">
+      <button
+        type="button"
+        class="pf-v6-c-tabs__link"
+        role="tab"
+        id="vertical-expandable-responsive-legacy-server-link"
+      >
+        <span class="pf-v6-c-tabs__item-text">Server</span>
+      </button>
+    </li>
+    <li class="pf-v6-c-tabs__item" role="presentation">
+      <button
+        type="button"
+        class="pf-v6-c-tabs__link"
+        role="tab"
+        id="vertical-expandable-responsive-legacy-system-link"
+      >
+        <span class="pf-v6-c-tabs__item-text">System</span>
+      </button>
+    </li>
+    <li class="pf-v6-c-tabs__item" role="presentation">
+      <button
+        type="button"
+        class="pf-v6-c-tabs__link"
+        role="tab"
+        id="vertical-expandable-responsive-legacy-network-wired-link"
+      >
+        <span class="pf-v6-c-tabs__item-text">Network</span>
+      </button>
+    </li>
+  </ul>
+</div>
+
+```
+
+## Box
+
+### Box tabs example
+
+
+import Example10 from './Example10.html?raw'
+
+<LiveExample html={Example10} />
+
+### Box overflow example
+
+
+import Example11 from './Example11.html?raw'
+
+<LiveExample html={Example11} />
+
+### Box vertical example
+
+
+import Example12 from './Example12.html?raw'
+
+<LiveExample html={Example12} />
+
+### Box tabs secondary variant example
+
+
+import Example13 from './Example13.html?raw'
+
+<LiveExample html={Example13} />
+
+## Tab insets
+
+### Default tab insets example
+
+
+import Example14 from './Example14.html?raw'
+
+<LiveExample html={Example14} />
+
+### Box tab insets example
+
+
+import Example15 from './Example15.html?raw'
+
+<LiveExample html={Example15} />
+
+### Page insets example
+
+
+import Example16 from './Example16.html?raw'
+
+<LiveExample html={Example16} />
+
+### Insets usage
+
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-m-inset-{none, sm, md, lg, xl, 2xl, 3xl}{-on-[sm, md, lg, xl, 2xl]}` | `.pf-v6-c-tabs` | Modifies the tabs component padding/inset to visually match padding of other adjacent components. |
+| `.pf-m-page-insets` | `.pf-v6-c-tabs` | Modifies the tabs component padding/inset to visually match padding of page elements. |
+
+## Icons
+
+### Icons and text example
+
+
+import Example17 from './Example17.html?raw'
+
+<LiveExample html={Example17} />
+
+## Sub tabs
+
+### Tabs with sub tabs example
+
+
+import Example18 from './Example18.html?raw'
+
+<LiveExample html={Example18} />
+
+### Box tabs with sub tabs example
+
+
+import Example19 from './Example19.html?raw'
+
+<LiveExample html={Example19} />
+
+## Filled
+
+### Filled tabs example
+
+
+import Example20 from './Example20.html?raw'
+
+<LiveExample html={Example20} />
+
+### Filled with icons example
+
+
+import Example21 from './Example21.html?raw'
+
+<LiveExample html={Example21} />
+
+### Filled box example
+
+
+import Example22 from './Example22.html?raw'
+
+<LiveExample html={Example22} />
+
+### Filled box with icons example
+
+
+import Example23 from './Example23.html?raw'
+
+<LiveExample html={Example23} />
+
+### Filled usage
+
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-m-fill`  | `.pf-v6-c-tabs` | Modifies the tabs to fill the available space. **Required** |
+
+## Tabs as navigation
+
+### Using the nav element example
+
+
+import Example24 from './Example24.html?raw'
+
+<LiveExample html={Example24} />
+
+### Sub tabs using the nav element example
+
+
+import Example25 from './Example25.html?raw'
+
+<LiveExample html={Example25} />
+
+## Tab item actions
+
+### Help button example
+
+
+import Example26 from './Example26.html?raw'
+
+<LiveExample html={Example26} />
+
+### Close button example
+
+
+import Example27 from './Example27.html?raw'
+
+<LiveExample html={Example27} />
+
+### Help and close button example
+
+
+import Example28 from './Example28.html?raw'
+
+<LiveExample html={Example28} />
+
+## Add tab button
+
+### Add tab button example
+
+
+import Example29 from './Example29.html?raw'
+
+<LiveExample html={Example29} />
+
+## Tab content
+
+### Default tab content example
+
+
+import Example30 from './Example30.html?raw'
+
+<LiveExample html={Example30} />
+
+### Padding
+
+
+import Example31 from './Example31.html?raw'
+
+<LiveExample html={Example31} />
+
+### Secondary
+
+
+import Example32 from './Example32.html?raw'
+
+<LiveExample html={Example32} />
+
+## Documentation
+
+### Tabs overview
+
+The tabs component should only be used to change content views within a page. The similar-looking but semantically different [horizontal nav component](/components/navigation/#horizontal) is available for general navigation use cases.
+
+Whenever a list of tabs is unique on the current page, it can be used in a `<nav>` element. Cases where the same set of tabs are duplicated in multiple regions on a page (e.g. cards on a dashboard) are less likely to benefit from using the `<nav>` element.
+
+### Usage
+
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-v6-c-tabs` | `<nav>`, `<div>` | Initiates the tabs component. **Required** |
+| `.pf-v6-c-tabs__list` | `<ul>` | Initiates a tabs component list. **Required** |
+| `.pf-v6-c-tabs__item` | `<li>` | Initiates a tabs component item. **Required** |
+| `.pf-v6-c-tabs__item-text` | `<span>` | Initiates a tabs component item icon. **Required** |
+| `.pf-v6-c-tabs__item-icon` | `<span>` | Initiates a tabs component item text. **Required** |
+| `.pf-v6-c-tabs__item-close` | `<span>` | Initiates a tabs component item close. |
+| `.pf-v6-c-tabs__item-close-icon` | `<span>` | Initiates a tabs component item close icon. |
+| `.pf-v6-c-tabs__link` | `<button>`, `<a>` | Initiates a tabs component link. **Required** |
+| `.pf-v6-c-tabs__scroll-button` | `<div>` | Initiates a tabs component scroll button container. |
+| `.pf-v6-c-tabs__add` | `<span>` | Initiates a tabs component add button. |
+| `.pf-v6-c-tabs__toggle` | `<div>` | Initiates a tabs expandable toggle. |
+| `.pf-v6-c-tabs__toggle-button` | `<button>` | Initiates a tabs expandable toggle button. |
+| `.pf-v6-c-tabs__toggle-icon` | `<span>` | Initiates a tabs expandable toggle icon. |
+| `.pf-v6-c-tabs__toggle-text` | `<span>` | Initiates a tabs expandable toggle text. |
+| `.pf-m-tubtab` | `.pf-v6-c-tabs` | Applies subtab styling to the tab component. |
+| `.pf-m-no-border-bottom` | `.pf-v6-c-tabs` | Removes bottom border from a tab component. |
+| `.pf-m-box` | `.pf-v6-c-tabs` | Applies box styling to the tab component. |
+| `.pf-m-vertical` | `.pf-v6-c-tabs` | Applies vertical styling to the tab component. |
+| `.pf-m-fill` | `.pf-v6-c-tabs` | Modifies the tabs to fill the available space. |
+| `.pf-m-current` | `.pf-v6-c-tabs__item` | Indicates that a tab item is currently selected. |
+| `.pf-m-action` | `.pf-v6-c-tabs__item` | Indicates that a tab item contains actions other than the tab link. |
+| `.pf-m-overflow` | `.pf-v6-c-tabs__item` | Applies overflow menu styling to a tab item. |
+| `.pf-m-expanded` | `.pf-v6-c-tabs__item` | Applies expanded styling to the overflow menu tab item. |
+| `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[md, lg, xl, 2xl]}` | `.pf-v6-c-tabs` | Modifies tabs horizontal padding at optional [breakpoint](/tokens/all-patternfly-tokens). |
+| `.pf-m-page-insets` | `.pf-v6-c-tabs` | Modifies the tabs component padding/inset to visually match padding of page elements. |
+| `.pf-m-secondary` | `.pf-v6-c-tabs.pf-m-box` | Modifies the tabs component tab background colors for the box variant. |
+| `.pf-m-expandable{-on-[breakpoint]}` | `.pf-v6-c-tabs` | Modifies the tabs component to be expandable via a toggle at optional [breakpoint](/tokens/all-patternfly-tokens). **Note:** works with vertical tabs only. |
+| `.pf-m-non-expandable{-on-[breakpoint]}` | `.pf-v6-c-tabs` | Modifies the tabs component to be non-expandable at optional [breakpoint](/tokens/all-patternfly-tokens). |
+| `.pf-m-expanded` | `.pf-v6-c-tabs` | Modifies the expandable tabs component for the expanded state. |
+| `.pf-m-disabled` | `a.pf-v6-c-tabs__link` | Modifies a tabs link for disabled styles. |
+| `.pf-m-aria-disabled` | `.pf-v6-c-tabs__link` | Modifies a tabs link for disabled styles, but is still hoverable/focusable. |
+
+### Tab content 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**
+
+### Tab content usage
+
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-v6-c-tab-content` | `<section>` |  Initiates the tab content component. **Required** |
+| `.pf-v6-c-tab-content__body` | `<div>` |  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. |