Storybook / List Group

Principe

Le groupe de liste permet un affichage personnalisé prédéfini des listes.
Il est possible de l'enrichir tant au niveau du conteneur que des items, en passant par les contextes prédéfinis de Bootstrap.
La mise en place basique se fait sur une balise ul avec la classe .list-group et des balises li avec la classe .list-group-item.
Il est néanmoins possible d'utiliser d'autres éléments (div, a, button, etc.).

Exemple de base

An item
A second item
A third item
A fourth item
And a fifth one

<ul class="list-group">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
    <li class="list-group-item">A fourth item</li>
    <li class="list-group-item">And a fifth one</li>
</ul>

Active, Disabled, Links/Buttons

Items actifs et désactivés

An active item
A second item
A disabled item
A fourth item
And a fifth one

<ul class="list-group">
    <li class="list-group-item active" aria-current="true">An active item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item" aria-disabled="true">A disabled item</li>
    <li class="list-group-item">A fourth item</li>
    <li class="list-group-item">And a fifth one</li>
</ul>

Liens

The current link item A second link item A third link item A fourth link item A disabled link item

<div class="list-group">
    <a href="#" class="list-group-item list-group-item-action active" aria-current="true">The current link item</a>
    <a href="#" class="list-group-item list-group-item-action">A second link item</a>
    <a href="#" class="list-group-item list-group-item-action">A third link item</a>
    <a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
    <a class="list-group-item list-group-item-action disabled">A disabled link item</a>
</div>

Buttons

<div class="list-group">
    <button type="button" class="list-group-item list-group-item-action active" aria-current="true">The current button</button>
    <button type="button" class="list-group-item list-group-item-action">A second item</button>
    <button type="button" class="list-group-item list-group-item-action">A third button item</button>
    <button type="button" class="list-group-item list-group-item-action">A fourth button item</button>
    <button type="button" class="list-group-item list-group-item-action" disabled>A disabled button item</button>
</div>

Flush

Ajouter la classe .list-group-flush pour supprimer certaines bordures et certains arrondis (très pratique si un parent a déjà un skin prédéfini).

An item
A second item
A third item
A fourth item
And a fifth one

<ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
    <li class="list-group-item">A fourth item</li>
    <li class="list-group-item">And a fifth one</li>
</ul>

Numérotation

Ajouter la classe .list-group-numbered pour activer la numérotation des items de la liste (ol).

A list item
A list item
A list item

<ol class="list-group list-group-numbered">
    <li class="list-group-item">A list item</li>
    <li class="list-group-item">A list item</li>
    <li class="list-group-item">A list item</li>
</ol>

Cela fonctionne bien également avec du contenu personnalisé.

Subheading
Content for list item
14
Subheading
Content for list item
14
Subheading
Content for list item
14

<ol class="list-group list-group-numbered">
    <li class="list-group-item d-flex justify-content-between align-items-start">
        <div class="ms-2 me-auto">
            <div class="fw-bold">Subheading</div>
            Content for list item
        </div>
        <span class="badge text-bg-primary rounded-pill">14</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-start">
        <div class="ms-2 me-auto">
            <div class="fw-bold">Subheading</div>
            Content for list item
        </div>
        <span class="badge text-bg-primary rounded-pill">14</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-start">
        <div class="ms-2 me-auto">
            <div class="fw-bold">Subheading</div>
            Content for list item
        </div>
        <span class="badge text-bg-primary rounded-pill">14</span>
    </li>
</ol>

Mode Horizontal

Il est possible de modifier l'orientation des items en ajoutant la classe .list-group-horizontal. Il est également possible de gérer l'orientation en fonction des breakpoints via .list-group-horizontal-{sm|md|lg|xl}.

An item
A second item
A third item

An item
A second item
A third item

An item
A second item
A third item

An item
A second item
A third item

An item
A second item
A third item

<ul class="list-group list-group-horizontal">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-sm">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-md">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-lg">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-xl">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
</ul>

Contextes

Possibilité d'utiliser les thèmes Bootstrap pour styliser les items.

A simple default list group item
A simple primary list group item
A simple secondary list group item
A simple success list group item
A simple danger list group item
A simple warning list group item
A simple info list group item
A simple light list group item
A simple dark list group item

<ul class="list-group">
    <li class="list-group-item">A simple default list group item</li>
    
    <li class="list-group-item list-group-item-primary">A simple primary list group item</li>
    <li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
    <li class="list-group-item list-group-item-success">A simple success list group item</li>
    <li class="list-group-item list-group-item-danger">A simple danger list group item</li>
    <li class="list-group-item list-group-item-warning">A simple warning list group item</li>
    <li class="list-group-item list-group-item-info">A simple info list group item</li>
    <li class="list-group-item list-group-item-light">A simple light list group item</li>
    <li class="list-group-item list-group-item-dark">A simple dark list group item</li>
