View Source Shino.UI.Sheet (shino v0.1.0-alpha.0)

Provides sheet related components.

Displays content that complements the main content of the screen.

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 (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

Renders a sheet content.

Attributes

  • for (Shino.UI.Sheet.Root) (required)
  • class (:string) - Defaults to nil.

Slots

  • inner_block (required)

Renders a sheet description.

Attributes

  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

Renders a sheet footer.

Attributes

  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

Renders a sheet header.

Attributes

  • class (:string) - Defaults to nil.
  • 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 to false.
  • side (:string) - Defaults to "left".
  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

Renders a sheet title.

Attributes

  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

Renders a sheet trigger.

Attributes

  • for (Shino.UI.Sheet.Root) (required)
  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)