<tl-cart-drawer>
A slide-in panel holding the cart, opened by the cart intent on the client bus.
| HTML tag | <tl-cart-drawer> |
| React | import { TlCartDrawer } from '@ticketlayer/elements-react' |
| Category | Cart |
| Runs in | web (browser DOM) |
A slide-in panel holding the cart, opened by the cart intent on the client bus.
A slide-in cart panel (off-canvas) showing the current cart. It opens when
anything raises the ui:cart-requested bus intent - e.g. wire a
tl-cart-badge's click to emit it - and closes on the backdrop, the close
button, Escape, or ui:modal-close-requested. The panel embeds <tl-cart>,
so the actual cart rendering / remove / checkout is shared with the inline
cart; the drawer only adds the off-canvas chrome.
Properties#
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
heading | heading | Heading shown at the top of the panel. | string | 'Your cart' |
open | open | Controlled open state (also driven by the ui:cart-requested intent). | boolean | false |
side | side | Edge the panel slides in from. | "left" | "right" | 'right' |
unstyled | unstyled | Render into the light DOM with no stylesheet, for a page that styles the element itself: every node carries a tl-cart-drawer__* class. Without it the element is styled, and each node is a ::part() of the same name. The cart inside the panel follows the same mode. | boolean | false |
Events#
| Event | Description | Type |
|---|---|---|
tlClose | CustomEvent<void> | |
tlOpen | CustomEvent<void> |
Events are CustomEvents; the payload is on event.detail. In HTML, listen with element.addEventListener('tlXxx', handler); in React the wrapper exposes each one as an onTlXxx prop.
Related elements#
Renders: <tl-cart>