Modal Content Sections
The content for a modal UI!
Last updated
The content for a modal UI!
Last updated
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.
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.
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 of title, body or image.
pageSectionData [object, required]: The data object specific to the type specified in pageSectionType. See below for specififications.
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 text
scaleFactor [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 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 text
scaleFactor [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.
Images have their own documentation page.
See the sample config for an example of all content types in an array, forming a content stack.
