Home

Guides

Editor

Components

Actions

Conditions

Components

Basic

Container

Text

Image

Icon

Button

Forms

Local State

Text Input

Date Picker

Logic

Conditional Logic

Conditional Switch Logic

Modal

Sheet

Pager

Tabbed Pager

Data

Data Loader

Repeating Item

Countdown Timer

Data Transformer

Date Elements

Paging Data Loader

Contentful

Rich Text

Sheet Component Documentation

Overview

The Sheet Component is a sliding panel that appears from the bottom of the screen, offering a space to display additional content or actions without navigating away from the current screen. It is commonly used for menus, options or quick actions in mobile and web applications.


Key Features

  • Slide-Up Panel

  • Customisable Height

  • Interactive and Dismissible


Component Fields

1. Anchor

2. Trigger ID

3. Content

4. Size

Options include:

  • Full

  • Half

  • Calculated

5. Sheet Color

Click the field to select from the available sheet color options. These are pre-set in Colors and can be edited in this section to match your app's theme.

Preview

6. Show Sheet Content


Best Practices for Using the Sheet Component

  • Use for Quick Actions or Short Content:The sheet works best for brief actions or content that users can engage with without leaving the current screen, such as settings, filters, or action buttons.

  • Ensure Easy Dismissal:Provide clear ways for users to close the sheet, either by tapping outside the panel or using a close button.

  • Test for Mobile:Ensure the sheet's size and behavior work well on various mobile devices.