Verwende Tabs, um ...
Inhalte innerhalb derselben Seite umzuschalten, ohne zu navigieren.
Tabs
Tabs strukturieren verwandte Inhalte in schnell erreichbaren Ansichten.App Content
Container Content
import { Tab, Tabs, TabTitle, } from "@mittwald/flow-react-components"; <Tabs> <Tab> <TabTitle>Mit App verbinden</TabTitle> App Content </Tab> <Tab> <TabTitle>Mit Container verbinden</TabTitle> Container Content </Tab> </Tabs>
Best Practices
- Gruppiere in einem Tab thematisch verwandten Content.
- Ordne die Tabs nach Wichtigkeit oder Häufigkeit der Nutzung.
- Mach jeden Tab eigenständig verständlich und beschrifte ihn kurz und deutlich.
- Setze Tabs nicht zur Navigation ein. Sie schalten Inhalte innerhalb derselben Seite um, ohne zu einer anderen Seite oder URL zu navigieren.
Tabs vs. TabNavigation
Flow bietet mit Tabs und der TabNavigation zwei ähnlich aussehende Components, die sich in der Verwendung klar unterscheiden.
Verwende eine TabNavigation, um ...
zwischen gleichrangigen Unterseiten zu navigieren.
Eingeklappte Ansicht
Wenn die verfügbare Breite nicht ausreicht, wechseln die Tabs automatisch in eine eingeklappte Ansicht.
SSH-Benutzer
App Content
Container Content
Mit Status-Icon
Enthält der Inhalt eines Tabs eine wichtige Information oder Warnung (z. B. in Form eines Alerts), muss der entsprechende Tab ein Status-Icon erhalten, um die Aufmerksamkeit darauf zu lenken.
App Content
Container Content
Mit vorausgewähltem Tab
Standardmäßig ist der erste Tab vorausgewählt. Soll ein anderer Tab initial
aktiv sein, legst du das über defaultSelectedKey fest.
App Content
Container Content
Reihenfolge der Tabs
Werden innerhalb eines Tabs Inhalte nachgeladen, kann sich durch das Rerendering
die Reihenfolge der Tabs ändern. Um das zu verhindern, lagere den Tab-Inhalt in
eine eigene Component aus und umschließe sie mit einem Suspense.
Properties
| Property | Type | Description |
|---|---|---|
tabNotFoundView | ReactNode | The view rendered when the selected tab does not exist. Defaults to a built-in IllustratedMessage. |
id | string | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
translate | yes | no | |
className | ClassNameOrFunction<TabsRenderProps>default: 'react-aria-Tabs' | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. |
style | StyleOrFunction<TooltipRenderProps> | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state. |
render | DOMRenderFunction<"div", TooltipRenderProps> | Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components. Requirements: - You must render the expected element type (e.g. if `<button>` is expected, you cannot render an `<a>`). - Only a single root DOM element can be rendered (no fragments). - You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate. |
dir | string | |
lang | string | |
hidden | boolean | |
inert | boolean | |
isDisabled | boolean | Whether the TabList is disabled. Shows that a selection exists, but is not available in that circumstance. |
slot | string | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |
selectedKey | Key | The currently selected key in the collection (controlled). |
defaultSelectedKey | Key | The initial selected keys in the collection (uncontrolled). |
keyboardActivation | manual | automatic (default) | Whether tabs are activated automatically on focus or manually. |
orientation | Orientationdefault: 'horizontal' | The orientation of the tabs. |
disabledKeys | Iterable<Key> | The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. |
children | ReactNode | |
wrapWith | ReactElement<unknown, string | JSXElementConstructor<any>> | A React element the component is wrapped with. The element is cloned and receives the component as its only child — useful to render the component inside a link, a tooltip trigger or any other wrapper without changing the surrounding markup. |
ref | Ref<HTMLSpanElement> | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see React Docs |
key | Key |
Events
| Property | Type | Description |
|---|---|---|
onClick | MouseEventHandler<HTMLDivElement> | |
onClickCapture | MouseEventHandler<HTMLDivElement> | |
onAuxClick | MouseEventHandler<HTMLDivElement> | |
onAuxClickCapture | MouseEventHandler<HTMLDivElement> | |
onContextMenu | MouseEventHandler<HTMLDivElement> | |
onContextMenuCapture | MouseEventHandler<HTMLDivElement> | |
onDoubleClick | MouseEventHandler<HTMLDivElement> | |
onDoubleClickCapture | MouseEventHandler<HTMLDivElement> | |
onMouseDown | MouseEventHandler<HTMLDivElement> | |
onMouseDownCapture | MouseEventHandler<HTMLDivElement> | |
onMouseEnter | MouseEventHandler<HTMLDivElement> | |
onMouseLeave | MouseEventHandler<HTMLDivElement> | |
onMouseMove | MouseEventHandler<HTMLDivElement> | |
onMouseMoveCapture | MouseEventHandler<HTMLDivElement> | |
onMouseOut | MouseEventHandler<HTMLDivElement> | |
onMouseOutCapture | MouseEventHandler<HTMLDivElement> | |
onMouseOver | MouseEventHandler<HTMLDivElement> | |
onMouseOverCapture | MouseEventHandler<HTMLDivElement> | |
onMouseUp | MouseEventHandler<HTMLDivElement> | |
onMouseUpCapture | MouseEventHandler<HTMLDivElement> | |
onTouchCancel | TouchEventHandler<HTMLDivElement> | |
onTouchCancelCapture | TouchEventHandler<HTMLDivElement> | |
onTouchEnd | TouchEventHandler<HTMLDivElement> | |
onTouchEndCapture | TouchEventHandler<HTMLDivElement> | |
onTouchMove | TouchEventHandler<HTMLDivElement> | |
onTouchMoveCapture | TouchEventHandler<HTMLDivElement> | |
onTouchStart | TouchEventHandler<HTMLDivElement> | |
onTouchStartCapture | TouchEventHandler<HTMLDivElement> | |
onPointerDown | PointerEventHandler<HTMLDivElement> | |
onPointerDownCapture | PointerEventHandler<HTMLDivElement> | |
onPointerMove | PointerEventHandler<HTMLDivElement> | |
onPointerMoveCapture | PointerEventHandler<HTMLDivElement> | |
onPointerUp | PointerEventHandler<HTMLDivElement> | |
onPointerUpCapture | PointerEventHandler<HTMLDivElement> | |
onPointerCancel | PointerEventHandler<HTMLDivElement> | |
onPointerCancelCapture | PointerEventHandler<HTMLDivElement> | |
onPointerEnter | PointerEventHandler<HTMLDivElement> | |
onPointerLeave | PointerEventHandler<HTMLDivElement> | |
onPointerOver | PointerEventHandler<HTMLDivElement> | |
onPointerOverCapture | PointerEventHandler<HTMLDivElement> | |
onPointerOut | PointerEventHandler<HTMLDivElement> | |
onPointerOutCapture | PointerEventHandler<HTMLDivElement> | |
onGotPointerCapture | PointerEventHandler<HTMLDivElement> | |
onGotPointerCaptureCapture | PointerEventHandler<HTMLDivElement> | |
onLostPointerCapture | PointerEventHandler<HTMLDivElement> | |
onLostPointerCaptureCapture | PointerEventHandler<HTMLDivElement> | |
onScroll | UIEventHandler<HTMLDivElement> | |
onScrollCapture | UIEventHandler<HTMLDivElement> | |
onWheel | WheelEventHandler<HTMLDivElement> | |
onWheelCapture | WheelEventHandler<HTMLDivElement> | |
onAnimationStart | AnimationEventHandler<HTMLDivElement> | |
onAnimationStartCapture | AnimationEventHandler<HTMLDivElement> | |
onAnimationEnd | AnimationEventHandler<HTMLDivElement> | |
onAnimationEndCapture | AnimationEventHandler<HTMLDivElement> | |
onAnimationIteration | AnimationEventHandler<HTMLDivElement> | |
onAnimationIterationCapture | AnimationEventHandler<HTMLDivElement> | |
onTransitionCancel | TransitionEventHandler<HTMLDivElement> | |
onTransitionCancelCapture | TransitionEventHandler<HTMLDivElement> | |
onTransitionEnd | TransitionEventHandler<HTMLDivElement> | |
onTransitionEndCapture | TransitionEventHandler<HTMLDivElement> | |
onTransitionRun | TransitionEventHandler<HTMLDivElement> | |
onTransitionRunCapture | TransitionEventHandler<HTMLDivElement> | |
onTransitionStart | TransitionEventHandler<HTMLDivElement> | |
onTransitionStartCapture | TransitionEventHandler<HTMLDivElement> | |
onSelectionChange | ((key: Key) => void) | Handler that is called when the selection changes. |
Accessibility
| Property | Type | Description |
|---|---|---|
aria-label | string | Defines a string value that labels the current element. |
aria-labelledby | string | Identifies the element (or elements) that labels the current element. |
aria-describedby | string | Identifies the element (or elements) that describes the object. |
aria-details | string | Identifies the element (or elements) that provide a detailed, extended description for the object. |