Bottom Sheet
You can edit 8 Components for free. Get premium for unlimited access.
Choose between Figma, SwiftUI, React Native or Jetpack Compose Documentation.
Figma
The BottomSheet component is used to integrate even more information and features. It overlays the original screen.
1. Reference
This component inherits props from the Bottom Sheet.
-
-
-
-
-
-
-
-
-
2. Type
You can edit the type with the default, singleButton or doubleButton parameter.
Image 1.1 : Type default
Image 1.2 : Type singleButton
Image 1.3 : Type doubleButton
SwiftUI
The DLBottomSheet component is used to integrate even more information and features. It overlays the original screen.
1. Reference
This component inherits props from the Bottom Sheet.
-
-
-
-
-
-
-
-
-
2. Type
You can edit the type with the .normal, .singleButton or .doubleButton parameter.
type: .normal,
image: "ic_Dynamiclayer",
title: "Title",
headline: "Headline",
description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr."
)
DLBottomSheet(
type: .singleButton,
image: "ic_Dynamiclayer",
title: "Title",
headline: "Headline",
description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr."
)
DLBottomSheet(
type: .doubleButton,
image: "ic_Dynamiclayer",
title: "Title",
headline: "Headline",
description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr."
)
Jetpack Compose
The BottomSheet component is used to integrate even more information and features. It overlays the original screen.
1. Reference
This component inherits props from the Bottom Sheet.
-
-
-
-
-
-
-
-
-
2. Type
You can edit the type with the .normal, .singleButton or .doubleButton parameter.
sheetState = sheetState,
title = title,
headline = "Headline",
description = "Lorem ipsum dolor sit amet, consetetur sadipscing elitr.",
sheetContent = BottomSheetContentType.Icon( icon = BottomSheetIconType.Drawable(
currentImage
)
),
mainContent = content,
)
BottomSheet(
sheetState = sheetState,
title = title,
headline = "Headline",
description = "Lorem ipsum dolor sit amet, consetetur sadipscing elitr.",
sheetContent = BottomSheetContentType.Icon( icon = BottomSheetIconType.Drawable(
currentImage
)
),
buttonLabel = "Save",
onClick = { Toast.makeText(context, "Save",
Toast.LENGTH_SHORT).show()
},
mainContent = content,
)
BottomSheet(
sheetState = sheetState,
title = title,
headline = "Headline",
description = "Lorem ipsum dolor sit amet, consetetur sadipscing elitr.",
sheetContent = BottomSheetContentType.Icon( icon = BottomSheetIconType.Drawable(
currentImage
)
),
primaryButtonLabel = "Save",
secondaryButtonLabel = "Cancel",
primaryOnClick = {
Toast.makeText(context, "Save",
Toast.LENGTH_SHORT).show()
},
secondaryOnClick = {
Toast.makeText(context, "Cancel",
Toast.LENGTH_SHORT).show()
},
buttonsDirection =
BottomSheetButtonDirection.vertical //or
BottomSheetButtonDirection.horizontal
,
mainContent = content
)
React Native
This component is on the roadmap and in Progress This means that it is currently being edited and will be published in the next few weeks/months. Check back often to stay informed about the latest updates.
🚧
Discover more content
You have questions or need help?
You want to try?
Save time and money?