IxDF Design System

“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)

🚲 Aliquam dolores earum, est impedit in laboriosam magni minus natus, necessitatibus officiis optio porro possimus quam rem reprehenderit sed ullam unde vel?

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.

  • isPageWidth
    bool

    TRUE if should span whole page.

  • isPageSticky
    bool

    TRUE if should be sticky.

tabsContentItem Props

  • id (required)
    string

    Unique id for tab.

  • isActive (required)
    bool

    Selects the currently active tab.

Usage

@include('components.tabs.tabsOtherPageLinks', [
    'ariaLabel' => 'Related pages',
    'links' => [
        ['url' => '#', 'title' => 'Tabs component', 'isActive' => true],
        ['url' => route('design-system.categories.index'), 'title' => 'Design System: Home'],
        ['url' => route('design-system.categories.show', 'css'), 'title' => 'Design System: 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.

  • isPageWidth
    bool

    TRUE if should span whole page.

  • isPageSticky
    bool

    TRUE if should be sticky.