Sheet

Extends the Dialog component to display content that complements the main content of the screen.

Source Tailwind CSS JavaScript

Examples

Sheet Sides

package showcase import ( "github.com/templui/templui/components/button" "github.com/templui/templui/components/sheet" ) templ SheetSides() { <div class="grid grid-cols-2 gap-4"> // Top Sheet @sheet.Sheet(sheet.Props{ Side: sheet.SideTop, }) { @sheet.Trigger() { @button.Button(button.Props{ Variant: button.VariantOutline, Class: "w-full", }) { Open from Top } } @sheet.Content() { @sheet.Header() { @sheet.Title() { Top Sheet } @sheet.Description() { This slides in from the top. } } <div class="px-4 py-6"> <p class="text-sm">Content for the top sheet.</p> </div> @sheet.Footer() { @sheet.Close() { @button.Button() { Close } } } } } // Right Sheet @sheet.Sheet(sheet.Props{ Side: sheet.SideRight, }) { @sheet.Trigger() { @button.Button(button.Props{ Variant: button.VariantOutline, Class: "w-full", }) { Open from Right } } @sheet.Content() { @sheet.Header() { @sheet.Title() { Right Sheet } @sheet.Description() { This slides in from the right. } } <div class="px-4 py-6"> <p class="text-sm">Content for the right sheet.</p> </div> @sheet.Footer() { @sheet.Close() { @button.Button() { Close } } } } } // Bottom Sheet @sheet.Sheet(sheet.Props{ Side: sheet.SideBottom, }) { @sheet.Trigger() { @button.Button(button.Props{ Variant: button.VariantOutline, Class: "w-full", }) { Open from Bottom } } @sheet.Content() { @sheet.Header() { @sheet.Title() { Bottom Sheet } @sheet.Description() { This slides in from the bottom. } } <div class="px-4 py-6"> <p class="text-sm">Content for the bottom sheet.</p> </div> @sheet.Footer() { @sheet.Close() { @button.Button() { Close } } } } } // Left Sheet @sheet.Sheet(sheet.Props{ Side: sheet.SideLeft, }) { @sheet.Trigger() { @button.Button(button.Props{ Variant: button.VariantOutline, Class: "w-full", }) { Open from Left } } @sheet.Content() { @sheet.Header() { @sheet.Title() { Left Sheet } @sheet.Description() { This slides in from the left. } } <div class="px-4 py-6"> <p class="text-sm">Content for the left sheet.</p> </div> @sheet.Footer() { @sheet.Close() { @button.Button() { Close } } } } } </div> }

External Trigger

Installation

templui add sheet

Load the script once in your layout:

<head> @sheet.Script() </head>

API Reference

Required parameter

Hover for description

Sheet

Name	Type	Default
`ID` Optional HTML id for the sheet root. Useful for external targeting.	`string`	`""`
`Class` Additional CSS classes to apply to the sheet wrapper	`string`	`""`
`Attributes` Additional HTML attributes to apply to the sheet wrapper	`templ.Attributes`	`nil`
`Side` Side from which the sheet slides in (top, right, bottom, left)	`Side`	`SideRight`
`Open` Whether the sheet should be open initially	`bool`	`false`
`DisableClickAway` Disable closing the sheet when clicking the backdrop	`bool`	`false`
`DisableESC` Disable closing the sheet with the ESC key	`bool`	`false`

Trigger

Name	Type	Default
`ID` Unique identifier for the trigger element	`string`	`""`
`Class` Additional CSS classes to apply to the trigger	`string`	`""`
`Attributes` Additional HTML attributes to apply to the trigger	`templ.Attributes`	`nil`
`For` Optional sheet root id for external triggers outside Sheet wrapper	`string`	`""`

Content

Name	Type	Default
`Class` Additional CSS classes to apply to the content container	`string`	`""`
`Attributes` Additional HTML attributes to apply to the content container	`templ.Attributes`	`nil`
`HideCloseButton` Hide the close X button in the top right corner	`bool`	`false`
`Side` Side from which the sheet slides in. Usually inherited from Sheet.	`Side`	`SideRight`

Header

Name	Type	Default
`ID` Unique identifier for the header element	`string`	`""`
`Class` Additional CSS classes to apply to the header	`string`	`""`
`Attributes` Additional HTML attributes to apply to the header	`templ.Attributes`	`nil`

Title

Name	Type	Default
`ID` Unique identifier for the title element	`string`	`""`
`Class` Additional CSS classes to apply to the title	`string`	`""`
`Attributes` Additional HTML attributes to apply to the title	`templ.Attributes`	`nil`

Description

Name	Type	Default
`ID` Unique identifier for the description element	`string`	`""`
`Class` Additional CSS classes to apply to the description	`string`	`""`
`Attributes` Additional HTML attributes to apply to the description	`templ.Attributes`	`nil`

Footer

Name	Type	Default
`ID` Unique identifier for the footer element	`string`	`""`
`Class` Additional CSS classes to apply to the footer	`string`	`""`
`Attributes` Additional HTML attributes to apply to the footer	`templ.Attributes`	`nil`

Close

Name	Type	Default
`ID` Unique identifier for the close button	`string`	`""`
`Class` Additional CSS classes to apply to the close button	`string`	`""`
`Attributes` Additional HTML attributes to apply to the close button	`templ.Attributes`	`nil`

Menu

Getting Started

Components

Sheet

Edit profile

Examples

Top Sheet

Right Sheet

Bottom Sheet

Left Sheet

External Trigger

Installation

API Reference

Sheet

Trigger

Content

Header

Title

Description

Footer

Close