SIA Web Design Library

Action bar

No notes defined.

<div class='c-action-bar'>
    <div class='c-action-bar__actions'>
        <a class='c-button c-button--small' href="#">Main action</a>
    </div>
    <div class='c-action-bar__links '>
        <a class='c-link c-link--dashboard c-link--with-icon c-link--minimal ' href="#" itemprop="item" itemid="#"><span itemprop="name">View dashboard</span></a> <a class='c-link c-link--edit c-link--with-icon c-link--minimal ' href="#" itemprop="item" itemid="#"><span itemprop="name">Edit</span></a> <a class='c-link c-link--delete c-link--with-icon c-link--minimal ' href="#" itemprop="item" itemid="#"><span itemprop="name">Delete</span></a>
    </div>
</div>
 
<div class='{{ get_component_class( 'action-bar', display ) }}'>
    {% if button %}
        <div class='c-action-bar__actions'>
            {% include get_template( 'button', 'base' ) with button|merge( { display: { modifiers: [ 'small' ] } } ) %}
        </div>
    {% endif %}
    {% if links %}
        <div class='c-action-bar__links '>
            {% for link in links %}
                {% include get_template( 'link', 'base' ) with link|merge( { 
                    display: { 
                        modifiers: [ link.icon, 'with-icon', 'minimal' ] 
                    },
                    showInModal: FALSE,
                    title: text,
                } ) %}
            {% endfor %}
        </div>
    {% endif %}
</div>
 
{
  "button": {
    "text": "Main action",
    "url": "#"
  },
  "links": [
    {
      "href": "#",
      "icon": "dashboard",
      "text": "View dashboard"
    },
    {
      "href": "#",
      "icon": "edit",
      "text": "Edit"
    },
    {
      "href": "#",
      "icon": "delete",
      "text": "Delete"
    }
  ]
}