BottomSheet

The bottom-sheet component.

• Import

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

• Tag

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

Properties

Name	Description	Type	Default Value
open	Determines whether the bottom-sheet is open.	boolean	false
heading-title	Sets the heading title in a declarative-way.	string	""
heading-description	Sets the heading description in a declarative-way.	string	""
has-grabber	Determines whether the grabber should be visible or not.	boolean	false
has-dismiss-button	Determines whether the dismiss button should be visible or not.	boolean	false
sticky-action-bar	Determines whether the action bar should be sticky or not.	boolean	false
sticky-header	Determines whether the header should be sticky or not.	boolean	false
expandable	Determines whether the bottom sheet should be expanded by grabbing gesture.	boolean	false
variant	The variant of the bottom sheet.	"modal" | "inline"	"modal"
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	Identifies the element (or elements) that labels the element. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby	string	""
focus-target	Identifies the element that should get focused when bottom sheet opens.	string	""

Slots

Name	Description
header	The slot for the header content.
body	The slot for the main body content.
action-bar	The slot for the action bar content.

TIP

You can use slot names as variables:

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

console.log(Slots.HEADER); // "header"
console.log(Slots.BODY); // "body"
console.log(Slots.ACTION_BAR); // "action-bar"

Events

Name	Description	Type
snapped	Fired when the bottom-sheet is snapped to a specific position.	SnappedEvent
opening	Fired when the bottom-sheet starts to open (Cancelable).	OpeningEvent
closing	Fired when the bottom-sheet starts to close (Cancelable).	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 (Cancelable).	HideEvent
show	Fired when the bottom-sheet is shown (Cancelable).	ShowEvent

TIP

You can import custom event names:

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

element.addEventListener(SnappedEvent.type, handleTapsiBottomSheetSnapped);
element.addEventListener(OpeningEvent.type, handleTapsiBottomSheetOpening);
element.addEventListener(ClosingEvent.type, handleTapsiBottomSheetClosing);
element.addEventListener(OpenedEvent.type, handleTapsiBottomSheetOpened);
element.addEventListener(ClosedEvent.type, handleTapsiBottomSheetClosed);
element.addEventListener(HideEvent.type, handleTapsiBottomSheetHide);
element.addEventListener(ShowEvent.type, handleTapsiBottomSheetShow);