<tl-seat-view>
The view from one seat, or from a block of seats, in a box a little smaller than what it sits over, dimming it: the rendered still and a 360 look around its row where the venue has them, else the near
| HTML tag | <tl-seat-view> |
| React | import { TlSeatView } from '@ticketlayer/elements-react' |
| Category | Purchase |
| Runs in | web (browser DOM), native (planned React Native set) |
The view from one seat, or from a block of seats, in a box a little smaller than what it sits over, dimming it: the rendered still and a 360 look around its row where the venue has them, else the nearest rendered seat or a drawing; the distance, angle, how much of the stage is in view, the clearance over the row in front and what is in the way by name; the prices by ticket type; and Select, which holds the seats. The seat card's picture and a best available option's picture open it. Place it inside a positioned box: it covers that box.
Properties#
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
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 seats belong to | string | undefined |
seat | seat | Open on this seat, by its index in the venue plan version. Without it the box opens when the seat card or best available asks | number | -1 |
unstyled | unstyled | Render into the light DOM with no stylesheet, for a page that styles the element itself: every node carries a tl-seat-view__* 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 box closed | CustomEvent<void> |
tlError | The seats could not be held | CustomEvent<{ message: string; }> |
tlOpen | The box opened on these seats | CustomEvent<{ seats: number[]; }> |
tlSelect | The buyer selected the seats and the cart now holds them | CustomEvent<{ seats: 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#
Used by: <tl-buy-modal>, <tl-seat-explorer>