navigation
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:
booldefault:
falseSize
Content width size.
type:
stringdefault:
mdvalues:
xs, sm, mdId
Id of SlideOver.
type:
stringdefault:
slideoverExamples
Basic example
default
1// Basic example
2
3@atoms.Button(
4 &atoms.ButtonBosons{
5 Title: "Open modal",
6 Attrs: hanariu.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: hanariu.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 }