Recapitulatif

Ajouté à la version :

0.1.0(actuelle)

Changelog:

0.1.0: Ajout du composant

Composant de base

Le composant .recap sert à lister des des éléments.

L'élément .recap-list-item n'est prévu que pour recevoir que 2 enfants directs.

Total contacts

83 999
Emails

60 000
SMS

10 000
Push

13 000
Cookies

0
Facebook

666
Twitter

333

<div class="recap">
  <ul class="recap-list">
    <li class="recap-list-item recap-list-item--divider">
      <div class="recap-list-item-inner">Total contacts</div>
      <div class="recap-list-item-inner">83 999</div>
    </li>
    <li class="recap-list-item">
      <div class="recap-list-item-inner">Emails</div>
      <div class="recap-list-item-inner">60 000</div>
    </li>
    <li class="recap-list-item">
      <div class="recap-list-item-inner">SMS</div>
      <div class="recap-list-item-inner">10 000</div>
    </li>
    <li class="recap-list-item">
      <div class="recap-list-item-inner">Push</div>
      <div class="recap-list-item-inner">13 000</div>
    </li>
    <li class="recap-list-item">
      <div class="recap-list-item-inner">Cookies</div>
      <div class="recap-list-item-inner">0</div>
    </li>
    <li class="recap-list-item">
      <div class="recap-list-item-inner">Facebook</div>
      <div class="recap-list-item-inner">666</div>
    </li>
    <li class="recap-list-item">
      <div class="recap-list-item-inner">Twitter</div>
      <div class="recap-list-item-inner">333</div>
    </li>
  </ul>
  <div class="recap-footer">
    <a class="button button--ghost" href="#">Re-calculer</a>
    <p class="recap-footer-legend">calcul au Ven. 10 Sept. à 18.01</p>
  </div>
</div>

Contenu alternatif

Il est possible d'inclure le composant inputCheckbox.

Tous les inactifs (depuis 3 mois)

10 200
SMS (depuis 3 mois)

2 200
Email (depuis 3 mois)

7 000
Push(depuis 3 mois)

1 000

<div class="recap">
  <ul class="recap-list">
    <li class="recap-list-item recap-list-item--divider">
      <div class="recap-list-item-inner">
        <div class="inputCheckbox">
          <input id="exclude-item-1" type="checkbox" value="exclude-item-1" checked="checked" />
          <label for="exclude-item-1">Tous les inactifs (depuis 3 mois)</label>
        </div>
      </div>
      <div class="recap-list-item-inner">10 200</div>
    </li>
    <li class="recap-list-item">
      <div class="recap-list-item-inner">
        <div class="inputCheckbox">
          <input id="exclude-item-2" type="checkbox" value="exclude-item-2" checked="checked" />
          <label for="exclude-item-2">SMS (depuis 3 mois)</label>
        </div>
      </div>
      <div class="recap-list-item-inner">2 200</div>
    </li>
    <li class="recap-list-item">
      <div class="recap-list-item-inner">
        <div class="inputCheckbox">
          <input id="exclude-item-3" type="checkbox" value="exclude-item-3" checked="checked" />
          <label for="exclude-item-3">Email (depuis 3 mois)</label>
        </div>
      </div>
      <div class="recap-list-item-inner">7 000</div>
    </li>
    <li class="recap-list-item">
      <div class="recap-list-item-inner">
        <div class="recap-list-item-inner">
          <div class="inputCheckbox">
            <input id="exclude-item-4" type="checkbox" value="exclude-item-4" checked="checked" />
            <label for="exclude-item-4">Push(depuis 3 mois)</label>
          </div>
        </div>
      </div>
      <div class="recap-list-item-inner">1 000</div>
    </li>
  </ul>
</div>

Contenu alternatif état désactivé

Ajouter la classe de modification .recap-list-item--disabled à l'élément ayant la classe .recap-list-item afin de modifier son style.

Blacklist Email
Lorem_20160723

2 200
Desabo_20160619

17 000

<div class="recap">
  <ul class="recap-list">
    <li class="recap-list-item recap-list-item--divider">
      <div class="recap-list-item-inner">Blacklist Email</div>
    </li>
    <li class="recap-list-item recap-list-item--disabled">
      <div class="recap-list-item-inner">
        <div class="inputCheckbox">
          <input id="blacklist-item-1" type="checkbox" value="blacklist-item-1" checked="checked">
          <label for="blacklist-item-1">Lorem_20160723</label>
        </div>
      </div>
      <div class="recap-list-item-inner">2 200</div>
    </li>
    <li class="recap-list-item">
      <div class="recap-list-item-inner">
        <div class="recap-list-item-inner">
          <div class="inputCheckbox">
            <input id="blacklist-item-4" type="checkbox" value="blacklist-item-4">
            <label for="blacklist-item-4">Desabo_20160619</label>
          </div>
        </div>
      </div>
      <div class="recap-list-item-inner">17 000</div>
    </li>
  </ul>
</div>