⚠️ TLD - tld_indicator - Composant d'Indicateur

📖 Introduction

tld_indicator est un Web Component qui permet d'afficher des messages d'information et d'alerte sous une forme visuelle claire.
Il prend en charge :

• Un mode "info" pour les notifications informatives.
• Un mode "alert" pour les avertissements importants.

---

⚡️ Installation / Prérequis

Ajoutez le fichier CSS pour un affichage correct :

<link rel="stylesheet" href="10_index.css">

---

🚀 Utilisation

🔹 Ajout du Composant dans une Page HTML

✅ Indicateur d'Information

<tld-indicator type="info">
    Ceci est un message d'information.
</tld-indicator>

⚠️ Indicateur d'Alerte

<tld-indicator type="alert">
    Attention ! Une erreur s'est produite.
</tld-indicator>

---

🎨 Style CSS

Ajoutez ce fichier CSS (10_index.css) pour assurer l'affichage correct du composant :

tld-indicator > div {
    padding: var(--padding-5);
}

/* Style pour les messages d'information */
tld-indicator[type="info"] > div > div {
    border: 3px solid var(--bleu-200);
    padding: 10px;
    background-color: var(--bleu-100);
    border-radius: var(--border-radius-lg);
    display: flex;
    align-items: center;
}

tld-indicator[type="info"] img {
    content: url(/img/icon/info.svg);
    filter: invert(31%) sepia(11%) saturate(2607%) hue-rotate(196deg) brightness(98%) contrast(93%);
    width: 30px;
    height: 30px;
    margin: var(--margin-3);
}

tld-indicator[type="info"] p {
    color: var(--bleu-700);
    line-height: 1.3em;
}

/* Style pour les messages d'alerte */
tld-indicator[type="alert"] > div > div {
    border: 3px solid var(--red-200);
    padding: 10px;
    background-color: var(--red-100);
    border-radius: var(--border-radius-lg);
    display: flex;
    align-items: center;
}

tld-indicator[type="alert"] img {
    content: url(/img/icon/alert-triangle.svg);
    filter: invert(26%) sepia(52%) saturate(2315%) hue-rotate(337deg) brightness(78%) contrast(93%);
    width: 30px;
    height: 30px;
    margin: var(--margin-3);
}

tld-indicator[type="alert"] p {
    color: var(--red-700);
    line-height: 1.3em;
}

---

📌 Détails du Code

🏗️ Définition de la Classe

tld_indicator étend tld_custom_elements et encapsule un message stylisé.

class tld_indicator extends tld_custom_elements {
    constructor() {
        super();
    }

    render() {
        this.innerHTML = `
        <div>
            <div>
                <img>
                <p>${this.innerHTML}</p> 
            </div>
        </div>
        `;
    }
}

---

📚 Exemples et Cas Pratiques

📌 Ajout Dynamique d'un Indicateur

const indicator = document.createElement("tld-indicator");
indicator.setAttribute("type", "info");
indicator.innerHTML = "Ce message a été ajouté dynamiquement.";
document.body.appendChild(indicator);

📌 Modifier Dynamiquement le Type

const alertIndicator = document.querySelector("tld-indicator");
alertIndicator.setAttribute("type", "alert");
alertIndicator.innerHTML = "Ce message est maintenant une alerte !";

---

🎯 Conclusion

tld_indicator est un Web Component simple et efficace pour afficher des messages d'information et d'alerte. Il offre une intégration facile et une expérience utilisateur améliorée.