Modal Content Sections
The content for a modal UI!
The array of sections
content are rendered in a vertical stack in a modal. You can stack as many content sections as you like.
No worries if your content is too tall. As it grows, it becomes scrollable, and will scroll under the button section of the modal.
Content Types
Title: Title formatted text
Body: Body formatted text
Images: either symbols from the system (SF Symbols), or image files built into your app bundle.
Buttons are not valid in the sections
array in the modal config, and should only be in the buttons
section.
Visual Breakdown
Section Config
The following parameters are valid in any section.
topSpacingScale
[float, optional]: How much space to include above this section, as a multiple of the system default spacing. Defaults to 1.0 if omitted.pageSectionType
[string, required]: The type of this section. One oftitle
,body
orimage
.pageSectionData
[object, required]: The data object specific to the type specified inpageSectionType
. See below for specififications.
Title Section Config
Title sections are larger bold text sections, centered by default, and in the primaryTextColor. The following parameters are available to customize a title section:
title
[string, required]: The title textscaleFactor
[float, optional]: A float to scale the text size up or down from the default title text size. Defaults to 1.0 of omitted (no scaling).bold
[bool, optional]: Specifies if the text bold or regular style. Defaults to true for titles if omitted.centerText
[bool, optional]: Specifies if the text is centered. Defaults to true for titles if omitted.usePrimaryColor
[bool, optional]: Specifies if the text uses the primary or secondary text color from the theme. Defaults to true for title sections if omitted.width
[float, optional]: Specifies the max width of the text element in points. Text won't exceed margins, regardless of value. Optional and will choose reasonable values if omitted.
Body Section Config
Body sections are smaller non-bold text sections, centered by default, and in the secondaryTextColor The following parameters are available to customize a body section:
bodyText
[string, required]: The body textscaleFactor
[float, optional]: A float to scale the text size up or down from the default title text size. Defaults to 1.0 of omitted (no scaling).bold
[bool, optional]: Specifies if the text bold or regular style. Defaults to false for body sections if omitted.centerText
[bool, optional]: Specifies if the text is centered. Defaults to true for body sections if omitted.usePrimaryColor
[bool, optional]: Specifies if the text uses the primary or secondary text color from the theme. Defaults to false for body sections if omitted.width
[float, optional]: Specifies the max width of the text element in points. Text won't exceed margins, regardless of value. Optional and will choose reasonable values if omitted.
Image Section Config
Images have their own documentation page.
Example Content Config
See the sample config for an example of all content types in an array, forming a content stack.
Last updated