LayX
Download
Getting started
Introduction Installation Quick Start CLI
Core Concepts
Overview
Customize
Customize
Layout System
Breakpoints Container Component Layout Component
Main
Base Typography
Components
Accordion Alert Breadcrumb Button Card Carousel Chart Dialog Draggable Form Footer Media Navbar Pagination Popover Sheet Section Tab Tooltip Window
Helpers
Flex and Grid Layout
Utilities
Border Color Display Flex Grid Height Margin Opacity Padding Position Shadow Width Z-index
Others
Background Dynamic Render Icon PWA Partial Render Scroll Driven Animation Smooth Scroll Syntax Highlighter Theme View Transition
About
Contributing License
Sheet

The Sheet component provides a versatile, draggable, and customizable interface for displaying secondary content or interactive elements. It supports smooth transitions, snap points, and flexible positioning for a modern user experience.

Examples

Here is an example of the Sheet component in action:

Sheet Demo
Snap Point 2
Snap Point 3
<sheet class="bottom"> <p>Content</p> </sheet>
Useful Info

Key details for using and customizing the Sheet component:

  • CSS Variables for Customization:
    • --edge-offset-x and --edge-offset-y: Controls the edge offset for the sheet; default is 0.
    • --padding-x and --padding-y: Manages internal padding within the sheet.
    • --radius: Defines the sheet's corner roundness.
    • --bg: Sets the sheet's background color.
    • --transition: Specifies the transition effect when the sheet enters or exits the viewport.
  • Positioning and Behavior:
    • Set the initial position using utility classes: .left, .right, .top, or .bottom.
    • The default position is fixed. Ensure any custom sheet element is similarly positioned.
  • Drag Functionality:
    • Add the .draggable-area class to specify a drag handle; otherwise, the entire sheet is draggable.
    • Sheets without a .draggable-area automatically apply user-select: none for enhanced usability.
  • Additional Options:
    • Use .rounded-all to round all corners.
    • Add .no-indicator to hide the drag indicator.
Options

The Sheet component provides the following configuration options:

  • selector (string): Default is .sheet. Targets elements to initialize as sheets.
  • draggableAreaSelector (string): Default is .draggable-area. Specifies the area used for dragging.
  • dragThreshold (number): Default is 0.4 (40% of the sheet). Determines when the sheet closes after dragging.
  • oppositeDirectionAllowed (number): Default is 0. Controls how far the sheet can be dragged in the opposite direction.
  • snapElementSelector (string): Default is .snap. Identifies elements to serve as snap points.
  • dragClose (boolean): Default is true. Enables closing the sheet by dragging.
  • keyboardClose (boolean): Default is true. Enables closing the sheet using the ESC key.
See Example