<sideBySide>
<sideBySide> is a Sectional component that takes enclosed sectional components and renders them in a sideBySide horizontal format.
Attributes and Properties
| Attribute | Type | Values |
|---|---|---|
margins = "…" | [ number ] | |
valign = "…" | ||
valigns = "…" | [ text ] | |
width = "…" | ||
widths = "…" | [ number ] |
| Property | Type |
|---|---|
$s.absoluteMeasurements | boolean |
$s.gapWidth | number |
$s.margins | [ number ] |
$s.valigns | [ text ] |
$s.widths | [ number ] |
Example: Default <sideBySide>
Three examples of different components placed in a <sideBySide> are illustrated. By default, portions are assigned an equal percentage width, with no margin. These settings can be modified with the widths and margins attributes.
Example: widths
The widths attribute assigns a width to each side-by-side portion by percent.
Example: margins
The margins attribute assigns a margin between each side-by-side portion by percent. When widths and margins attributes are both applied, margins are applied first.