Skip to content

FR 3. Aperçu technique

Gary Criblez edited this page Feb 13, 2020 · 1 revision

Breadcrumb simple

Le modèle « simple » est un enchaînement de sections contenant du texte et/ou une image séparée par un divider et une marge qui s’applique sur chacun des côtés du divider.


Breadcrumb arrow

Le modèle « arrow » est un enchaînement de sections dont la partie droite est terminée par une pointe (flèche) et dont on peut définir la taille. La partie arrière de la section reproduit la forme de la section précédente. Il est possible de définir un divider (trait) qui viendra se plaquer à l’intérieur de la partie avant de la section et reproduira la forme de la flèche. Il est possible de séparer les sections via une marge.

On peut définir une taille de bordure aux sections qui sera placée à l’intérieur de celles-ci. La première et la dernière section se voit appliquer les valeurs définies des arrondis d’angle (corner radius) du container, en leur appliquant un facteur proportionnel égal à la différence de hauteur entre les sections et le container, ceci afin de maintenir et garantir un parfait parallélisme entre section et container. La première et/ou la dernière section peut être définies avec ou sans pointe (flèche).


Breadcrumb groupedButtons

Le modèle « groupedButtons » possède la même structure que le modèle « arrow ». Il diffère de ce dernier par son comportement lors d'un clic sur une section. Ainsi lors d'un clic il change son état à "current" et définit les autres sections à l'état "standard. Il se comporte ainsi comme un bouton radio. Par ailleurs, plusieurs propriétés sont prédéfinies afin de conserver une logique dans le design de ce modèle (par exemple, les sections ne se terminent pas en forme de flèche).

Propriétés et valeurs prédéfinies :

  • dynamicSize (box) : True
  • bgColor (box) : valeur de la couleur de la bordure de la box
  • margin (divider) : valeur de la taille de la bordure de la box
  • padding horizontal (box) : 0
  • padding vertical (box) : 0
  • width (arrow) : 0%
  • borderSize (arrow) : 0
  • lastSectionWithArrow (arrow) : False)
  • FirstSectionWithArrow (arrow) : False
  • borderSize (section) : 0

Pour plus d’information sur ces celles-ci, voir le chapitre sur la liste des propriétés.

De plus, toutes les sections sont passés en type « standard » excepté celle de type « current » qui correspond à la section dont l’identifiant est stocké dans l’instance (id de la dernière section sélectionnée).

Toutes les valeurs que vous auriez pu définir pour ces propriétés seront surchargés par celles prédéfinies.