Aller au contenu

Balises d'interface

Cette page regroupe les balises utilisées pour représenter des interfaces graphiques et des conversations par messagerie.

interface-graphique

Utilisée pour créer un conteneur d'interface graphique. Cette balise est généralement utilisée pour encapsuler des éléments d'interface comme des messages ou du texte.

Attributs

Aucun attribut particulier.

Usage

pollen
â—Šinterface-graphique{
  â—Šinterface-texte{Contenu de l'interface}
}
<interface-conteneur>
  <interface-graphique>
    <interface-texte>Contenu de l'interface</interface-texte>
  </interface-graphique>
</interface-conteneur>
<interface-conteneur>
  <interface-graphique>
    <interface-texte>Contenu de l'interface</interface-texte>
  </interface-graphique>
</interface-conteneur>
\begin{interface}[halign=left]
  \begin{tcolorbox}[blanker]
    Contenu de l'interface
  \end{tcolorbox}
\end{interface}

interface-texte

Utilisée pour afficher du texte dans une interface graphique. Cette balise peut être centrée ou alignée à gauche.

Attributs

class

Classes CSS additionnelles. Utilisez "centré" pour centrer le texte dans l'interface.

interface-texte[#:class "centré"]{Texte centré}

Usage

pollen
â—Šinterface-graphique{
  ◊interface-texte[#:class "centré"]{Message centré}
  ◊interface-texte{Message aligné à gauche}
}
<interface-conteneur>
  <interface-graphique>
    <interface-texte class="centré">Message centré</interface-texte>
    <interface-texte>Message aligné à gauche</interface-texte>
  </interface-graphique>
</interface-conteneur>
<interface-conteneur>
  <interface-graphique>
    <interface-texte class="centré">Message centré</interface-texte>
    <interface-texte>Message aligné à gauche</interface-texte>
  </interface-graphique>
</interface-conteneur>
\begin{interface}[halign=left]
  \begin{tcolorbox}[blanker,halign=center]
    Message centré
  \end{tcolorbox}
  \begin{tcolorbox}[blanker]
    Message aligné à gauche
  \end{tcolorbox}
\end{interface}

messagerie

Crée un conteneur pour une conversation par messagerie. Cette balise est utilisée pour représenter des conversations numériques comme des chats ou des SMS.

Attributs

Aucun attribut particulier.

Usage

pollen
â—Šmessagerie{
  â—Šmessagerie-titre{Conversation avec Alice}
  â—Šmessagerie-message[#:qui "Bob" #:heure "10:30"]{Salut !}
  ◊messagerie-message[#:type "reçu" #:qui "Alice" #:heure "10:31"]{Bonjour Bob !}
  ◊messagerie-systeme{Alice est en train d'écrire...}
}
<corps-messagerie>
  <messagerie-titre>Conversation avec Alice</messagerie-titre>
  <div class="messagerie-message-container">
    <messagerie-message>
      <div class="qui">Bob</div>
      <div class="contenu">Salut !</div>
      <div class="heure">10:30</div>
    </messagerie-message>
  </div>
  <div class="messagerie-message-container reçu">
    <messagerie-message class="reçu">
      <div class="qui">Alice</div>
      <div class="contenu">Bonjour Bob !</div>
      <div class="heure">10:31</div>
    </messagerie-message>
  </div>
  <div class="messagerie-systeme-container">
    <messagerie-systeme>Alice est en train d'écrire...</messagerie-systeme>
  </div>
</corps-messagerie>
<corps-messagerie>
  <messagerie-titre>Conversation avec Alice</messagerie-titre>
  <div class="messagerie-message-container">
    <messagerie-message>
      <div class="qui">Bob</div>
      <div class="contenu">Salut !</div>
      <div class="heure">10:30</div>
    </messagerie-message>
  </div>
  <div class="messagerie-message-container reçu">
    <messagerie-message class="reçu">
      <div class="qui">Alice</div>
      <div class="contenu">Bonjour Bob !</div>
      <div class="heure">10:31</div>
    </messagerie-message>
  </div>
  <div class="messagerie-systeme-container">
    <messagerie-systeme>Alice est en train d'écrire...</messagerie-systeme>
  </div>
</corps-messagerie>
\begin{messaging}
  [Conversation avec Alice]
  \messagingbubble{Bob}{Salut !}{10:30}\relax
  \messagingbubble reçu{Alice}{Bonjour Bob !}{10:31}\relax
  \messagingsystem{Alice est en train d'écrire...}\relax
\end{messaging}

Sous-balises

messagerie-titre

Définit le titre de la conversation.

messagerie-message

Représente un message dans la conversation.

Attributs
type

Type du message. Utilisez "reçu" pour les messages reçus (alignés à gauche).

qui

Nom de l'expéditeur du message.

heure

Horodatage du message.

messagerie-systeme

Affiche un message système dans la conversation (par exemple, statut d'un utilisateur).

Conseil

Pour une meilleure lisibilité, il est recommandé d'utiliser des classes CSS personnalisées pour styliser les différents types de messages et les informations système.