Tabs

Tabs is a user interface component that allows you to create content-switching tabs. Tabs comprise the following child components:

Example

Below is an example of how to use the Tabs components:

<Widget
	src='flashui.near/widget/Tabs'
	props={{
		children: (
			<>
				<Widget
					src='flashui.near/widget/TabList'
					props={{
						data: [
							{
								targetPanel: 'tab1',
								text: 'Tab 1',
								active: true,
							},
							{
								targetPanel: 'tab2',
								text: 'Tab 2',
							},
						],
					}}
				/>
				<Widget
					src='flashui.near/widget/TabPanels'
					props={{
						children: (
							<>
								<Widget
									src='flashui.near/widget/TabPanel'
									props={{
										panelId: 'tab1',
										active: true,
										children: <>Content Tab 1</>,
									}}
								/>
								<Widget
									src='flashui.near/widget/TabPanel'
									props={{
										panelId: 'tab2',
										children: <>Content Tab 2</>,
									}}
								/>
							</>
						),
					}}
				/>
			</>
		),
	}}
/>

Component Structure

Tabs consist of the following components:

TabList

TabList is a list of tabs. It uses TabListItem to list the tabs along with attributes such as targetPanel, text, and active.

Props

• data (Array, optional): An array containing TabListItem entries.
• children (ReactNode, optional): React children elements inside the tab list.

TabListItem

TabListItem represents a specific tab in the list. It has the following attributes:

Props

• targetPanel (string, optional): The ID of the TabPanel that this tab targets for display.
• text (string, optional): The text displayed in the tab.
• active (boolean, optional): The initial state of the tab (default is false).

TabPanels

TabPanels is where the content of each tab is displayed. It includes TabPanel and is controlled by the tabs in TabList.

Props

• children (ReactNode, optional): React children elements inside TabPanels.

TabPanel

TabPanel is the content displayed corresponding to the selected tab. It has the following attributes:

Props

• panelId (string, optional): The ID of the TabPanel.
• active (boolean, optional): The display state of the panel (default is false).