Components

Bottom sheet

Beta

This component is in beta. Please report any bugs or errors to Team DesignTech trough the feedback functionality.

Technically Bottom-sheet builds on the drawer component, but has some additional functionality.

Some examples of different Bottom-sheet implementations.

There is also an example of bottom sheet on this page that contains the proptables for all the components used in Bottom-sheet.

Implementation

Bottom Sheet is built using the following components:

BottomSheet
BottomSheetFooter (optional)

Footer if present, will always be visible, while content will be hidden when collapsed. By setting collapsedHeight, a desired portion of the content will be visible in collapsed state. Use isFixed to get a bottom sheet that is not scrollable and has no drag handle or close actions.

Consult UX design to find the right behavior and settings for your use case and check out the rest of available properties below.

import {BottomSheet, BottomSheetFooter} from 'trinidad-ui'

<BottomSheet allowHeaderSwipe={true/false}
             headerTitle={'Title'}
             headerImageUrl={'Url to image in header'}
             headerImageAlt={'alt text for image in hader'}
             twoStepExpansion={true/false}
             behavior={'standard/modal/hybrid'}>
  <div>
    <p>Content</p>
    <p>Content</p>
  </div>
  <BottomSheetFooter>
    <p>Footer</p>
  </BottomSheetFooter>
</BottomSheet>

Properties

BottomSheet

Prop name	Type	Default Value	Description
allowHeaderSwipe	bool	false	If header should be swipeable - default false
behavior	enum	'standard'	Standard, modal or hybrid - default standard
bypassTabOrder	bool	false	Bypass the natural taborder. Essentially injects the sheet in the tab order that the component is placed in the DOM.
collapsedHeight	union	0	Collapsed height in px as int or % of the sheet - default 0 ie. 125 or '20%'
customer	enum	'neutral'	Neutral or tur for smooth border radius, sport for sharp.
disablePageContentSpacing	bool	false	If sheet should skip to add padding to page (<footer> if present otherwise to <body>).
headerImageAlt	string	''	Alt text for header image
headerImageUrl	string	''	Url for image in header.
headerTitle	string	''	Title for the bottom sheet.
inverted	bool	false	If sheet should be inverted.
isExpanded	bool	false	If sheet should be expanded on render.
isFixed	bool	false	If sheet should be fixed.
isVisible	bool	true	If sheet should be visible.
position	enum	'bottom'	Sets position of Sheet. Notice that any other position then bottom will automatically set behavior: 'modal', customer: 'sport, isFixed:true
responsive	bool	false	Set true for responsive width when position is not bottom/top. The sheet will be with: auto between 21em and 90vw.
transparent	bool	false	If sheet should be transparent.
twoStepExpansion	bool	false	If sheet should be expanded in two steps. * note: Skips half-expanded step if difference between maxHeight and halfExpandedHeight is less than 1/3 of viewport height.
appendTo	node
children	node		Children to render
className	string		Custom classes
onStateChange	func		Callback function when state changes.

BottomSheetFooter

Prop name	Type	Default Value	Description
children	node
className	string		Custom class name(s) to add to the component.

Accessibility

This component has been validated to meet the WCAG 2.1 AA accessibility guidelines.

Additional information regarding accessibility of this component below.

Keep in mind that a bottom sheet is positioned last in the DOM meaning that the user needs to tab through all the content and footer of the page before entering the first focusable element in the bottom sheet