Components

This theme ships some components (as twig macros) that hide the complexity of rendering the same elements over and over again with the correct HTML.

See Tabler documentation at https://preview.tabler.io/accordion.html

Accordion

Parameters

accordion() macro, waits for 2 parameters:

Parameter	Description	Type	Default
items	Array of Item	`array`	`[]`
options	Options object	`object`	`{}`

Item

Parameter	Description	Type	Default
title	Title of the item	`string`	empty string
body	Content of the item, can be `HTML` with `raw` option	`string`	empty string
options	Customize the Item Options	`object`	`{}`

Item Options

Parameter	Description	Type	Default
open	Item should be opened by default	`boolean`	`false`
titleExtraClass	Add extra class to the title	`string`	empty string
bodyExtraClass	Add extra class to the body	`string`	empty string
attr	Add extra attributes	`object`	`{}`

Options

Parameter	Description	Type	Default
id	Set custom `id` to accordion	`string`	`tabler_unique_id('accordion_')`
raw	Use raw output for `title` and `body`	`boolean`	`true`
flush	Remove certains styles (see Boostrap docs)	`boolean`	`false`
alwaysOpen	Holds the accordion elements open (see Bootstrap Doc)	`boolean`	`false`
extraClass	Add extra classes on accordion container	`string`	empty string
attr	Add extra attributes on accordion container	`object`	`{}`

Usage

{% from '[@Tabler](https://github.com/Tabler)/components/accordion.html.twig' import accordion %}

{% set items = [
    {
      'title': 'Title 1',
      'body': 'Body 1',
    },
    {
      'title': 'Title 2',
      'body': 'Body 2',
      'options':
      {
        'open' : true,
        'titleExtraClass': 'bg-success text-white',
        'bodyExtraClass': 'bg-danger pt-3',
      },
    },
    {
      'title': 'Title 3',
      'body': 'Body 3',
      'options':
      {
        'extraClass': 'bg-danger-lt',
        'attr': {
         'data-sub-id': 1,
        },
      }
    },
    {
      'title': '<div>Title 4 <strong>with HTML</strong></div>',
      'body': '<div>Body 4 <strong>with HTML</strong></div',
    },
] %}

{% set options = {
    'id': 'example-accordion',
    'raw': true,
    'alwaysOpen': false,
    'extraClass': 'mb-0',
    'attr': {
     'data-id': 1,
    },
} %}

{{ accordion(items, options) }}

Next steps

Please go back to the Tabler bundle documentation to find out more about using the theme.

Tabler Bundle Laravel Package