DGE text#
Un composant pour afficher facilement du texte.
Liste des propriétés#
Il existe 4 grands types de propriétés:
- "String": chaîne de caractères (ex.:
title="Un titre"
) - "Integer": Un nombre (ex.:
decimal="3"
) - "Boolean": une valeur binaire (vrai ou faux): "true"/"false" (ex.:
localcss="true"
) - "Objects": ensemble de couples clé/valeur inclus dans une propriété (Ex.:
property="att1:value1;att2:value2;att3:value3..."
). Dans ce cas, vous trouverez dans la documentation un tableau qui précise la nature de chaque attribut attendu. Pour certains attributs, ils peuvent aussi exister sous forme de propriété individuelle (ex:attribution="text:DataGrandEst"
est équivalent àattributiontext="DataGrandEst"
)
Il est important de respecter le type de valeur attendu par les propriétés et attributs pour le bon fonctionnement des composants web.
attribution#
Propriété | Type | Défaut |
---|---|---|
attribution | Object | false |
Attribut | Type | Défaut | Propriété équivalente | Description |
---|---|---|---|---|
text | String | null | attributiontext | Texte à afficher comme support au lien vers le site indiqué (cf. attribut url ) |
icon | String | null | attributionicon | Nom de l'îcon (cf. bibliothèque "Bootstrap Icons v1.7.x") |
prefix | String | null | attributionprefix | Texte prefixant l'attribut text |
url | String | null | attributionurl | Lien vers un site internet |
size | String | 1rem | attributionsize | Taille de l'icon. L'unité doit être précisée (ex.: "1.5rem" ou "18px") |
color | String | #000 | attributioncolor | Couleur de l'icon (ex.: "#393" ou "#99564c" ou "rgba(50,200,35,0.6)") |
title | String | text | attributiontitle | Titre du texte ou de l'icon qui appraît au survol par la souris |
Sources des données utilisées par le composant. Cette propriété est de type object et se compose d'une liste d'attributs permettant de préciser le texte ou l'icon à afficher, l'URL, etc.
Exemple: attribution="text:DataGrandEst;url:https://www.datagrandest.fr"
id#
Propriété | Type | Défaut |
---|---|---|
id | String | "dge-text" |
Identifiant du composant. Il peut être utilisé pour appliquer une mise en forme spécifique via du CSS.
Exemple: id="dge-text-1"
localcss#
Propriété | Type | Défaut |
---|---|---|
localcss | Boolean | false |
Indique si le composant utilise des fichiers CSS locaux ou distants. Ce paramètre permet notamment de pouvoir utiliser le composant dans un contexte hors ligne.
Par défaut, les fichiers CSS des bibliothèques Bootstrap et Bootstrap Icons sont chargées via les liens:
- https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css
- https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css
Si la propriété localcss est activée (localcss="1"
) alors le composant essaie de charger les fichiers suivants:
- "./bootstrap/css/bootstrap.min.css"
- "./bootstrap-icons/bootstrap-icons.css"
- "./global.css"
Exemple: localcss="1"
text#
Propriété | Type | Défaut |
---|---|---|
text | String | null |
Text à afficher dans le composant.
Exemple: text="Texte de mon composant..."
title#
Propriété | Type | Défaut |
---|---|---|
title | String | null |
Titre du composant.
Exemple: title="Titre de mon composant DGE text"
L'utilisation des slots
#
Le contenu du composant peut également être défini via un slot
. Cela permet d'ajouter du code HTML pour mettre en forme le conteu du composant.
Pour cela, il faut ajouter entre les balises du composant un élément HTML possédant une propriété slot="text"
. Cet élément devra contenir à son tour le code HTML a afficher dans le composant.
Exemple:
1 2 3 4 5 6 7 8 9 |
|
Exemples#
Pour plus de détails, vous pouvez consulter la page de démo.