Reference
<tl-seat-card>
One seat as a card: the view from it when there are views, the row and number, the section, the price, whether it is free or held, and for a held seat its ticket type to change.
| HTML tag | <tl-seat-card> |
| React | import { TlSeatCard } from '@ticketlayer/elements-react' |
| Category | Purchase |
| Runs in | web (browser DOM), native (planned React Native set) |
One seat as a card: the view from it when there are views, the row and number, the section, the price, whether it is free or held, and for a held seat its ticket type to change. The seat explorer pins one beside a tapped seat, never over it. Compact, it says all of that in two lines beside a thumbnail of the view.
Properties#
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
compact | compact | Two lines and a thumbnail of the view: the seat and price, then the section, category and state on one line. The seat explorer uses it in staff mode, so a pinned card leaves most of the map in view | boolean | false |
eventId | event-id | The event, for its prices; without it the prices the page has already read | string | undefined | undefined |
occurrenceId (required) | occurrence-id | The occurrence the seat belongs to | string | undefined |
pinned | pinned | Pinned beside a tapped seat: it shows the ticket type and a close button | boolean | false |
seat | seat | The seat, by its index in the venue plan version | number | -1 |
staff | staff | Box office mode, on a client that offers the staff capabilities: the seat says what it is to staff, a hold by its name | boolean | false |
unstyled | unstyled | Render into the light DOM with no stylesheet, for a page that styles the element itself: every node carries a tl-seat-card__* class. Without it the element is styled, and each node is a ::part() of the same name. | boolean | false |
Events#
| Event | Description | Type |
|---|---|---|
tlClose | The buyer closed a pinned card | CustomEvent<void> |
tlViewRequested | The buyer asked to see the view from the seat (the picture) | CustomEvent<{ seat: 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.
Related elements#
Renders: <tl-price-picker>
Used by: <tl-seat-explorer>