You're viewing pre-release documentation — version 4.x is in beta
Features, APIs and behaviour may change before the stable release. View the stable version (3.x)
Tab Row
Overview#
A horizontal tab strip with an underline indicator on the selected tab. Scrollable when tabs overflow. The row owns the selected-index state.
Distinct from <native:bottom-nav> — bottom nav is your app's primary navigation chrome with full
URL routing, while <native:tab-row> is an in-screen sectioning control whose tabs swap content within the same
screen.
Per Model 3, the active tab uses theme.primary and the underline is theme.primary. Inactive tabs use
theme.onSurfaceVariant.
<native:tab-row native:model="activeTab"> <native:tab label="Recent" icon="history" /> <native:tab label="Starred" icon="star" /> <native:tab label="Archived" icon="archive" /></native:tab-row>Props (Row)#
value/selected-index- Currently selected tab index (optional, int, default:0)a11y-label- Accessibility label (optional)
Events#
@change- Livewire method called when the selection changes. Receives the new index as a parameter
Two-way Binding#
native:model binds the selected index to a Livewire integer property:
<native:tab-row native:model="activeTab"> <native:tab label="One" /> <native:tab label="Two" /> <native:tab label="Three" /></native:tab-row>Children#
<native:tab> declares a single tab. Each accepts:
label- Tab label (required, string). Can also be passed as the first argument tomake()icon- Optional icon name rendered above the labela11y-label- Accessibility label override (optional)
Examples#
Section switcher#
<native:column fill> <native:tab-row native:model="section"> <native:tab label="Overview" /> <native:tab label="Activity" /> <native:tab label="Members" /> </native:tab-row> @if($section === 0) <native:column fill :padding="16"> <native:text>Overview content</native:text> </native:column> @elseif($section === 1) <native:column fill :padding="16"> <native:text>Activity content</native:text> </native:column> @else <native:column fill :padding="16"> <native:text>Members content</native:text> </native:column> @endif</native:column>Tabs with icons#
<native:tab-row native:model="filter"> <native:tab label="All" icon="list" /> <native:tab label="Starred" icon="star" /> <native:tab label="Archived" icon="archive" /></native:tab-row>Element#
use Nativephp\NativeUi\Elements\TabRow;use Nativephp\NativeUi\Elements\Tab; TabRow::make( Tab::make('Recent')->icon('history'), Tab::make('Starred')->icon('star'), Tab::make('Archived')->icon('archive'),) ->selectedIndex($activeTab) ->onChange('setActiveTab');TabRow methods#
make(Element ...$children)- Create a row with tab childrenselectedIndex(int $index)- Currently selected indexa11yLabel(string $value)- Accessibility labelsyncMode(string $mode)- Set bynative:modelmodifiersonChange(string $method)- Livewire method invoked on change
Tab methods#
make(string $label = '')- Create a tab with a labelicon(string $icon)- Tab icon
in no time
