Card
Card component with header, footer and content sections.
Selector
smart-card
Properties
animationAnimation
Sets or gets the animation mode. Animation is disabled when the property is set to 'none'
Default valueadvanced
contentHandlerany
A callback function, used to add event handlers and other custom logic related to the content inside the card element.
dataSourceany
This object is used to populate card's template. Object keys represent the placeholders surrounded in braces ( e.g. {{proeprty}} ) inside the template of an item and their values are used to replace the bindings.
disabledboolean
Disables the interaction with the element.
Default valuefalse
itemTemplateany
Sets custom card template. The template can be the id of an HTMLTemplate element inside the DOM or it's reference. The content of the template may hold one or many property placeholders in format {{property}}. These placeholders will be replaced with the values of the corresponding properties defined in the dataSource object.
localestring
Sets or gets the language. Used in conjunction with the property messages.
Default value"en
localizeFormatFunctionany
Callback used to customize the format of the messages that are returned from the Localization Module.
messagesany
Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale.
Default value
"en": {
"propertyUnknownType": "'{{name}}' property is with undefined 'type' member!",
"propertyInvalidValue": "Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!",
"propertyInvalidValueType": "Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!",
"elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
"moduleUndefined": "Module is undefined.",
"missingReference": "{{elementType}}: Missing reference to {{files}}.",
"htmlTemplateNotSuported": "{{elementType}}: Browser doesn't support HTMLTemplate elements.",
"invalidTemplate": "{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM."
}
rightToLeftboolean
Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.
Default valuefalse
themestring
Determines the theme. Theme defines the look of the element
Default value"
unfocusableboolean
If is set to true, the element cannot be focused.
Default valuefalse
onswipebottom((this: Window, ev: Event) => any) | null
This event is triggered when the card is swiped bottom.
Arguments
evEvent
onswipeleft((this: Window, ev: Event) => any) | null
This event is triggered when the card is swiped left.
Arguments
evEvent
onswiperight((this: Window, ev: Event) => any) | null
This event is triggered when the card is swiped right.
Arguments
evEvent
onswipetop((this: Window, ev: Event) => any) | null
This event is triggered when the card is swiped top.