Documentation

La zone de chat se trouve à sein de la div .chat__box__content__inner.

Chaque bloc de chat est customisable suivant les options suivantes (classes CSS à ajouter sur la div .chat__item):

Pour avoir une popin avec image en plein écran il faut avoir un lien autour de l'image avec en href l'image version grande et avec la class .js-openMfp-image sur la balise a (exemple ci-dessous).

Les actions Javascript sont désactivées pour la vue isolée du composant, pour avoir la demo intéractive voir la section : Chat/Scripts.

Zone de contenu

Preview

John DoeAujourd’hui 14:02
Vivamus hendrerit dolor est, a fermentum neque euismod non. Integer faucibus lorem urna, sed vulputate ante congue ac.
Léa DupanierAujourd’hui 14:04
Vivamus hendrerit dolor est, a fermentum neque euismod non.
Léa DupanierAujourd’hui 15:22
Léa DupanierAujourd’hui 15:22
logo-websprint.pdf

Balisage


                
                    <div class="chat__box__content">
                        <div class="chat__box__content__inner is-visible">
                            <div class="chat__item">
                                <div class="chat__item__avatar"><img src="assets/images/avatar-01.png"/></div>
                                <div class="chat__item__title"><span class="pseudo">John Doe</span><span class="date">Aujourd’hui 14:02</span></div>
                                <div class="chat__item__content">Vivamus hendrerit dolor est, a fermentum neque euismod non. Integer faucibus lorem urna, sed vulputate ante congue ac.
                                </div>
                            </div>
                            <div class="chat__item blue right">
                                <div class="chat__item__avatar"><img src="assets/images/avatar-02.png"/></div>
                                <div class="chat__item__title"><span class="pseudo">Léa Dupanier</span><span class="date">Aujourd’hui 14:04</span></div>
                                <div class="chat__item__content">Vivamus hendrerit dolor est, a fermentum neque euismod non.
                                </div>
                            </div>
                            <div class="chat__item borderLess right">
                                <div class="chat__item__avatar"><img src="assets/images/avatar-02.png"/></div>
                                <div class="chat__item__title"><span class="pseudo">Léa Dupanier</span><span class="date">Aujourd’hui 15:22</span></div>
                                <div class="chat__item__content"><a class="js-openMfp-image" href="assets/images/ripple-big.jpg"><img src="assets/images/img-chat.png"/></a>
                                </div>
                            </div>
                            <div class="chat__item white right">
                                <div class="chat__item__avatar"><img src="assets/images/avatar-02.png"/></div>
                                <div class="chat__item__title"><span class="pseudo">Léa Dupanier</span><span class="date">Aujourd’hui 15:22</span></div>
                                <div class="chat__item__content">
                                    <div class="chat__item__media"><img src="assets/images/icon-pdf.png"/><a href="#">logo-websprint.pdf</a></div>
                                </div>
                            </div>
                        </div>
                    </div>