Reference
<tl-event-list>
What the channel is selling, as a grid of event cards, optionally narrowed to one category.
| HTML tag | <tl-event-list> |
| React | import { TlEventList } from '@ticketlayer/elements-react' |
| Category | Discovery |
| Runs in | web (browser DOM), native (planned React Native set) |
What the channel is selling, as a grid of event cards, optionally narrowed to one category.
tl-event-list - what the channel is selling, as a grid of tl-event-card.
Each card shows the listing's fee-inclusive price range and its state for
this buyer, with a countdown when the sale opens later; see
tl-event-card.
<tl-event-list limit="12" columns="3"></tl-event-list>Properties#
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
category | category | Category filter | string | undefined | undefined |
columns | columns | Columns for grid layout (1, 2, 3, or 4) | number | 3 |
limit | limit | Maximum number of events to display | number | 12 |
unstyled | unstyled | Render into the light DOM with no stylesheet, for a page that styles the element itself: every node carries a tl-event-list__* 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 listing could not be read | CustomEvent<{ message: string; }> |
tlEventClick | Emitted when an event card is clicked | CustomEvent<{ eventId: 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#
Renders: <tl-event-card>