</ul>

Avec des liens / boutons

Les classes contextuelles fonctionnent également avec les éléments .list-group-item-action sur des a, le tout dans un div.
Les effets hover et .active fonctionnent dans ce cas.

A simple default list group item A simple primary list group item A simple secondary list group item A simple success list group item A simple danger list group item A simple warning list group item A simple info list group item A simple light list group item A simple dark list group item

<div class="list-group">
    <a href="#" class="list-group-item list-group-item-action">A simple default list group item</a>

    <a href="#" class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-success">A simple success list group item</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-danger">A simple danger list group item</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-warning">A simple warning list group item</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-info">A simple info list group item</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-light">A simple light list group item</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-dark">A simple dark list group item</a>
</div>

Avec des badges

Afficher des badges pour notifier le nombre de messages lus par exemple ou le nombre d'items dans un groupe.

A list item 14
A second list item 2
A third list item 1

<ul class="list-group">
    <li class="list-group-item d-flex justify-content-between align-items-center">
        A list item
        <span class="badge badge-primary2 badge-pill">14</span>
    </li>
        <li class="list-group-item d-flex justify-content-between align-items-center">
        A second list item
        <span class="badge badge-primary2 badge-pill">2</span>
    </li>
        <li class="list-group-item d-flex justify-content-between align-items-center">
        A third list item
        <span class="badge badge-primary2 badge-pill">1</span>
    </li>
</ul>

Contenu personnalisé

N'importe quel contenu personnalisé peut s'insérer dans un item de groupe de liste via les classes utilitaires.
Exemple :

List group item heading

3 days ago

Some placeholder content in a paragraph.

And some small print.

List group item heading

3 days ago

Some placeholder content in a paragraph.

And some muted small print.

List group item heading

3 days ago

Some placeholder content in a paragraph.

And some muted small print.

<div class="list-group">
    <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
        <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1">List group item heading</h5>
            <small>3 days ago</small>
        </div>
        <p class="mb-1">Some placeholder content in a paragraph.</p>
        <small>And some small print.</small>
    </a>
    <a href="#" class="list-group-item list-group-item-action">
        <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1">List group item heading</h5>
            <small class="text-body-secondary">3 days ago</small>
        </div>
        <p class="mb-1">Some placeholder content in a paragraph.</p>
        <small class="text-body-secondary">And some muted small print.</small>
    </a>
    <a href="#" class="list-group-item list-group-item-action">
        <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1">List group item heading</h5>
            <small class="text-body-secondary">3 days ago</small>
        </div>
        <p class="mb-1">Some placeholder content in a paragraph.</p>
        <small class="text-body-secondary">And some muted small print.</small>
    </a>
</div>

Checkbox & Radiobutton

Les .list-group peuvent inclure des checkbox ou des radiobuttons en utilisant les label qui suivent les input.

Checkbox

First checkbox
Second checkbox
Third checkbox

<ul class="list-group">
    <li class="list-group-item">
        <input class="form-check-input me-1" type="checkbox" value="" id="firstCheckbox">
        <label class="form-check-label" for="firstCheckbox">First checkbox</label>
    </li>
    <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="secondCheckbox">
        <label class="form-check-label" for="secondCheckbox">Second checkbox</label>
    </li>
    <li class="list-group-item">
        <input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckbox">
        <label class="form-check-label" for="thirdCheckbox">Third checkbox</label>
    </li>
</ul>

Radio

First radio
Second radio
Third radio

<ul class="list-group">
    <li class="list-group-item">
        <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="firstRadio" checked>
        <label class="form-check-label" for="firstRadio">First radio</label>
    </li>
    <li class="list-group-item">
        <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="secondRadio">
        <label class="form-check-label" for="secondRadio">Second radio</label>
    </li>
    <li class="list-group-item">
        <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="thirdRadio">
        <label class="form-check-label" for="thirdRadio">Third radio</label>
    </li>
</ul>

Tout cliquable

Ajouter .stretched-link sur le label pour rendre cliquable l'intégralité de l'item.

First checkbox
Second checkbox
Third checkbox

html

CSS

Un coup d'œil sur les variables CSS et SASS.

Variables CSS

