Bottom Sheet

The Bottom sheet component that shows the secondary content anchored to the bottom of the screen.

Importing

To use the bottom sheet component, first you need to register the component inside the page. You can register the component manually by importing the register function:

Web (Option 1)

import { register } from "@tapsioss/web-components/bottom-sheet";

register(); // Now the bottom sheet component is ready to use!

Web (Option 2)

import { registerBottomSheet } from "@tapsioss/web-components";

registerBottomSheet(); // Now the bottom sheet component is ready to use!

Also you can automatically register the component by importing it with the following approach:

Web

import "@tapsioss/web-components/bottom-sheet/element";

TIP

If you want to use all the component in your app, you can call registerAll at the root of your project.

import { registerAll } from "@tapsioss/web-components";

registerAll(); // All the components are now available

In the React package, you can easily add the component using the following code:

React

import { BottomSheet } from "@tapsioss/react-components";

Component Usage

Web

<tapsi-bottom-sheet></tapsi-bottom-sheet>

React

<BottomSheet />

Properties

Name	Attribute Name	Description	Type	Default Value
headingTitle	heading-title	Sets the heading title in a declarative-way.	string	""
headingDescription	heading-description	Sets the heading description in a declarative-way.	string	""
hasGrabber	has-grabber	Determines whether the grabber should be visible or not.	boolean	false
hasDismissButton	has-dismiss-button	Determines whether the dismiss button should be visible or not.	boolean	false
hasStickyActionBar	sticky-action-bar	Determines whether the action bar should be sticky or not.	boolean	false
hasStickyHeader	sticky-header	Determines whether the header should be sticky or not.	boolean	false
expandable	expandable	Determines whether the bottom sheet should be expanded by grabbing gesture.	boolean	false
variant	variant	The variant of the bottom sheet.	"modal" | "inline"	"modal"
label	label	Defines a string value that can be used to set a label for assistive technologies. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label	string	""
labelledBy	labelledby	Identifies the element (or elements) that labels the element. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby	string	""
focusTarget	focus-target	Identifies the element that should get focused when bottom sheet opens.	string	""
metaData	-	The metadata of the bottom sheet.	MetaData	-
defaultSnapPoints	-	An array containing two snap points. - The first snap point is either the container's scroll height or half the window's inner height, whichever is smaller. - The second snap point is 90% of the window's inner height.	[number, number]	-
snapPoints	-	The snap points for bottom sheet to snap to. Note that snap points will be sorted, no matter how to set it.	number[]	-
open	open	Determines whether the bottom sheet should be open or not.	boolean	false

Methods

Name	Description	Parameters
strictSnapTo	Strictly snaps to the provided or resolved snap point.	Name: numberOrCallback Type: (number | SnapToCallbackArgument)
snapTo	When given a number it'll find the closest snap point, so you don't need to know the exact value. Use the callback method to resolve the snap point.	Name: numberOrCallback Type: (number | SnapToCallbackArgument)
show	Opens the bottom sheet if it is not already open. Dispatches a cancelable ShowEvent ("show").
hide	Closes the bottom sheet if it is currently open. Dispatches a cancelable HideEvent ("hide").

Slots

Name	Value	Description
HEADER	header	The slot for the action bar content.
BODY	body	The slot for the action bar content.
ACTION_BAR	action-bar	The slot for the action bar content.

TIP

The value of slots are available for developer as JavaScript Variables:

Web

// Option 1
import { BottomSheetSlots } from "@tapsioss/web-components";

// Option 2
import { Slots } from "@tapsioss/web-components/bottom-sheet";

React

// Option 1
import { BottomSheetSlots } from "@tapsioss/react-components";

// Option 2
import { Slots } from "@tapsioss/react-components/BottomSheet";

Events

Name	Description	Type	Bubbles	Cancelable
snapped	Fired when the bottom-sheet is snapped to a specific position.	SnappedEvent	❌	❌
opening	Fired when the bottom-sheet starts to open.	OpeningEvent	❌	✅
closing	Fired when the bottom-sheet starts to close.	ClosingEvent	❌	✅
opened	Fired when the bottom-sheet has fully opened.	OpenedEvent	❌	❌
closed	Fired when the bottom-sheet has fully closed.	ClosedEvent	❌	❌
hide	Fired when the bottom-sheet is hidden.	HideEvent	❌	✅
show	Fired when the bottom-sheet is shown.	ShowEvent	❌	✅

TIP

Event details are available as JavaScript variables:

// Option 1
import {
 SnappedEvent,
 OpeningEvent,
 ClosingEvent,
 OpenedEvent,
 ClosedEvent,
 HideEvent,
 ShowEvent
} from "@tapsioss/web-components/bottom-sheet";

// Option 2
import {
 BottomSheetSnappedEvent,
 BottomSheetOpeningEvent,
 BottomSheetClosingEvent,
 BottomSheetOpenedEvent,
 BottomSheetClosedEvent,
 BottomSheetHideEvent,
 BottomSheetShowEvent
} from "@tapsioss/web-components";

You can have access to the event name using the type property:

// Option 1
element.addEventListener(SnappedEvent.type, handleSnapped);
element.addEventListener(OpeningEvent.type, handleOpening);
element.addEventListener(ClosingEvent.type, handleClosing);
element.addEventListener(OpenedEvent.type, handleOpened);
element.addEventListener(ClosedEvent.type, handleClosed);
element.addEventListener(HideEvent.type, handleHide);
element.addEventListener(ShowEvent.type, handleShow);

// Option 2
element.addEventListener(BottomSheetSnappedEvent.type, handleSnapped);
element.addEventListener(BottomSheetOpeningEvent.type, handleOpening);
element.addEventListener(BottomSheetClosingEvent.type, handleClosing);
element.addEventListener(BottomSheetOpenedEvent.type, handleOpened);
element.addEventListener(BottomSheetClosedEvent.type, handleClosed);
element.addEventListener(BottomSheetHideEvent.type, handleHide);
element.addEventListener(BottomSheetShowEvent.type, handleShow);