ReferencesbsGroup

<sbsGroup>

A group of `<sideBySide>` components that share alignment and spacing

<sbsGroup> is a Sectional component that serves as a container element for multiple <sideBySide> components.

Attributes and Properties

Attributes for <sbsGroup>

Other (5)

[ _componentSizeList ]. List of margin widths between panels.

valign

text. Default vertical alignment for all panels.

valigns

[ textList ]. Per-panel vertical alignment values.

componentSize. Total rendered width of the side-by-side container.

[ _componentSizeList ]. List of widths for each panel.

Common to all components (9)
copy

reference. Create an independent copy of another component by reference. Enter a references a $name.

disabled

boolean. Default value: false. Whether this component is disabled and cannot be interacted with.

extend

reference. Extend another component by reference, inheriting its children and attributes. Enter a reference as $name.

fixed

boolean. Default value: false. Whether this component's value is fixed and cannot be modified.

fixLocation

boolean. Default value: false. Whether this component's location is fixed (preventing it from being moved while still allowing other modifications).

hide

boolean. Default value: false. Whether to hide this component from the rendered output.

isResponse

boolean. Default value: false. Whether this component is treated as a response for the purposes of assessment.

name

text. The name used to reference this component from elsewhere in the document.

styleNumber

integer. Default value: 1. The style number used to select this component's visual styling from the available style definitions.

Properties for <sbsGroup name="s">

Other (9)
$s.absoluteMeasurements

boolean. Whether children's widths are interpreted in absolute units.

$s.disabled

boolean. Whether this component is disabled and cannot be interacted with.

$s.fixed

boolean. Whether this component's value is fixed and cannot be modified.

$s.fixLocation

boolean. Whether this component's location is fixed (preventing it from being moved while still allowing other modifications).

$s.gapWidth

number. The gap width between panels as a percentage of the total container width.

$s.hidden

boolean. Whether this component is hidden from the rendered output.

$s.margins

[ number ]. Margins between adjacent children.

$s.valigns

[ text ]. Vertical alignment of each child.

$s.widths

[ number ]. The list of child widths.

Common to all components (4)
$s.doenetML

text. The DoenetML source code that produced this component.

$s.hide

boolean. Whether to hide this component from the rendered output.

$s.isResponse

boolean. Whether this component is treated as a response for the purposes of assessment.

$s.styleNumber

integer. The style number used to select this component's visual styling from the available style definitions.

Examples

Example: <sbsGroup> without attributes

In this example, the <sbsGroup> container is used without any additional attributes. The default margin between elements is 0.

Attribute Examples

Attribute Example: margins

In this example, two <sideBySide> components are grouped together in a unit with the <sbsGroup> container. The margins attribute provides a margin that applies to both <sideBySide> elements.

Attribute Example: width / widths

The widths attribute can be used in the <sbsGroup> container to set the widths for all of the <sideBySide> components contained in the group.

sampleRandomNumberssection