βTabsβ Component
Design: zeplin.
Tabs are used to navigate between subpages of a page or views of the same category of content. Tab labels should be as short and clear as possible.
For Same Page Links (anchors)
Usage
@component('components.tabs.tabsSamePageLinks', ['links' => [
['url' => '#tabComponent-1', 'title' => 'Share the Knowledge Tour', 'isActive' => true],
['url' => '#tabComponent-2', 'title' => 'The People Behind'],
['url' => '#tabComponent-3', 'title' => 'Mission Statement'],
]])
@component('components.tabs.tabsContentItem', ['id' => 'tabComponent-1', 'isActive' => true]) content 1 @endcomponent
@component('components.tabs.tabsContentItem', ['id' => 'tabComponent-2', 'isActive' => false]) content 2 @endcomponent
@component('components.tabs.tabsContentItem', ['id' => 'tabComponent-3', 'isActive' => false]) content 3 @endcomponent
@endcomponent
tabsSamePageLinks Props
-
links (required)array{url: string, title: string}
Array with url and title properties.
-
isPageStickybool
TRUE if should be sticky.
tabsContentItem Props
-
id (required)string
Unique id for tab.
-
isActive (required)bool
Selects the currently active tab.
For Other Page Links
Usage
@include('components.tabs.tabsOtherPageLinks', [
'ariaLabel' => 'Related pages',
'links' => [
['url' => '#tabs', 'title' => 'Tabs component', 'isActive' => true],
['url' => route_relative('uiKit.categories.index'), 'title' => 'UI Kit: Home'],
['url' => route_relative('uiKit.categories.show', 'css'), 'title' => 'UI Kit: CSS'],
]])
Props
-
links (required)array<int, array{url: string, title: string}>
An array of arrays with with url and title keys.
-
ariaLabel (required)bool
ARIA-Label for the component.
-
isPageStickybool
TRUE if should be sticky.