Modal

/libs/granite/ui/components/foundation/layouts/modal

The layout to render the modal. It implements foundation-toggleable vocabulary.

It has the following content structure at the layout resource:

granite:LayoutsModal

closablebooleanel

1. true

true to render the build-in close button (usually at the top right of the modal).

typestringel

1. default

1. default
2. error
3. notice
4. success
5. help
6. info

The type of the modal.

formStylestring

1. vertical

1. vertical
2. aligned

The layout style of the form. This property only makes sense when the main component is a form.

vertical

The form fields (and their labels) are laid out in vertical manner.

aligned

The each form field is laid out side-by-side with its label.

It has the following content structure at the main resource:

granite:LayoutsModalMain

jcr:titlestring

mandatory

i18n

The modal title.

footer

The footer area of the modal.

The body of the modal is specified using ItemDataSource.

Each footer item can be any component. It supports a standard layoutConfig node with the following properties:

granite:LayoutsModalFooterItemLayoutconfig

closebooleanel

true to indicate that this item is used to close the modal.

Example:

+ mymodal
  - sling:resourceType = "granite/ui/components/foundation/form"
  - jcr:title = "My Modal"
  + layout
    - sling:resourceType = "granite/ui/components/foundation/layouts/modal"
    - formStyle = "vertical"
    - closable = true
    - type = "default"
  + items
    + item1
      - sling:resourceType = "granite/ui/components/foundation/container"
    + item2
      - sling:resourceType = "granite/ui/components/foundation/container"
  + footer
    + close
      - sling:resourceType = "granite/ui/components/foundation/button"
      - text = "Cancel"
      + layoutConfig
        - close = true
    + submit
      - sling:resourceType = "granite/ui/components/foundation/form/submit"
      - text = "Save"