Blocs d'avertissement, de succès et d'informations

Soutien
1

Bonjour,

Je recherche un plugin ou une extension markdown pour des blocs de notification. Bootstrap a quelque chose comme ça

image
image950×363 11 KB

J’apprécierais s’il existe un plugin.

3 « J'aime »
2

Vous pouvez utiliser le wrapper bbcode générique pour les composants thématiques, quelque chose comme ceci :

[wrap=success]
**Succès !** Votre message a été envoyé avec succès
[/wrap]

…ce qui deviendra ce HTML :

<div class="d-wrap" data-wrap="success" dir="ltr">
  <p><strong>Succès !</strong> Votre message a été envoyé avec succès</p>
</div>

Vous pouvez ajouter du CSS ciblant .d-wrap[data-wrap="success"] pour le styliser.

J’utilise ceci :

@mixin admonition($color, $bgcolor, $bordercolor, $iconurl) {
    padding: 8px;
    padding-left: 4em;
    padding-right: 2em;
    color: $color;
    border-left: 5px solid $bordercolor;
    background-color: $bgcolor;
    background-image: url($iconurl);
    background-repeat: no-repeat;
    background-size: 2em;
    background-position: 1em 1.25em;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.2);
    margin-bottom: 1em;
}

.d-wrap[data-wrap="info"] {
    @include admonition(#084298, #cfe2ff, #b6d4fe, "/images/emoji/google/information_source.png");
}

.d-wrap[data-wrap="warning"] {
    @include admonition(#664d03, #fff3cd, #ffecb5, "/images/emoji/google/warning.png");
}

.d-wrap[data-wrap="danger"] {
    @include admonition(#842029, #f8d7da, #f5c2c7, "/images/emoji/google/stop_sign.png");
}

…ce qui me permet de créer des choses comme ceci :

image
image709×222 24.3 KB

7 « J'aime »
3

Génial, merci beaucoup !

1 « J'aime »
4

J’ai donc essayé d’ajouter ceci, est-ce que quelque chose manque ?

brave_uouSOtwXW2
brave_uouSOtwXW21177×482 20.9 KB

4i2Mw7HkNO
4i2Mw7HkNO859×706 22.4 KB

1 « J'aime »
5

Mes styles CSS n’ont ajouté que des styles pour info, warning et danger. Essayez de changer [wrap=success] en [wrap=warning].

Vous devrez définir votre propre style pour success.

1 « J'aime »
6

Ah oui, je pensais que vous l’aviez codé pour qu’il soit plug and play.

Ça fonctionne parfaitement.

7

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.