Switchable View

Renders a bar with left and right section, and a Mantine SegmentedControl component to the right of the bar with data views below.
Optionally controlled or uncontrolled.

• Import

  import { SwitchableView } from '@smile/haring-react';
• Extends Paper
• Source View Source Code
• Package @smile/haring-react
• Storybook Storybook

Storybook Docs

Props

Name	Type	Default	Description
views *	IDataView[]	[]	Array of all data views
value	number	-	Index of the active view, when component is controlled
defaultValue	number	-	Default index of the active view
topBarLeft	ReactNode	-	ReactNode for the left section of the top bar
topBarRight	ReactNode	-	ReactNode for the right section of the top bar, to the left of the SegmentedControl buttons
topContent	ReactNode	-	ReactNode for the content below the top bar
onChange	(index: number) => void	-	Called when active view changes
segmentedControlProps	Omit<SegmentedControlProps, 'data' | 'defaultValue' | 'onChange' | 'value'>	-	Props of SegmentedControl, or function returning props, except 'data', 'defaultValue', 'onChange' and 'value' which are handled by this component
...	-	-	extends Paper props

IDataView

Attribute	Type	Description
dataView	ReactNode	Content displayed for the view