Reference
<tl-holder-pass>
A named guest's own page, from the link the booker sent: their ticket and extras, their name under the event's rules, and their own pass to download.
| HTML tag | <tl-holder-pass> |
| React | import { TlHolderPass } from '@ticketlayer/elements-react' |
| Category | Tickets |
| Runs in | web (browser DOM), native (planned React Native set) |
A named guest's own page, from the link the booker sent: their ticket and extras, their name under the event's rules, and their own pass to download. Nothing else of the booking: no refunds, transfers or moving extras. Nothing else of the booking: no refunds, transfers or moving extras, which stay with the booker.
<tl-holder-pass></tl-holder-pass> on the page a guest's link opens.Properties#
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
heading | heading | The element's heading. | string | 'Your pass' |
orderId | order-id | The booking; read from the link's order when not set. | string | '' |
slotId | slot-id | The guest's holder (hsl_...); read from the link's slot when not set. | string | '' |
unstyled | unstyled | Render into the light DOM with no stylesheet, for a page that styles the element itself: every node carries a tl-holder-pass__* class. Without it the element is styled, and each node is a ::part() of the same name. | boolean | false |
Events#
| Event | Description | Type |
|---|---|---|
tlError | Emitted when the pass cannot be loaded or a change is refused, with the message shown. | CustomEvent<{ message: string; }> |
tlHolderNamed | Emitted once the API has saved the name the guest gave. | CustomEvent<TlHolderNamed> |
tlPassDownloadRequested | The guest asked for their pass as a file. Announced before the harness does anything, whether or not the download goes on to succeed. | CustomEvent<TlPassDownloadRequested> |
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.