navigation
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:
booldefault:
falseId
Id of BottomSheet.
type:
stringdefault:
bottomsheetExamples
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 }