Reference
<tl-booking-pass>
The booking pass: one barcode for the whole order, listing everyone it covers until each has their own pass or wristband.
| HTML tag | <tl-booking-pass> |
| React | import { TlBookingPass } from '@ticketlayer/elements-react' |
| Category | Tickets |
| Runs in | web (browser DOM), native (planned React Native set) |
The booking pass: one barcode for the whole order, listing everyone it covers until each has their own pass or wristband. The number is written under the code, so the barcode is never the only way to read it.
<tl-booking-pass order-id="ord_..."></tl-booking-pass>Properties#
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
heading | heading | The element's heading. | string | 'Your booking pass' |
orderId (required) | order-id | The booking whose pass to show. | string | undefined |
unstyled | unstyled | Render into the light DOM with no stylesheet, for a page that styles the element itself: every node carries a tl-booking-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 booking pass cannot be loaded. | CustomEvent<{ message: string; }> |
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.