‍

Components

Integrations

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 Tabs, um ...

Inhalte innerhalb derselben Seite umzuschalten, ohne zu navigieren.

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

PropertyTypeDescription
children
ReactNode
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.
defaultSelectedKey
Key
The initial selected keys in the collection (uncontrolled).
dir
string
disabledKeys
Iterable<Key>
The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.
hidden
boolean
id
string
The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
inert
boolean
isDisabled
boolean
Whether the TabList is disabled. Shows that a selection exists, but is not available in that circumstance.
keyboardActivation
manual | automatic (default)
Whether tabs are activated automatically on focus or manually.
lang
string
orientation
horizontal (default) | vertical
The orientation of the tabs.
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.
selectedKey
Key
The currently selected key in the collection (controlled).
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.
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.
tabNotFoundView
ReactNode
The view rendered when the selected tab does not exist. Defaults to a built-in IllustratedMessage.
translate
yes | no
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.

Events

PropertyTypeDescription
onClick
MouseEventHandler<HTMLDivElement>
onSelectionChange
((key: Key) => void)
Handler that is called when the selection changes.

Accessibility

PropertyTypeDescription
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.
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.

Auf dieser Seite