Reference
<tl-ticket>
A single issued ticket: a scannable QR, its name, seat and holder, and a PDF download.
| HTML tag | <tl-ticket> |
| React | import { TlTicket } from '@ticketlayer/elements-react' |
| Category | Tickets |
| Runs in | web (browser DOM), native (planned React Native set) |
A single issued ticket: a scannable QR, its name, seat and holder, and a PDF download. Greys out and stamps Used or Void when it can no longer be redeemed.
Properties#
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
orderId (required) | order-id | Order id this ticket belongs to (for the PDF download). | string | undefined |
ticket (required) | -- | The ticket to render. | TlTicketData | undefined |
unstyled | unstyled | Render into the light DOM with no stylesheet, for a page that styles the element itself: every node carries a tl-ticket__* class. Without it the element is styled, and each node is a ::part() of the same name. | boolean | false |
Events#
| Event | Description | Type |
|---|---|---|
tlDownloadRequested | Emitted when the buyer asks for this ticket as a file. | CustomEvent<{ ticketId: string; orderId: 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.
Related elements#
Used by: <tl-order-tickets>