Embeds

This theme ships some embeds that hide the complexity of rendering the same elements over and over again with the correct HTML.

Modal

Modal has been implemented to simplify the use of the Tabler Modal component

Parameters

modal embed, can be used with 1 parameter:

Parameter	Description	Type	Default
id	Id of the container	`string`	`modal-` + random numbers
status	Adds a colored status border, allowed values are the default color classes: `info`, `success`, `warning`, `danger`	`string`	not used
close	Whether a `X` close button should be added in the upper corner	`bool`	`true`
header	Whether the modal header should be shown	`bool`	`true`

Content

modal embed, has 2 common blocks:

Block	Description
modal_id	Will be used if `id` parameter is not found (deprecated!)
modal_title	Title in the modal header
modal_body	Content of the modal
modal_footer	Footer section is normally used for buttons
modal_size	Modal size, by default `modal-lg`

See twig file for more blocks, which allow customization of HTML tags, CSS classes and more.

Usage

{% embed '[@Tabler](https://github.com/Tabler)/embeds/modal.html.twig' with {id: 'no-close', close: false} %}
    {% block modal_title 'A modal example' %}
    {% block modal_size 'modal_sm' %}
    {% block modal_body %}Foo Bar{% endblock %}
{% endembed %}

{% embed '[@Tabler](https://github.com/Tabler)/embeds/modal.html.twig' with {id: 'status', status: 'success', header: false} %}
    {% block modal_size 'modal_sm' %}
    {% block modal_body %}
        <div class="text-center">
            <i class="fas fa-check fa-3x mb-3 text-success"></i>
            <h2>Changes saved!</h2>
        </div>
    {% endblock %}
{% endembed %}

Next steps

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

Tabler Bundle Laravel Package