Modal
The modal works thanks to the Overlay atom, which in turn is based on the store overlay. The modal molecule is the central window, displayed on a transparent background. The modal contains the space where you can user ModalHeader and ModalFooter. There can be any content in between.
ModalBosons
Blocked
Is overlay can't be closed.
type:
bool
default:
false
Widthauto
Is width has auto value.
type:
bool
default:
false
Preview
Preview mode for documentation.
type:
bool
default:
false
Id
Id of Modal.
type:
string
default:
modal
Examples
Default modal
default
Deactivate account
Are you sure you want to deactivate your account? All of your data will be permanently removed from our servers forever. This action cannot be undone
1// Default modal example with ModalHeader and ModalFooter
2
3@atoms.Button(
4 &atoms.ButtonBosons{
5 Title: "Open modal",
6 Attrs: gopress.Attrs{
7 "data-x-bind": "{ 'data-x-on:click'() { $store.overlay.show('modal') } }",
8 },
9 },
10)
11@atoms.Modal(&atoms.ModalBosons{}) {
12 @molecules.ModalHeader("horizontal") {
13 @molecules.ModalHeaderClose("Close")
14 @molecules.ModalHeaderHero(false) {
15 @protons.IconHero(
16 &protons.IconHeroBosons{
17 Size: "lg",
18 },
19 ) {
20 @icons.IconTimes()
21 }
22 }
23 @molecules.ModalHeaderContent("Deactivate account", "left") {
24 Are you sure you want to deactivate your account? All of your data will be ...
25 }
26 }
27 @molecules.ModalFooter(false) {
28 @molecules.ModalFooterButtons(false) {
29 @atoms.Button(
30 &atoms.ButtonBosons{
31 Size: "md",
32 Title: "Accept action",
33 Full: true,
34 Attrs: gopress.Attrs{
35 "data-x-bind": "{ 'data-x-on:click'() { $store.overlay.close() } }",
36 },
37 },
38 )
39 }
40 }
41}
The modal supports locking the scroll position, and additionally, to avoid the width jump effect, set:
1body {
2 overflow-y: scroll;
3 }