Actions Bar

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.

tip

The actions bar is optional and can be omitted if the UI doesn't require an actions menu or primary actions.

•  New Thing
•  New filter
•  Make a copy
•  Change owner
•  Make live
•  Take offline
•  Make visible
•  Make invisible
•  Delete

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.