| |
|---|
| HTML tag | <tl-ticket-selector> |
| React | import { TlTicketSelector } from '@ticketlayer/elements-react' |
| Category | Purchase |
| Runs in | web (browser DOM), native (planned React Native set) |
Properties
| Property | Attribute | Description | Type | Default |
|---|
buttonLabel | button-label | Button label | string | 'Add to Cart' |
eventId (required) | event-id | Event ID | string | undefined |
occurrenceId (required) | occurrence-id | Occurrence ID | string | undefined |
showButton | show-button | Show add to cart button | boolean | true |
Events
| Event | Description | Type |
|---|
tlAddToCart | Emitted when items are added to cart | CustomEvent<{ items: AddToCartItem[]; }> |
tlError | Emitted on error | CustomEvent<{ message: string; }> |
tlQuantityChange | Emitted when quantity changes | CustomEvent<{ ticketTypeId: string; quantity: number; total: number; }> |
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.
Used by: <tl-buy-modal>