twig_widgets.md

Twig widgets

In order to simplify the usage of widget and info boxes, and to help with a consitent look and feel throughout your application, the bundle provides an embeddable template for the box-widget and the infobox-widget.

Global configuration

The global/general configuration for the box-widget can be defined using the bundle configuration. The values in this configuration example are the default settings.

admin_lte:
    theme:
        widget:
            # relates to box-<type>, default: primary
            type: primary 
            # will add .with-border to .box-header, default: true
            bordered: true
            # will add a collapse button to the widget toolbar, default: true
            collapsible: true
            # sets the title attribute for the collapse button
            collapsible_title: Collapse
            # will ad a remove button to the widget toolbar
            removable: false
            # defines the title attribute for the remove button
            removable_title: Remove
            # will add .box-solid 
            solid: false
            # will avoid rendering the .box-footer without content
            use_footer: true

box-widget.html.twig

{% embed '@AdminLTE/Widgets/box-widget.html.twig' %}
    {% block box_title %}
        {# Title goes here #}
    {% endblock %}
    {% block box_body %}
        {# Content goes here #}
    {% endblock %}
{% endembed %}

The box widget comes with several variables and blocks to define content and customize the rendering and behavior individually.

Variables

Notice: since FALSE will not be considered a value by Twig and therefor activate the default filter, you will have to use 0 instead

collapsed

Will render the Widget in a collapsed state and add and expander toolbutton.

solid

Will render the widget as solid box if set to true.

border

Will add .with-border to the box header.

use_footer

Will render the .box-footer even if it has no content.

collapsible & collapsible_title

Will add a collapse toolbutton. This setting will alwas be true if the box is defined as `collapsed`. The `collapsible_title` will be set as the button's `title` attribute.

removable & removable_title

Will add a remove toolbutton. The `removable_title` will be set as the button's `title` attribute.

boxtype

Sets the color-type of the box. The value should only be the type name without prefix.

Blocks

box_before

Content just before the box's openig div.

box_title

Content inside of `.box-title`.

box_tools

Content inside the `.box-tools` just before the collapse and/or remove buttons.

box_body

The block for the actual box content.

box_footer

Content inside the `.box-footer`. Using this block will force the footer rendering, regardless of the `footer` variable or configuration setting.

box_after

Content just after the box's closing `div`

box_body_class

Addiotional css class for the box_body HTML element

box_attributes

Additional HTML attributes for the outer box HTML element

box_tools_attributes

Additional attributes for the tools HTML element

infobox-widget

The infobox widget has no default configuration. The very nature of this widget type is to be distinguishable from each other hence, the configuration would be overridden anyways.

{% embed '@AdminLTE/Widgets/infobox-widget.html.twig'  with {
    'color' : 'aqua',
    'icon'  : 'comments-o',
    }%}
    {% block box_text %}
        {# text goes here #}
    {% endblock %}
    {% block box_number %}
        {# number goes here #}
    {% endblock %}
    {% block progress_description %}
        {# progress text goes here#}
    {% endblock %}
{% endembed %}

Variables

solid

If you want to define a solid box, this variable should contain the color name.

color

Defines the `.info-box-icon` color and should be the color name (obsolete if you have a `solid` box).

icon

Defines the fontawesome icon name. The value should only be the actual icon name including the prefix (e.g. `fas fa-tachometer-alt`)

progress

Defines the progress value. The progress bar will only be rendered if the progress variable is defined.

Blocks

box_before

Content just before the opening `div`.

box_text

Content of `.info-box-text`.

box_number

Content of `.info-box-number`.

progress_description

Content of `.progress_description`.

box_after

Content just after the closing `div`

Next steps

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