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
 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			  }

Let's dive deeper and connect!

Hanariu is brought to you by Pay For Done. We specialize in crafting products and services rooted in design systems. Join our community to discuss how we can support you.


© 2024 Pay For Done. All Rights Reserved. Website compliant with W3C validation.