BottomSheet

The bottom sheet component is a modified dialog that slides from the bottom of the screen, common pattern in mobile apps.

Bottom sheets can contain any anything so let your imagination fly.

Anatomy

<BottomSheet>
  <BottomSheet.Backdrop />
  <BottomSheet.Panel>
    <BottomSheet.Header>
      <BottomSheet.Draghandle />
      ...
    </BottomSheet.Header>
    ...
  </BottomSheet.Panel>
</BottomSheet>

Default

Different sizes

With draghandle

With title

Customization

Responsive

BottomSheet props

Name	Type	Required	Default	Description
id	string	Yes	-	The id of the live component (required by LiveView for stateful components).
is_open	boolean	No	false	Whether the BottomSheet is open or not
on_close	event	No	-	Called when the BottomSheet is dismissed
class	css_class	No	-	Tailwind classes for customization
testid	string	No	-	Data-testid attribute for DOM element
panel	slot	Yes	-	Panel of BottomSheet, see BottomSheet.Panel
backdrop	slot	No	-	Backdrop of BottomSheet, see BottomSheet.Backdrop

BottomSheet.Panel props

Name	Type	Required	Default	Description
id	string	No	-	Id attribute for DOM element
class	css_class	No	-	Tailwind classes for customization
testid	string	No	-	Data-testid attribute for DOM element
on_close	event	No	-	Will be got from Bottomsheet in most cases
header	slot	No	-	Header of BottomSheet, see BottomSheet.Header
default	slot	No	-	Content of BottomSheet

BottomSheet.Header props

Name	Type	Required	Default	Description
id	string	No	-	Id attribute for DOM element
class	css_class	No	-	Tailwind classes for customization
testid	string	No	-	Data-testid attribute for DOM element
drag_handle	slot	No	-	Draghandle of BottomSheet, see BottomSheet.Draghandle
default	slot	No	-	Content of BottomSheet.Header

BottomSheet.DragHandle props

Name	Type	Required	Default	Description
id	string	No	-	Id attribute for DOM element
class	css_class	No	-	Tailwind classes for customization
testid	string	No	-	Data-testid attribute for DOM element

BottomSheet.Backdrop props

Name	Type	Required	Default	Description
id	string	No	-	Id attribute for DOM element
class	css_class	No	-	Tailwind classes for customization
testid	string	No	-	Data-testid attribute for DOM element