Ticket Card
4.4.21
A description of this component is work in progress.
| Namn | Typ | Beskrivning |
|---|---|---|
cardName * | string | The display name of the card. |
cardNameComponent | unknown | Defines the semantic HTML element to be used for the cardName typography of the card. Default is H3 |
clickableCardScreenReaderPrefix | string | Visually hidden prefix text for screen readers. Used only when card is clickable. Should clarify the action, e.g. "Show QR code for". |
customAttribute | { attribute: string; value: string |
number } | Used for tests. Clickable and requested subcomponents will be suffixed with "-[ComponentName]". |
customTranslation | DeepPartial | Translation object used for screen reader texts. |
isLoading | boolean | If true, a loading skeleton will be rendered instead of the component. |
lang | "sv" |
"en" | Language used for internal translations. |
layout | "small" |
"medium" | Fixed size of the card, takes precedence over breakpoints. |
onClick | () => void | Callback when card is clicked, also adds clickable card styling. |
resplusLogo | boolean | Indicates if the ResPlus logo should be displayed. Only applicable for yearCardSilver or yearCardGold variants. |
showQrCode | boolean | Indicates whether a QR code logo should be displayed on the card, suggesting the presence of a scannable QR code. |
showValidityDates | boolean | Determines whether the card's validity period (validityFrom and validityTo) is displayed. Defaults to true. |
status | "CANCELLED" |
"EXHAUSTED" |
"EXPIRED" |
"PARTIALLY_CREDITED" | Status of the card: CANCELLED, EXHAUSTED, EXPIRED, or PARTIALLY_CREDITED |
npm install @sj-ab/component-library.ui.ticket-cardVariant
Movingo
Year Card Silver
Year Card Gold
Examples
Example 1
Example 2
Add new status and translation to ticket card
4.4.11Add new showValidityDates prop to TicketCard to allow hiding the validity period
4.4.0Add check for validityTo and validityFrom in TicketCard
4.3.1Update the design of TravelCard
4.3.0Fix display issues for TicketCard: Add null checks and correct color variant exclusion
4.2.4
Importer av Ticket Card
4
Repos med Ticket Card
15%
Senaste installerade version av Ticket Card
4.4.16
Äldsta installerade version av Ticket Card
4.4.16