<PopOutContent>

Skip past table of contents

Search

Table of contents

Start of documentation content

Displays content in a modal. Useful for displaying a lot of text.

Use of <PopOutContent>

<PopOutContent

  id="myPopOutContent"

  buttonTextHtml={{

    en: 'Read <abbr title="terms and conditions">T&amp;Cs</abbr>',

  }}

  modalHeadingHtml={{ en: 'Terms and conditions' }}

  modalContentHtml={{ en: '<p>A lot of text</p> ... ' }}

/>

<PopOutContent>'s props

PropAboutType
buttonTextHtml

Localisable HTML: popup button content

E.g.

{
  en: 'Click to read <abbr title="terms and conditions">T&amp;C\'s</abbr>',
}
LocalisedHtml
modalContentHtml

Localisable HTML: popup modal body content

E.g.

{
  en: 'A lot of terms and conditions content',
}
LocalisedHtml
modalHeadingHtml

Localisable HTML: popup modal heading content.

E.g.

{
  en: 'Terms and conditions',
}
LocalisedHtml
id

Component Id.

Must be unique within the form.

string
meta

Arbitrary metadata on this node.

This is useful when developing custom controls as it allows you to pass down metadata/extensions.

string
hasChildrenById

Non-editable.

Used to indicate that this component doesn't have children.

false
hasTagsById

Non-editable.

Used to indicate that this component isn't a form field with tags by id.

false
isFormField

Non-editable.

Used to indicate that this component isn't a form field.

false
isMultichoice

Non-editable.

Used to indicate that this component isn't a multichoice form field like <Select>, <Radios> or <Checkboxes>.

false
type

Non-editable.

Type of component of "PopOutContent".

"PopOutContent"