ModalFooter
This component displays the lower part of Modal in which there are one or two buttons and space for additional elements.
With one full width button
1// Example with one full width button
2
3@molecules.ModalFooter(false) {
4 @molecules.ModalFooterButtons(false) {
5 @atoms.Button(
6 &atoms.ButtonBosons{
7 Size: "md",
8 Title: "Accept action",
9 Full: true,
10 },
11 )
12 }
13}Full width buttons
1// Example with two full width buttons
2
3@molecules.ModalFooter(false) {
4 @molecules.ModalFooterButtons(false) {
5 @atoms.Button(
6 &atoms.ButtonBosons{
7 Title: "Cancel",
8 Outline: true,
9 Full: true,
10 },
11 )
12 @atoms.Button(
13 &atoms.ButtonBosons{
14 Size: "md",
15 Title: "Accept action",
16 Full: true,
17 },
18 )
19 }
20}Example with two full width buttons and additional area
Slot
1// Example with two full width buttons and additional area
2
3@molecules.ModalFooter(false) {
4 @molecules.ModalFooterSlot(false) {
5 slot
6 }
7 @molecules.ModalFooterButtons(false) {
8 @atoms.Button(
9 &atoms.ButtonBosons{
10 Title: "Cancel",
11 Outline: true,
12 Full: true,
13 },
14 )
15 @atoms.Button(
16 &atoms.ButtonBosons{
17 Size: "md",
18 Title: "Accept action",
19 Full: true,
20 },
21 )
22 }
23}Example with two full width buttons and additional area in vartical variant
Slot
1// Example with two full width buttons and additional area in vertical variant
2
3@molecules.ModalFooter(true) {
4 @molecules.ModalFooterSlot(true) {
5 slot
6 }
7 @molecules.ModalFooterButtons(true) {
8 @atoms.Button(
9 &atoms.ButtonBosons{
10 Title: "Cancel",
11 Outline: true,
12 Full: true,
13 },
14 )
15 @atoms.Button(
16 &atoms.ButtonBosons{
17 Size: "md",
18 Title: "Accept action",
19 Full: true,
20 },
21 )
22 }
23}