Buttons Group
Toggle example guides Toggle HTML markup
Différents cas d'utilisation de boutons dans des groupes.
Les groupes de boutons permettent notamment de gérer l'alignement inline.
.buttons-group = Groupe de bouton standard. Les boutons passeront à la ligne si l'espace disponible n'est pas suffisant.
.buttons-group-collapse = Groupe de bouton sans espaces. les boutons resteront toujours sur une même ligne.
.buttons-group-collapse-wrap = Groupe de bouton sans espaces. Les boutons passent en colonnes sur mobile.
<div class="buttons-group">
<div class="blk-button"></div>
<div class="blk-button"></div>
<div class="blk-button"></div>
...
</div>
.buttons-group.center
Groupe de bouton standard centré.
<insert-markup>components.button.buttonsgroup-0</insert-markup>
.buttons-group.end
Groupe de bouton standard aligné à droite (end).
<insert-markup>components.button.buttonsgroup-1</insert-markup>
.buttons-group.full-width
Groupe de bouton standard s'étend sur toute la largeur du parent.
<insert-markup>components.button.buttonsgroup-2</insert-markup>
.buttons-group-collapse.center
Groupe de bouton sans espaces centré.
<insert-markup>components.button.buttonsgroup-3</insert-markup>
.buttons-group-collapse.end
Groupe de bouton sans espaces aligné à droite (end).
<insert-markup>components.button.buttonsgroup-4</insert-markup>
.buttons-group-collapse.full-width
Groupe de bouton sans espaces s'étend sur toute la largeur du parent.
<insert-markup>components.button.buttonsgroup-5</insert-markup>
.buttons-group-collapse-wrap.center
Groupe de bouton sans espaces centré en medium et plus. En colonne sur mobile.
<insert-markup>components.button.buttonsgroup-6</insert-markup>
.buttons-group-collapse-wrap.end
Groupe de bouton sans espaces aligné à droite (end) en medium et plus. En colonne sur mobile.
<insert-markup>components.button.buttonsgroup-7</insert-markup>
Markup: ../../../snippets/components/buttons-group.hbs
<div class="{{modifier_class}}">
<div class="blk-button">
<button type="button" id="navSheetTrigger" class="button blk-button__link tab-mobile-bottom-toggle"
aria-label="Open navigation menu" aria-controls="navSheet" aria-expanded="false">
<span class="ico blk-button__icon" aria-hidden="true">
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-menu" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"></path>
<line x1="4" y1="8" x2="20" y2="8"></line>
<line x1="4" y1="16" x2="20" y2="16"></line>
</svg>
</span>
<span class="txt blk-button__label">
<span>Menu</span>
</span>
</button>
</div>
<div class="blk-button">
<button type="button" id="contactSheetTrigger" class="button blk-button__link" aria-expanded="false"
aria-label="Open contact information" aria-controls="contactSheet">
<span class="ico blk-button__icon" aria-hidden="true">
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-messages" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"></path>
<path d="M21 14l-3 -3h-7a1 1 0 0 1 -1 -1v-6a1 1 0 0 1 1 -1h9a1 1 0 0 1 1 1v10"></path>
<path d="M14 15v2a1 1 0 0 1 -1 1h-7l-3 3v-10a1 1 0 0 1 1 -1h2"></path>
</svg>
</span>
<span class="txt blk-button__label">
<span class="lg:show">Contact Us</span>
<span class="lg:hide">Contact</span>
</span>
<span class="txt blk-button__tooltip center">
<span>Contact details, useful info, social networks…</span>
</span>
</button>
</div>
<div class="blk-button blk-button--lead-bold">
<a href="tel:" class="button blk-button__link">
<span class="ico blk-button__icon" aria-hidden="true">
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-phone-outgoing" width="24" height="24" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"></path>
<path d="M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v4a2 2 0 0 1 -2 2a16 16 0 0 1 -15 -15a2 2 0 0 1 2 -2">
</path>
<line x1="15" y1="9" x2="20" y2="4"></line>
<polyline points="16 4 20 4 20 8"></polyline>
</svg>
</span>
<span class="txt blk-button__label">
<span class="lg:show">0800.949.848</span>
<span class="lg:hide">Call</span>
</span>
</a>
</div>
<div class="blk-button">
<button type="button" id="configSheetTrigger" class="button blk-button__link" aria-expanded="false"
aria-label="Open user settings" aria-controls="configSheet">
<span class="ico blk-button__icon" aria-hidden="true">
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-settings" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"></path>
<path
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z">
</path>
<circle cx="12" cy="12" r="3"></circle>
</svg>
</span>
<span class="txt blk-button__label">
<span class="lg:show">Options</span>
<span class="lg:hide">Options</span>
</span>
</button>
</div>
</div>
Source:
src/cssframework_v2/less/components/button.less, line 730