{% extends "MopaBootstrapSandboxBundle::layout.html.twig" %} {% from 'MopaBootstrapBundle::flash.html.twig' import flash, advanced_flash, session_flash %} {% from 'MopaBootstrapBundle::macros.html.twig' import badge, label %} {% block headline %}{% endblock headline %} {% block page_header %}

Components out of the box Reusable components built into Bootstrap

Providing several components known from bootstrap in a programatic way.

Make sure to have a look into the template! to understand!

{% block subnavbar %} {{ mopa_bootstrap_navbar('sandboxComponentsSubNavbar') }} {% endblock subnavbar %}
{% endblock page_header %} {% block flashes %} {% if app.session.flashbag.peekAll|length > 0 %}

Here you can see the session flashes

They are {{ label('ONLY', 'warning') }} available after a redirect!!!

Have a look into the Controller

{{ session_flash() }}
{% endif %} {% endblock flashes %} {% block body_tag %} {% endblock body_tag %} {% block content %}

Alerts aka Flashes:

Dont forget to import the macro into the current template: 

                {%- raw -%}
                {% from 'MopaBootstrapBundle::flash.html.twig' import flash, advanced_flash %}
                {%- endraw -%}

Simple Markup

To generate a flash message just use a flash macro: 

                {%- raw -%}
                {{ flash(type, message, close, use_raw) }}
                {%- endraw -%}
                
                {%- raw -%}
                {{ advanced_flash(type, heading, message, close_tag, use_raw) }}
                {%- endraw -%}

Type Options

To omit a special type (giving a yellow box) use false as type

To get a red box use 'error' as type

To get a green box use 'success' as type

To get a blue box use 'info' as type

Using html inside the message

To use html in the message as we do here set use_raw to true

Close Button

Bootstrap comes with a great jQuery plugin that supports alert messages, making dismissing them quick and easy.

To get the close button set the close argument true

Advanced heading

If you need more advanced flashed you can set a heading, or even omit it setting heading to false

Close Tag

The advanced flash macro has the possibility to set a close_tag it should be either 'button' or 'a

Simple alerts

Supply your type, message and an optional close icon, and {{ label('important', 'important') }}, if you use html inside the message set use_raw to true!:

{{ flash(false, 'Warning! Best check yo self, you\'re not looking too good.', true, true) }} {{ flash('error', 'Oh snap! Change a few things up and try submitting again.', true, true) }} {{ flash('success', 'Well done! You successfully read this important alert message.', true, true) }} {{ flash('info', 'Heads up! This alert needs your attention, but it\'s not super important.', true, true) }}

Advanced alerts

Supply your type, heading, message and an close tag:

{{ advanced_flash(false, 'Warning!', 'Best check yo self, you\'re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.', true) }} {{ advanced_flash('error', 'Oh snap!', 'Change a few things up and try submitting again. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.', 'a') }} {{ advanced_flash('success', 'Well done!', 'ou successfully read this important alert message. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.', 'button') }} {{ advanced_flash('info', 'Heads up!', 'This alert needs your attention, but it\'s not super important. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.', false) }}

Session flashes:

Dont forget to import the macro into the current template: 

                {%- raw -%}
                {% from 'MopaBootstrapBundle::flash.html.twig' import session %}
                {%- endraw -%}

A common thing in Symfony2 is to use Session Flashes to provide Messages on the "next request"

We provide a block in the template called "session_flash" this looks like

        {%- raw -%}
{% block flashes %}
    {% if app.session.flashbag.peekAll|length > 0 %}
    <div class="row-fluid">
        <div class="span12">
        {{ session_flash() }}
        </div>
    </div>
    {% endif %}
{% endblock flashes %}
        {%- endraw -%}

To provoke a REDIRECT and see some flashes Click Here

Labels and Badges:

Dont forget to import the macro into the current template: 

            {%- raw -%}
            {% from 'MopaBootstrapBundle::macros.html.twig' import label, badge %}
            {%- endraw -%}

Badges

Badges are small, simple components for displaying an indicator or count of some sort. They're commonly found in email clients like Mail.app or on mobile apps for push notifications.

Available classes

Name Example Markup
Default {{ badge(1) }} 
{% raw %}{{ badge(1) }}{% endraw %}
Success {{ badge(2, 'success') }} 
{% raw %}{{ badge(2, 'success') }}{% endraw %}
Warning {{ badge(4,'warning') }} 
{% raw %}{{ badge(4,'warning') }}{% endraw %}
Important {{ badge(6, 'important') }} 
{% raw %}{{ badge(6, 'important') }}{% endraw %}
Info {{ badge(8, 'info') }} 
{% raw %}{{ badge(8, 'info') }}{% endraw %}
Inverse {{ badge(10, 'inverse') }} 
{% raw %}{{ badge(10, 'inverse') }}{% endraw %}

Labels

Label annotate text and can simply be used inline

Available classes

Name Example Markup
Default {{ label('Default') }} 
{% raw %}{{ label('Default') }}{% endraw %}
Success {{ label('Success', 'success') }} 
{% raw %}{{ label('Success', 'success') }}{% endraw %}
Warning {{ label('Warning','warning') }} 
{% raw %}{{ label('Warning','warning') }}{% endraw %}
Important {{ label('Important', 'important') }} 
{% raw %}{{ label('Important', 'important') }}{% endraw %}
Info {{ label('Info', 'info') }} 
{% raw %}{{ label('Info', 'info') }}{% endraw %}
Inverse {{ label('Inverse', 'inverse') }} 
{% raw %}{{ label('Inverse', 'inverse') }}{% endraw %}
{% endblock content %}