Ticket Card
4.7.5
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 |
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
Importer av Ticket Card
4
Repos med Ticket Card
9%
Senaste installerade version av Ticket Card
4.7.4
Äldsta installerade version av Ticket Card
4.7.4