Common options

This page documents some commonly appearing options across all the Hybiscus components.

Width

The width key supports defining the width using a fraction specified as a string e.g. 1/3. The values for the denominator supported are 2, 3, 4, 5, 6 and 12, whilst the numerator can be any value up to the value of the denominator.

If the width key is set to null (this must be the JSON value null, not a string representation 'null'), the component will attempt to fill all the available horizontal space.

Columns

If columns is set to null (this must be the JSON value null, not a string representation 'null'), all the components inside will stack horizontally together, automatically adjusting their widths to attempt to fit. In this mode, you can use the width option on child components to control their widths more precisely. For example, one component can be set to span 1/3 the width, and the other to be 2/3 the width.

Note If too many components are added, they may spill off the page out of view.

If a number is provided, the component is divided into as many columns, and each child component will automatically span exactly one column by default. The number value must be an integer between 1 and 12, inclusive. To ensure this behaviour occurs with child components, ensure the width option on child components is set to null or omitted.

Font size

The font size in various components can be overriden using the *_font_size keys. They can take on any of the following values (in increasing order):

• xs
• sm
• lg
• xl
• 2xl
• 3xl
• 4xl

Margin values

Many components support a number of options for margins such as horizontal_margin, vertical_margin, headings_margin, etc. In all such cases, the allowed values are:

• Any value between 1 and 12
• 14, 16, 20, 24, 28, and 32