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
- true
true
to render the build-in close button (usually at the top right of the modal).
-
typestringel
- default
- default
- error
- notice
- success
- help
- info
The type of the modal.
-
formStylestring
- vertical
- vertical
- 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.
-
closablebooleanel
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"