BottomSheet

BottomSheet works thanks to the Overlay, which, in turn, is based on the store overlay. BottomSheet molecule is a retractable container, which can contain some application elements such as the menu, displayed on a transparent background.

BottomSheetBosons

Blocked
Is overlay can't be closed.
type: bool
default: false
Id
Id of BottomSheet.
type: string
default: bottomsheet

Examples

Basic example
default
 1// Basic example
 2
 3@atoms.Button(
 4  &atoms.ButtonBosons{
 5    Title: "Open bottom sheet",
 6    Attrs: gopress.Attrs{
 7      "data-x-data": "",
 8      "data-x-bind": "{ 'data-x-on:click'() { $store.overlay.show('bottomsheet') } }",
 9    },
10  },
11)
12@atoms.BottomSheet(&atoms.BottomSheetBosons{}) {
13  <div class="p-6">
14    @atoms.Button(
15      &atoms.ButtonBosons{
16        Size:  "md",
17        Title: "Accept action",
18        Full:  true,
19        Attrs: gopress.Attrs{
20          "data-x-bind": "{ 'data-x-on:click'() { $store.overlay.close() } }",
21        },
22      },
23    )
24  </div>
25}

BottomSheet 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.