© 2021 Leviy

Tabs

Example

{% include '@leviy-templates/components/tabs.html.twig' with {
    'tabs': [
        {'label': 'Item 1', 'uri': '#item_1'},
        {'label': 'Item 2', 'uri': '#item_2', 'current': true},
        {'label': 'Item 3', 'uri': '#item_3'}
    ]
} %}

To make our live a little bit easier the tabs component is compatible with KnpMenuBundle:

{% include '@leviy-templates/components/tabs.html.twig' with {
    'tabs': knp_menu_get('tabs')
} %}

Tabs with floating action button

{% include '@leviy-templates/components/tabs.html.twig' with {
    'tabs': [
        {'label': 'Item 1', 'uri': '#item_1'},
        {'label': 'Item 2', 'uri': '#item_2', 'current': true},
        {'label': 'Item 3', 'uri': '#item_3'}
    ],
    'floatingActionButton': {
        'icon': 'add'
    }
} %}

Tabs without tabs 😜

{% include '@leviy-templates/components/tabs.html.twig' %}

Floating action button only

{% include '@leviy-templates/components/tabs.html.twig' with {
    'floatingActionButton': {
        'icon': 'add',
        'data': {
            'test-a': true,
            'test-b': false,
            'test-c': 1,
            'test-d': 0,
            'test-e': 'test',
        }
    }
} %}

Please note that you can optionally add a data property to add data-* attributes to the floating action button.

Inline tabs

{% include '@leviy-templates/components/tabs.html.twig' with {
    'tabs': [
        {'label': 'Item 1', 'uri': '#item_1'},
        {'label': 'Item 2', 'uri': '#item_2', 'current': true},
        {'label': 'Item 3', 'uri': '#item_3'}
    ],
    'inline': true
} %}