| Scroll Ignore | ||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||
|
Présentation - Widget Séparateur
Le widget séparateur a pour but de faire de la mise en forme de votre vue "Météo des services".
Il est possible de modifier les aspects suivants du widget séparateur :
- Sa taille et sa position,
- La position du texte,
- Son alignement horizontal,
- Son texte et la taille de son texte,
- La couleur de son texte.
| Info |
|---|
Pour plus d'informations sur comment définir ces aspects, veuillez vous référer à la page suivante : FOR-MERGE - 002.5 - SEF-8970 - Widget Séparateur - Edition - Météo |
Dans l'exemple ci-dessous, le widget séparateur est juste en dessous de le du widget "titre", et occupe toute la largeur de la vue.
| Panel | ||||
|---|---|---|---|---|
| ||||
Description
Le texte
Le comportement du texte suit les règles suivantes :
- Le texte n'est pas limité en taille,
- mais s'il si le texte n'a pas la place de s'afficher, il sera tronqué ( avec une "ellipsis" : une série de trois petits points ) pour éviter un retour à la ligne.
- Il sera sur une seule ligne.
- La taille de la police va se définir automatiquement en fonction de la largeur de la vue ( c.a.d taille Taille du navigateur, ou taille d'affichage dans un autre site web ) et du pourcentage de zoom de la police paramétré.
- Pour pouvoir être responsive, la taille de police du texte s'adapte à la taille de la vue afin de pouvoir être affiché affichée sur toutes les tailles d'écran.
Cela permet une meilleure intégration sur un dans le portail tiers d'un site web.
Elle est adaptée de manière façon à pouvoir mettre environ 90 55 lettres en majuscules dans dans le texte avant que le texte du titre ne dépassecelui-ci ne dépasse ( si le pourcentage de zoom de la police est paramétré à 100% et que la taille de la partie gauche et droite font 10% de la vue ).
La police utilisée n'a pas une de taille de caractère fixe, donc suivant les lettres présentes dans votre texte, le nombre de caractères affichés pourra être différent de 90 55 ( Si vous utilisez des i minuscules par exemple ). - Nous avons volontairement fait le choix de ne se baser que uniquement sur la taille de la vue et pas non celle du widget.
- Pour pouvoir être responsive, la taille de police du texte s'adapte à la taille de la vue afin de pouvoir être affiché affichée sur toutes les tailles d'écran.
| Note | ||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Voici une liste de taille de "font" selon la taille de votre navigateur
9 | 400 | 9 | 300 | 9 |
|
| Info |
|---|
Nous prévoyons une évolution ou vous pourrez choisir la taille de la police de référence ( prévu dans une prochaine version ). |
Dans l'exemple 2:
- la La valeur du texte du widget "séparateur" est trop longue pour qu'il puisse s'afficher en entier.
- la La fin du titre texte est alors remplacée par "..." pour ne pas dépasser.
| Panel | ||||
|---|---|---|---|---|
| ||||
Dans les exemples 1 et 2, le widget "séparateur" est configuré pour prendre toute la largeur de la vue.
Dans l'exemple 3:
- la La largeur du widget vaut 15 cases, pour un nombre totale total de 60 cases dans la vuegrille.
| Panel | ||||
|---|---|---|---|---|
| ||||
Changement de l'alignement du texte
Le texte peut être aligné :
- au Au centre ( Par défaut ).
- à À gauche.
à - À droite.
Les 3 exemples ci-dessous montrent les 3 différents positionnements :
| Panel | ||||
|---|---|---|---|---|
| ||||
| Panel | ||||
|---|---|---|---|---|
| ||||
| Panel | ||||
|---|---|---|---|---|
| ||||
Dimension de la zone de texte
Le widget "séparateur" est divisé en trois parties :
| Panel |
|---|
|
| Scroll Ignore |
|---|
Par défaut, le début et la fin du texte sont tous les deux positionnés à 10% du bord du widget.
Vous allez donc pouvoir choisir le pourcentage occupé par le séparateur :
- pour le côté gauche,
- et le côté droit.
Le reste sera donc occupé par la zone de texte.
Pour les deux exemples ci-dessous, le widget séparateur à cette configuration :
- Il prend toute la place sur la page.
- Le texte est aligné au centre.
la partie gauche et droite utilise 10% chacune de la taille du widget. Le reste sera occupé par la partie réservée au texte.
Exemple 1 : Les valeurs de la taille définies pour la zone de début et de fin du texte sont élevées ( 40 % chacune ) :partie gauche et la partie droite sont paramétrées à 37% chacune :
- Les les barres de séparations, se situant des deux côtés du texte du Widget, prennent la majeure partie de la taille de la page.
| Panel |
|---|
Dans cet exemple, les barres de séparations, se situant des deux côtés du texte du Widgetwidget, ne prennent qu'une petite partie de la taille de la page.
| Panel |
|---|
Exemple 3 : La partie de gauche n'est pas affichée et la valeur de la taille de la partie droite est paramétrée à 75% :
Dans cet exemple, seule la barre de séparation se situant du côté droit du texte du widget prend une grande partie de la taille de la page.
| Panel |
|---|
Exemple 4 : La partie de droite n'est pas affichée et la valeur de la taille de la partie de gauche est paramétrée à 75% :
Dans cet exemple, seule la barre de séparation se situant du côté gauche du texte du widget prend une grande partie de la taille de la page.
| Panel |
|---|
Changement de la couleur du texte
Chaque séparateur peut avoir sa propre couleur :
- La couleur par défaut du texte du widget titre "séparateur" est noir ( si vous ne la précisez pas ),
- mais la couleur par défaut pourra avoir était être changée par l'administrateur Shinken dans la configuration du module de météo des services.
Dans l'exemple suivant, nous choisissons le par exemple modifions la couleur du texte en vert ( text_color : green ou text_color : #008000 ou text_color : rgb(0,128,0) )
| Panel |
|---|
| Info |
|---|
Pour plus d'informations sur le changement de couleur du texte du widget séparateur, veuillez vous référer à la page suivante : FOR-MERGE - 002.5 - SEF-8970 - Widget Séparateur - Edition - Météo |
Comportement du widget lors d'un redimensionnement du navigateur
Exemples de redimensionnement
| Panel | ||||
|---|---|---|---|---|
| ||||
Sur cette capture d'écran, la largeur du navigateur a été réduite à 600 pixels et la configuration de la météo n'a pas été changée, mais la taille de la police d'écriture est passée à 10 9 pixels :
| Panel | ||||
|---|---|---|---|---|
| ||||
| Note | ||||
Il existe une taille minimale pour la police d'écriture du widget séparateur qui est de 9 pixels, en dessous de cette taille, on décrète que les textes ne sont plus lisibles. |