View Source Shino.UI.Sheet (shino v0.2.0-alpha.1)
Provides sheet related components.
Displays content that complements the main content of the screen.
Related components
Availale components
Components are divided into two categories: control components and style components.
Control components:
<Sheet.root />
<Sheet.trigger />
<Sheet.content />
<Sheet.close />
Style components:
<Sheet.header />
<Sheet.title />
<Sheet.description />
<Sheet.footer />
Opening and closing a sheet
For opening a sheet, you can use:
:default_open
attr of<Sheet.root />
component<Sheet.trigger />
component
For closing a sheet, you can use:
<Sheet.close />
component- the builtin user interactions:
- clicking outside of the sheet
- pressing ESC key
Controlling the side of a sheet
Use :side
attr of of <Sheet.root />
component.
Controlling the width of a sheet
By default, the sheet width is determined by its content.
This behaviour can be customized by applying classes to <Sheet.content />
component. For example:
<Sheet.content class="w-[400px] sm:w-[540px]">
<% # content %>
</Sheet.content>
Examples
A basic sheet
<Sheet.root :let={root} id="sheet-example-1" side="left">
<Sheet.trigger for={root}>
<.button>Open Basic Sheet</.button>
</Sheet.trigger>
<Sheet.content for={root}>
<Sheet.close for={root}>
<.button variant="secondary">Close</.button>
</Sheet.close>
Content
</Sheet.content>
</Sheet.root>
This example shows the main components to build a basic sheet. You can extend this piece of code to whatever you want based on sheet.
Using more style components
<Sheet.root :let={root} id="sheet-example-2" side="left">
<Sheet.trigger for={root}>
<.button>Open</.button>
</Sheet.trigger>
<Sheet.content for={root} class="w-full max-w-xs">
<Sheet.header>
<Sheet.title>Edit profile</Sheet.title>
<Sheet.description>
Make changes to your profile here. Click save when you're done.
</Sheet.description>
</Sheet.header>
<% # example content %>
<div class="my-8 flex flex-col space-y-3">
<.skeleton class="h-[125px] w-full rounded-xl" />
<div class="space-y-2">
<.skeleton class="h-4 w-full" />
<.skeleton class="h-4 w-3/4" />
</div>
</div>
<Sheet.footer>
<Sheet.close for={root}>
<.button>Cancel</.button>
</Sheet.close>
<.button>Save</.button>
</Sheet.footer>
</Sheet.content>
</Sheet.root>
A sheet as sidebar
<Sheet.root :let={root} id="sidebar-example-1" side="left">
<Sheet.trigger for={root}>
<.button>Open Sidebar</.button>
</Sheet.trigger>
<Sheet.content for={root} class="w-full max-w-xs mr-16 border-r">
<Sheet.close
for={root}
class="absolute left-full top-0 flex w-16 justify-center pt-5 opacity-100"
>
<button class="-m-2.5 p-2.5">
<span class="leading-none text-lg text-white">✕</span>
</button>
</Sheet.close>
Navigation
</Sheet.content>
</Sheet.root>
References
Summary
Functions
Renders a sheet close.
Renders a sheet content.
Renders a sheet description.
Renders a sheet footer.
Renders a sheet header.
The root contains all the parts of a sheet.
Renders a sheet title.
Renders a sheet trigger.
Functions
Renders a sheet close.
Attributes
for
(Shino.UI.Sheet.Root
) (required)class
(:any
) - Defaults tonil
.- Global attributes are accepted.
Slots
inner_block
(required)
Renders a sheet content.
Attributes
for
(Shino.UI.Sheet.Root
) (required)class
(:any
) - Defaults tonil
.
Slots
inner_block
(required)
Renders a sheet description.
Attributes
class
(:any
) - Defaults tonil
.- Global attributes are accepted.
Slots
inner_block
(required)
Renders a sheet header.
Attributes
class
(:any
) - Defaults tonil
.- Global attributes are accepted.
Slots
inner_block
(required)
The root contains all the parts of a sheet.
Attributes
id
(:string
) (required)default_open
(:boolean
) - Defaults tofalse
.side
(:string
) - Defaults to"left"
.class
(:any
) - Defaults tonil
.- Global attributes are accepted.
Slots
inner_block
(required)
Renders a sheet title.
Attributes
class
(:any
) - Defaults tonil
.- Global attributes are accepted.
Slots
inner_block
(required)
Renders a sheet trigger.
Attributes
for
(Shino.UI.Sheet.Root
) (required)class
(:any
) - Defaults tonil
.- Global attributes are accepted.
Slots
inner_block
(required)