SlideOver

SlideOver works thanks to the Overlay, which in turn is based on store overlay. SlideOver is a side, right, retractable container in which there may be some elements of the application, displayed on a transparent background.

SlideOverBosons

Blocked
Is overlay can't be closed.
type: bool
default: false
Size
Content width size.
type: string
default: md
values: xs, sm, md
Id
Id of SlideOver.
type: string
default: slideover

Examples

Basic example
default
 1// Basic example
 2
 3@atoms.Button(
 4  &atoms.ButtonBosons{
 5    Title: "Open modal",
 6    Attrs: gopress.Attrs{
 7      "data-x-data": "",
 8      "data-x-bind": "{ 'data-x-on:click'() { $store.overlay.show('slideover') } }",
 9    },
10  },
11)
12@atoms.SlideOver(&atoms.SlideOverBosons{}) {
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}

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