Actions Bar
- Central CMS
- Central Forms
- Central Connect
The actions bar is a component within a tab which is split into left/right sides and contains important controls for a given user interface.
The actions bar is optional and can be omitted if the UI doesn't require an actions menu or primary actions.
Layout blocks
In order to use the layout blocks, the tab UI in question must extend the tab component template.
{{% extends '@pulsar/pulsar/components/tab.html.twig' %}}
{%- block actions_left -%}
{{ html.actions_menu({ ... }) }}
{%- endblock -%};
{%- block actions_right -%}
{{ html.button({ ... }) }}
{%- endblock -%}
{% block tab_content %}
{# Regular tab content goes here #}
{% endblock %}
There are two blocks that you can populate with actions: actions_left
and actions_right
. You probably guessed these are normally on either side of the screen but on mobile devices they’re stacked vertically, with the left block appearing above the right and buttons expanding to take up the full width of the screen.
The actions_left
block will typically contain only the html.actions_menu
dropdown helper, detailed below.
The actions_right
block will typically contain buttons illustrating the primary action(s) for a given UI, but may also use button groups and/or dropdown buttons if suitable.