Card JAVASCRIPT UI Component API

Card Javascript API

Class

Card

Card

Card component with header, footer and content sections.

Selector

smart-card

Properties

AanimationSets or gets the animation mode. Animation is disabled when the property is set to 'none'
CcontentHandlerA callback function, used to add event handlers and other custom logic related to the content inside the card element.
DdataSourceThis 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.
DdisabledDisables the interaction with the element.
IitemTemplateSets 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. When setting the property to template ID, the property type is 'string'.
LlocaleSets or gets the language. Used in conjunction with the property messages.
LlocalizeFormatFunctionCallback used to customize the format of the messages that are returned from the Localization Module.
MmessagesSets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale.
RrightToLeftSets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.
TthemeDetermines the theme. Theme defines the look of the element
UunfocusableIf is set to true, the element cannot be focused.

Events

SswipebottomThis event is triggered when the card is swiped bottom.
SswipeleftThis event is triggered when the card is swiped left.
SswiperightThis event is triggered when the card is swiped right.
SswipetopThis event is triggered when the card is swiped top.

Properties

animation"none" | "simple" | "advanced"

Sets or gets the animation mode. Animation is disabled when the property is set to 'none'

Allowed Values

  • "none" - animation is disabled
  • "simple" - ripple animation is disabled
  • "advanced" - all animations are enabled

Default value

"advanced"

Example

Set the animation property. 

 <smart-card animation='none'></smart-card>

Set the animation property by using the HTML Element's instance. 

 const card = document.querySelector('smart-card');
 card.animation = 'simple';

Get the animation property. 

 const card = document.querySelector('smart-card');
 let animation = card.animation;

contentHandlerfunction | null

A callback function, used to add event handlers and other custom logic related to the content inside the card element.

Try a demo showcasing the contentHandler property.

Example

Set the contentHandler property. 

 <smart-card content-handler='null'></smart-card>

Set the contentHandler property by using the HTML Element's instance. 

 const card = document.querySelector('smart-card');
 card.contentHandler = function(card) { 
var toggleBtn = card.querySelector('smart-button'), 
   content = card.querySelector('.card-content'); 

toggleBtn.addEventListener('click', function () { 
   content.classList.toggle('hidden'); 
}); 
};

Get the contentHandler property. 

 const card = document.querySelector('smart-card');
 let contentHandler = card.contentHandler;

dataSourceobject

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.

Try a demo showcasing the dataSource property.

Example

Set the dataSource property. 

 <smart-card data-source='{ property : "value" }'></smart-card>

Set the dataSource property by using the HTML Element's instance. 

 const card = document.querySelector('smart-card');
 card.dataSource = { property : 'new value' };

Get the dataSource property. 

 const card = document.querySelector('smart-card');
 let dataSource = card.dataSource;

disabledboolean

Disables the interaction with the element.

Default value

false

Example

Set the disabled property. 

 <smart-card disabled></smart-card>

Set the disabled property by using the HTML Element's instance. 

 const card = document.querySelector('smart-card');
 card.disabled = false;

Get the disabled property. 

 const card = document.querySelector('smart-card');
 let disabled = card.disabled;

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. When setting the property to template ID, the property type is 'string'.

Try a demo showcasing the itemTemplate property.

Example

Set the itemTemplate property. 

 <smart-card item-template='templateId1'></smart-card>

Set the itemTemplate property by using the HTML Element's instance. 

 const card = document.querySelector('smart-card');
 card.itemTemplate = templateId2;

Get the itemTemplate property. 

 const card = document.querySelector('smart-card');
 let itemTemplate = card.itemTemplate;

localestring

Sets or gets the language. Used in conjunction with the property messages.

Default value

"en"

Example

Set the locale property. 

 <smart-card locale='de'></smart-card>

Set the locale property by using the HTML Element's instance. 

 const card = document.querySelector('smart-card');
 card.locale = 'fr';

Get the locale property. 

 const card = document.querySelector('smart-card');
 let locale = card.locale;

localizeFormatFunctionfunction | null

Callback used to customize the format of the messages that are returned from the Localization Module.

Example

