Top
Customize Bottom Sheet
  • 23 Aug 2024
  • 1 Minute To Read
  • Dark
    Light
  • PDF

Customize Bottom Sheet

  • Dark
    Light
  • PDF

Article summary

After you have created the Bottom Sheet project and chosen a template, design and configure the Bottom Sheet.

Click the Bottom Sheet to configure the following,

Header

  • Under the Header section, edit the Header text, and change the font, font size, font weight, text alignment, text color, and bottom margin.
    Add a user property to personalize the experience for your end user.

    2022-12-02_17-37-44

  • Align the Header to the top or bottom, add any content block, or delete the Header section using the action bar
    header_bar_spacer

Body

  • On the Body of the Highlight, edit the text, font, font size, font weight, text alignment, text color, and bottom margin.
    Add user property to personalize the experience for your end user.
    design_body

  • Align the Body text to the top or bottom, add any content block, or delete the Body section using the action bar
    body_bar_bs

  • Increase, decrease, or delete the Topspacer using the action bar
    spacer_bar_bs

  • Customize the button that appears on your Highlight. You can choose to have one or two buttons, adjust the button width, alignment, height, radius, and the bottom margin
    button_config

Button

  • Click the BUTTON dropdown to customize the individual buttons. Change the button color, stroke of the button outline, text, font family, font size, font weight, and button action. Add user property to personalize the experience for your end user.

individual_button

The following are the Button Action configurations:

Button Action Description
Dismiss When the user clicks the button, the Pop-up is dismissed from the app screen
External Link When the user clicks the button, they are routed to the URL that is attached to the button
Deep Link When the user clicks the button, they are routed to the app screen within the same app that is attached to the button
  • Align the Buttons to the top or bottom, add any content block, or delete the Buttons using the action bar
    button_bar_bs

Layout

  1. In the navigation panel, click Layout to enable Overlay, change the Bottom Sheet color, and add Ripple Effect.

2023-02-06_16-48-23.png

your title goes here

Click the Edit icon to do the same.

edit_icon_bs

layout_bs

  1. Click Done.
    done_bs

The Bottom Sheet you create is automatically saved.

your title goes here

Was this article helpful?

Changing your password will log you out immediately. Use the new password to log back in.
First name must have atleast 2 characters. Numbers and special characters are not allowed.
Last name must have atleast 1 characters. Numbers and special characters are not allowed.
Enter a valid email
Enter a valid password
Your profile has been successfully updated.