#Bindable Properties
- title
- item
- displayLabel
- arrangement
- options
#Overview
- Display card and toggle card details.
- Initially display open card with some details.
- Click on show more, more details will be displayed.
- Click on toggle icon, card details will be toggled.
- Component is responsive.
- It is cross browser compatible. (IE11, Edge, Firefox, chrome).
#Defaults
- min-width : 300px
- If !itemTemplate.arrangement["<screen_type>"], each column will display in one row
- If !itemTemplate.rowCount: 1
- options.style: 'style-center'
- options.isClosed: false
- options.showMoreCaption: '["Down Arrow"] More'
- options.showLessCaption: '["Up Arrow"] Less'
#Breakdown
- Defaults will be set.
- Loop this.itemTemplate.arrangement (for in loop to loop object)
- Loop key of object this.itemTemplate.arrangement[key] (for of loop to loop array)
- Each iterator will be one row
- Split iterator with comma
- No of element after split it column
- Split element with *
- element[0] will be the property name
- element[1] will be the split colum value(grow)
- !element[1] = 1
- As per screen size, item arrangement value will be stored in viewData.displayItem
- No of rows in UI = viewData.displayItem.length
- viewData.displayItem's iterator = rowItem
- In UI, width of colum will be (100% / rowItem.colLength) * grow
- Click on toggle icon, card will be toggle
- Click on showMoreCaption/showLessCaption, card detail will be display as per viewData.rowCount
- In showLessCaption viewData.rowCount = itemTemplate.rowCount
- In showMoreCaption click, viewData.rowCount = viewData.displayItem.length
- As per options.style, card will display
- On css override
- .cst-toggle-card-container-override : Container Class
- .cst-toggle-card-element-override: Element Class