Barre d'actions

Le composant toolbar permet de présenter des groupes de boutons d'action

Classes du composant

Modificateurs d'apparence

.toolbar--app : Toolbar d'application (fond noir)
.toolbar--expanded : Toolbar étendue

Modificateurs d'apparence pour les groupes

.toolbar__group--expanded : Groupe étendu
.toolbar__group--push : Pousse le groupe vers la droite
.toolbar__group--pull : Pousse le groupe vers la gauche

Modificateurs d'apparence pour les items

.toolbar__item--expanded : Item étendu

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" trimDirectiveWhitespaces="true" %>
<%@ taglib prefix="kuik" uri="kuik" %>

<div class="l-col-12">
    <kuik:toolbar aria-label="Imprimer, prévisualiser, éditer, gérer, partager la fiche actualité">
        <kuik:toolbar-group class="toolbar__group--push">
            <kuik:toolbar-item>
                <kuik:button icon="true" priority="secondary" size="sm" status="neutral" aria-label="Imprimer la fiche" onclick="print()">
                    <kuik:icon title="Imprimer" source="icon://ui/printer" size="md" />
                    <span class="visually-hidden">Imprimer</span>
                </kuik:button>
            </kuik:toolbar-item>
            <kuik:toolbar-item>
                <kuik:button icon="true" priority="secondary" size="sm" status="neutral" aria-label="Prévisualisation responsive de la fiche">
                    <kuik:icon title="Écrans" source="icon://ui/screens" size="md" />
                    <span class="visually-hidden">Écrans</span>
                </kuik:button>
            </kuik:toolbar-item>
            <kuik:toolbar-item>
                <kuik:button icon="true" priority="secondary" size="sm" status="neutral" aria-label="Éditer la fiche">
                    <kuik:icon title="Éditer" source="icon://ui/edit-file" size="md" />
                    <span class="visually-hidden">Éditer</span>
                </kuik:button>
            </kuik:toolbar-item>
            <kuik:toolbar-item>
                <kuik:button icon="true" priority="secondary" size="sm" status="neutral" aria-label="Tableau de bord">
                    <kuik:icon title="Tableau de bord" source="icon://ui/edit-dashboard" size="md" />
                    <span class="visually-hidden">Tableau de bord</span>
                </kuik:button>
            </kuik:toolbar-item>
            <kuik:toolbar-item>
                <kuik:button icon="true" priority="secondary" size="sm" status="neutral" aria-label="Déplier / Plier les partages sur les réseaux sociaux" aria-expanded="false" class="dropdown share-dropdown">
                    <kuik:icon title="Partager" source="icon://ui/share" size="md" />
                    <span class="visually-hidden">Partager</span>
                </kuik:button>
            </kuik:toolbar-item>
        </kuik:toolbar-group>
    </kuik:toolbar>
</div>

<%@ tag trimDirectiveWhitespaces="true" dynamic-attributes="dynattrs" %>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<c:set value="toolbar__group" var="classes" />

<c:set var="attributes">
    <c:forEach items="${dynattrs}" var="a">
        <c:choose>
            <c:when test="${a.key == 'class'}">
                <c:set value="${classes} ${a.value}" var="classes"/>
            </c:when>
            <c:otherwise>${a.key}="${a.value}" </c:otherwise>
        </c:choose>
    </c:forEach>
</c:set>

<ul class="${pageScope.classes}" ${pageScope.attributes}>
    <jsp:doBody />
</ul>

@use 'mixins/mixins-lists' as lists;

.toolbar {
    --padding-h: var(--space-4);
    --padding-v: var(--space-3);

    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    justify-content: space-between;
    padding: var(--padding-v) var(--padding-h);
}

.toolbar--nowrap {
    flex-wrap: nowrap;
}

.toolbar--expanded {
    --padding-h: var(--space-0);
    --padding-v: var(--space-0);
}

.toolbar--bordered {
    --padding-h: var(--space-0);

    border-block: var(--line-thin) var(--neutral-30);
}

.toolbar__group {
    @include lists.list-reset;

    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.toolbar__group--nowrap {
    flex-wrap: nowrap;
}

.toolbar__group--expanded {
    flex-grow: 1;
}

*:has(> .toolbar__group--stacked-narrow) {
  container-type: inline-size;
}

.toolbar__group--stacked-narrow {
  align-items: stretch;
  flex-direction: column;

  @container (width >= 34rem) {
    flex-direction: row;
  }
}

.toolbar__group--stretch {
  align-self: stretch;
}

.toolbar__group--push {
    margin-inline-start: auto;
}

.toolbar__group--pull {
    margin-inline-end: auto;
}

.toolbar__group--bottom {
    align-items: flex-end;
}

.toolbar__item {
    flex-grow: 0;
}

.toolbar__item--expanded {
    flex-grow: 1;
}

.toolbar__item--stretch {
    align-self: stretch;
    display: flex;
}