Set the localizeFormatFunction property. 

 <smart-card localize-format-function='function(defaultMessage, message, messageArguments){return '...'}'></smart-card>

Set the localizeFormatFunction property by using the HTML Element's instance. 

 const card = document.querySelector('smart-card');
 card.localizeFormatFunction = function(defaultMessage, message, messageArguments){return '...'};

Get the localizeFormatFunction property. 

 const card = document.querySelector('smart-card');
 let localizeFormatFunction = card.localizeFormatFunction;

messagesobject

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."

}

Example

Set the messages property. 

 <smart-card messages='{"de":{"propertyUnknownType":"Die Eigenschaft '{{name}}' hat ein nicht definiertes 'type'-Member!","propertyInvalidValue":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualValue}}, Erwarteter Wert: {{value}}!","propertyInvalidValueType":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualType}}, Erwarteter Wert: {{type}}!","elementNotInDOM":"Element existiert nicht in DOM! Bitte fugen Sie das Element zum DOM hinzu, bevor Sie eine Methode aufrufen.","moduleUndefined":"Modul ist nicht definiert.","missingReference":"{{elementType}}: Fehlender Verweis auf {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser unterstutzt keine HTMLTemplate-Elemente.","invalidTemplate":"{{elementType}}: '{{property}}' Die Eigenschaft akzeptiert eine Zeichenfolge, die mit der ID eines HTMLTemplate-Elements aus dem DOM ubereinstimmen muss."}}'></smart-card>

Set the messages property by using the HTML Element's instance. 

 const card = document.querySelector('smart-card');
 card.messages = {"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."}};

Get the messages property. 

 const card = document.querySelector('smart-card');
 let messages = card.messages;

rightToLeftboolean

Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.

Default value

false
Try a demo showcasing the rightToLeft property.

Example

Set the rightToLeft property. 

 <smart-card right-to-left></smart-card>

Set the rightToLeft property by using the HTML Element's instance. 

 const card = document.querySelector('smart-card');
 card.rightToLeft = true;

Get the rightToLeft property. 

 const card = document.querySelector('smart-card');
 let rightToLeft = card.rightToLeft;

themestring

Determines the theme. Theme defines the look of the element

Default value

""

Example

Set the theme property. 

 <smart-card theme='blue'></smart-card>

Set the theme property by using the HTML Element's instance. 

 const card = document.querySelector('smart-card');
 card.theme = 'red';

Get the theme property. 

 const card = document.querySelector('smart-card');
 let theme = card.theme;

unfocusableboolean

If is set to true, the element cannot be focused.

Default value

false

Example

Set the unfocusable property. 

 <smart-card unfocusable></smart-card>

Set the unfocusable property by using the HTML Element's instance. 

 const card = document.querySelector('smart-card');
 card.unfocusable = false;

Get the unfocusable property. 

 const card = document.querySelector('smart-card');
 let unfocusable = card.unfocusable;

Events

swipebottomCustomEvent

This event is triggered when the card is swiped bottom.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onSwipebottom

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Try a demo showcasing the swipebottom event.

Example

Set up the event handler of swipebottom event. 

const card = document.querySelector('smart-card');
card.addEventListener('swipebottom', function (event) {
	// event handling code goes here.
})

swipeleftCustomEvent

This event is triggered when the card is swiped left.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onSwipeleft

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Try a demo showcasing the swipeleft event.

Example

Set up the event handler of swipeleft event. 

const card = document.querySelector('smart-card');
card.addEventListener('swipeleft', function (event) {
	// event handling code goes here.
})

swiperightCustomEvent

This event is triggered when the card is swiped right.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onSwiperight

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Try a demo showcasing the swiperight event.

Example

Set up the event handler of swiperight event. 

const card = document.querySelector('smart-card');
card.addEventListener('swiperight', function (event) {
	// event handling code goes here.
})

swipetopCustomEvent

This event is triggered when the card is swiped top.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onSwipetop

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Try a demo showcasing the swipetop event.

Example

Set up the event handler of swipetop event. 

const card = document.querySelector('smart-card');
card.addEventListener('swipetop', function (event) {
	// event handling code goes here.
})