SiActionCardComponent documentation¶
selector
button[si-action-card] An action card component that extends the base card component with option to either select the whole card or trigger an action.
Usage: as selectable card: <button si-action-card selectable type="button" [(selected)]="isSelected">...</button>
or as an action card: <button si-action-card type="button" (click)="doSomeAction()">...</button>
Input Properties¶
| Name | Type | Default | Description |
|---|---|---|---|
| heading ¶ | TranslatableString | Card header text. | |
| imgAlt ¶ | TranslatableString | Alt text for a provided image. | |
| imgDir ¶ | ("horizontal" | "vertical" | undefined) | 'vertical' | Defines if an image is placed on top or start (left) of the card. |
| imgObjectFit ¶ | ("fill" | "none" | "contain" | "cover" | "scale-down" | undefined) | 'scale-down' | Sets the image object-fit CSS property. |
| imgObjectPosition ¶ | string | Sets the image object-position CSS property. | |
| imgSrc ¶ | string | Image source for the card. | |
| selectable ¶ | boolean | false | Makes whole card selectable. |
| selected ¶ | boolean | false | Indicates if the card is selected. Ignored when selectable is not set to true . |
| subHeading ¶ | TranslatableString | Card secondary header text. |
Output Properties¶
| Name | Type | Description |
|---|---|---|
| selectedChange ¶ | boolean | Indicates if the card is selected. Ignored when selectable is not set to true . |
Types Documentation¶
| Represents a translatable string. This can either be a translation key, e.g. ACTIONS.EDIT that will be automatically translated when displayed on the UI or a pre-translated string, e.g. Edit . Equivalent to a normal string in usage and functionality. |
|---|
Except where otherwise noted, content on this site is licensed under MIT License.