Skip to content

3. Technical overview

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

Simple Breadcrumb

The "simple" model is a sequence of sections containing text and/or an image separated by a divider and a margin that applies to each side of the divider.


Breadcrumb arrow

The "arrow" model is a sequence of sections whose right part is finished with an arrow and whose size can be defined. The rear part of the section reproduces the shape of the previous section. It is possible to define a divider (line) that will be placed inside the front part of the section and will reproduce the shape of the arrow. It is possible to separate the sections via a margin.

You can define a border size for the sections that will be placed inside them. The first and last sections are assigned the defined values of the corner radius of the container, applying a proportional factor equal to the difference in height between the sections and the container, in order to maintain and guarantee a perfect parallelism between the sections and the container.The first and/or last section can be defined with or without an arrow.


Breadcrumb groupedButtons

The "groupedButtons" model has the same structure as the "arrow" model. It differs from the latter in its behavior when clicking on a section. Thus when a click is made, it changes its state to "current" and sets the other sections to the "standard" state. It thus behaves like a radio button. In addition, several properties are predefined in order to keep a logic in the design of this model (for example, the sections do not end with an arrow).

List of properties and their predefined values :

  • dynamicSize (box) : True
  • bgColor (box) : value of the color of the border of the box
  • margin (divider) : value of the size of the border of the box
  • padding horizontal (box) : 0
  • padding vertical (box) : 0
  • width (arrow) : 0%
  • borderSize (arrow) : 0
  • lastSectionWithArrow (arrow) : False)
  • FirstSectionWithArrow (arrow) : False
  • borderSize (section) : 0

For more information on these, see the chapter on the list of properties.

In addition, all the sections are set to "standard" type except the "current" type which corresponds to the section for which the identifier is stored in the instance (id of the last selected section).

All the values you could have set for these properties will be overridden by the predefined ones.