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
Basic
| 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. |
| Show handle | Whether to show the top sheet handle or not |
| Handle color | Color of the top handle |
| Initial snap position | Position of the snap point to be used as the initial point |
| Top snap position | Top position where bottom sheet can snap to. A numerical value that represents distance from the top |
| Middle snap position | Middle position where bottom sheet can snap to. A numerical value that represents distance from the top |
| Bottom snap position | Bottom position where bottom sheet can snap to. A numerical value that represents distance from the top |
| 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. |
Advanced
| Property | Description |
|---|---|
| Initial snap index | Index of the snap point to be used as the initial point. Overrides initial snap position |
| Enable over-scroll | Allow sheet to be dragged beyond lowest snap point |
| Friction | Factor of resistance when the gesture is released. A value of 0 offers maximum acceleration, whereas 1 acts as the opposite |
| Top inset | This value is useful if you want to take into consideration safe area insets when applying percentages for snapping points |
Data Configuration
| Property | Description |
|---|---|
| Custom 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%"] |
Triggers
| Trigger | Description |
|---|---|
| On Settle | Runs the Actions when the bottom sheet settles on a snap point |
Updated 2 months ago