A Bottom sheet component lets you display content that can be swiped up or down 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).
- 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.
Style properties allow you to customize the look and feel of the component. Combinations of styles applied to components can be saved as Stylesheets to easily reuse styles throughout your app. Styles can also be set dynamically using Variables. To learn more about all the different styling properties and how they work, take a look at Intro to Styling.
|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.
|Whether to show the top sheet handle or not
|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
|Width of bottom sheet borders
|Color of bottom sheet borders
|Show Vertical Scroll Indicator
|When true, shows a vertical scroll indicator. The default value is true.
|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.
|Initial snap index
|Index of the snap point to be used as the initial point. Overrides initial snap position
|Allow sheet to be dragged beyond lowest snap point
|Factor of resistance when the gesture is released. A value of 0 offers maximum acceleration, whereas 1 acts as the opposite
|This value is useful if you want to take into consideration safe area insets when applying percentages for snapping points
|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%"]
You can conditionally display a component based on a given condition. Learn more about conditionally displaying components in the Conditional Display doc.
|Runs the Actions when the bottom sheet settles on a snap point
Updated 10 days ago