Bottom Sheet
A Bottom sheet component lets you display content that can be scrolled up from the bottom of the screen. You can add any child component(s) on the bottom sheet as per the use case(Like Buttons, Image, View etc).
Adding a Bottom Sheet
- Select the Bottom Sheet component from the Components drawer. You can open the list of components by clicking the + button next to Components.
- Select the added component in the Components tree.
- Add child component(s) to it such as View, Button, Image or Image Background etc.
Configuration Properties
| Property | Description |
|---|---|
| Component name | An optional descriptive name for the component. If the name is not "Bottom Sheet", it will appear as a comment above this component in the generated code. |
| Initial snap index | Index of the snap point to be used as the initial point |
| Show handle | Whether to show the top sheet handle or not |
| Handle color | Color of the top handle |
| Top border radius | Border radius of top corners |
| Border width | Width of bottom sheet borders |
| Border color | Color of bottom sheet borders |
| Show Vertical Scroll Indicator | When true, shows a vertical scroll indicator. The default value is true. |
| Bounce | When true, the scroll view bounces when it reaches the end of the content if the content is larger then the scroll view along the axis of the scroll direction. |
Data Configuration
| Property | Description |
|---|---|
| Snap points | This is an array of numerical values, either numbers or percentages. Each number represents a snap point where the Bottom sheet snaps. They represent the distance from the top. The default snap points are : ["10%", "50%", "80%"] |
Updated 22 days ago