--#{$prefix}list-group-color: #{$list-group-color};
--#{$prefix}list-group-bg: #{$list-group-bg};
--#{$prefix}list-group-border-color: #{$list-group-border-color};
--#{$prefix}list-group-border-width: #{$list-group-border-width};
--#{$prefix}list-group-border-radius: #{$list-group-border-radius};
--#{$prefix}list-group-item-padding-x: #{$list-group-item-padding-x};
--#{$prefix}list-group-item-padding-y: #{$list-group-item-padding-y};
--#{$prefix}list-group-action-color: #{$list-group-action-color};
--#{$prefix}list-group-action-hover-color: #{$list-group-action-hover-color};
--#{$prefix}list-group-action-hover-bg: #{$list-group-hover-bg};
--#{$prefix}list-group-action-active-color: #{$list-group-action-active-color};
--#{$prefix}list-group-action-active-bg: #{$list-group-action-active-bg};
--#{$prefix}list-group-disabled-color: #{$list-group-disabled-color};
--#{$prefix}list-group-disabled-bg: #{$list-group-disabled-bg};
--#{$prefix}list-group-active-color: #{$list-group-active-color};
--#{$prefix}list-group-active-bg: #{$list-group-active-bg};
--#{$prefix}list-group-active-border-color: #{$list-group-active-border-color};

Variables SASS

$list-group-color:                  var(--#{$prefix}body-color);
$list-group-bg:                     var(--#{$prefix}body-bg);
$list-group-border-color:           var(--#{$prefix}border-color);
$list-group-border-width:           var(--#{$prefix}border-width);
$list-group-border-radius:          var(--#{$prefix}border-radius);

$list-group-item-padding-y:         $spacer * .5;
$list-group-item-padding-x:         $spacer;
// fusv-disable
$list-group-item-bg-scale:          -80%; // Deprecated in v5.3.0
$list-group-item-color-scale:       40%; // Deprecated in v5.3.0
// fusv-enable

$list-group-hover-bg:               var(--#{$prefix}tertiary-bg);
$list-group-active-color:           $component-active-color;
$list-group-active-bg:              $component-active-bg;
$list-group-active-border-color:    $list-group-active-bg;

$list-group-disabled-color:         var(--#{$prefix}secondary-color);
$list-group-disabled-bg:            $list-group-bg;

$list-group-action-color:           var(--#{$prefix}secondary-color);
$list-group-action-hover-color:     var(--#{$prefix}emphasis-color);

$list-group-action-active-color:    var(--#{$prefix}body-color);
$list-group-action-active-bg:       var(--#{$prefix}secondary-bg);

Tabs

Associé au javascript de Bootstrap, il est possible d'obtenir un système d'onglets.

Home Profile Messages Settings

...1...

...2...

...3...

...4...

<div class="row mb-4">
    <div class="col-4">
        <div class="list-group" id="list-tab" role="tablist">
            <a class="list-group-item list-group-item-action active" id="list-home-list" data-bs-toggle="list" href="#list-home" role="tab" aria-controls="list-home">Home</a>
            <a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="list" href="#list-profile" role="tab" aria-controls="list-profile">Profile</a>
            <a class="list-group-item list-group-item-action" id="list-messages-list" data-bs-toggle="list" href="#list-messages" role="tab" aria-controls="list-messages">Messages</a>
            <a class="list-group-item list-group-item-action" id="list-settings-list" data-bs-toggle="list" href="#list-settings" role="tab" aria-controls="list-settings">Settings</a>
        </div>
    </div>
    <div class="col-8">
        <div class="tab-content" id="nav-tabContent">
            <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">...1...</div>
            <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">...2...</div>
            <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">...3...</div>
            <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">...4...</div>
        </div>
    </div>
</div>

Data attributes

Possibilité d'activer la navigation sans javascript en spécifiant data-bs-toggle="list" sur les .list-group-item.

Home Profile Messages Settings

...1...

...2...

...3...

...4...

<div role="tabpanel">
    <!-- List group -->
    <div class="list-group" id="myList" role="tablist">
        <a class="list-group-item list-group-item-action active" data-bs-toggle="list" href="#home" role="tab">Home</a>
        <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#profile" role="tab">Profile</a>
        <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#messages" role="tab">Messages</a>
        <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#settings" role="tab">Settings</a>
    </div>

    <!-- Tab panes -->
    <div class="tab-content">
        <div class="tab-pane active" id="home" role="tabpanel">...1...</div>
        <div class="tab-pane" id="profile" role="tabpanel">...2...</div>
        <div class="tab-pane" id="messages" role="tabpanel">...3...</div>
        <div class="tab-pane" id="settings" role="tabpanel">...4...</div>
    </div>
</div>