Flash
Definition
<cst-flash>
<sub-theme/>
<sub-font/>
<sub-style/>
<sub-access/>
<sub-item/>
<sub-item/>
<sub-options />
<sub-help-icon/>
<sub-feature-flag/>
</cst-flash>
OR
<cst-element name="flash" schema="" schema-prop=""/>
Example
<cst-flash id="" >
<sub-theme name="" clr-var1="" clr-var2=""/>
<sub-font name="" font-var1="" font-var2=""/>
<sub-style name="" width="" height=""/>
<sub-access can-view="" can-modify=""/>
<sub-item text="" scale="" stay-val="" entry-detail="" exit-detail=""/>
<sub-item text="" scale="" stay-val="" entry-detail="" exit-detail=""/>
<sub-options items-prop="" item-text-prop=""
item-entry-duration="" item-exit-duration=""/>
<sub-help-icon name="" position="" title="" link="">
<sub-feature-flag >
</cst-flash>
Attributes
| Attribute | Value | Description |
|---|---|---|
| id | string type | Identifier for component. |
| disabled | boolean type | Specifies if component should be disabled.(aurelia ext attribute) |
| class | cst-flash | Specifies class to be applied(Multiple classes can be given with space). |
| object type | Specifies theme to be used for component. | |
| object type | Specifies fonts to be used for component. | |
| object type | Specifies style to be applied to component. | |
| object type | Specifies the options of the component. | |
| object type | Specifies help icon to be displayed. | |
| object | Specifies what features to enable/disable. | |
| other | any type | Any other info. |
| schema | object type | Specifies JSON schema. |
| schema-prop | string type | Specifies property to be used to pick schema. |
Sub element attributes
sub-theme
| Property | Value | Description |
|---|---|---|
| name | primary(default)/secondary/custom | Name of the theme. |
| clr-label | string type | If custom then specific/ named color variables |
sub-font
| Property | Value | Description |
|---|---|---|
| name | roboto (default)/custom | Name of the font |
| font-text | string type | If custom then specific/ named font variables. |
| font-label | string type | |
| font-error | string type |
sub-style
| Property | Value | Description |
|---|---|---|
| name | Design name | Name of design to be used. |
| width | percentage/pixels/string(x-small,small,medium,large,x-large) | Gives width/any other prop value |
sub-options
| Property | Value | Description |
|---|---|---|
| items-prop | string type | Property of item array |
| item-text-prop | string type | Property of item's text, display as label. |
| item-entry-duration | number type | Common animation duration to enter item detail. |
| item-exit-duration | number type | Common animation duration to exit item detail. |
sub-help-icon
| Property | Value | Description |
|---|---|---|
| name | string type | Icon name. |
| position | left/right | Position of the icon. |
| title | string type | Icon tooltip |
| link | string type | Link to be opened on click. |
sub-feature-flag
| Property | Value | Description |
|---|---|---|
Schema Examples
Full schema
Fetch appropriate based on schemaProp
let schema = {
type: "object",
required: ["flash"], //= required
properties: {
flash: {
type: "string",
title:"Flash",//= label
cstAttr: {
raw:{ //loop & add to element
disabled : true,
class:'outline cst-class1'
},
subStyle:{ //loop & add to element style
name: '', // Default star
width:'',
height:'',
fontSize:''
},
subOptions:{
itemsProp: '',
itemTextProp: '',
itemEntryDuration: '',
itemExitDuration: ''
},
subHelpIcon: {
name: '',
position: '',
title:'',
link:''
},
subFeatureFlag: {
},
subTheme:{
name:'',
clrLabel:''
},
subFont:{
name:'',
fontText:'',
fontLabel:'',
fontError:''
},
itemsSource: '', //to check in page object
itemsSourceAPI: '',
}
}
}
}
let schemaProp = 'flash';
let finalSchema = schemaProp ? schema.properties[schemaProp] : schema;
let data = [
{
text: '',
scale: '', // Size of text in scaler form like 1,1.5,0.5
stayVal: '', // How much time text stay on screen
entryDetail: {
name: '', // animation name
startVal: '', // animation start value
endVal: '' // animation end value
},
exitDetail: {
name: '',
startVal: '',
endVal: ''
}
}
]
Exact schema
let schema = {
type: "string",
title: "Flash", //= label
cstAttr: {
}
}
let schemaProp = '';
let finalSchema = schemaProp ? schema.properties[schemaProp] : schema;
Nested object
Nested object schemaProp
let schema = {};
let schemaProp = 'EMDDetails.flash';
var finalSchema = schema;
let schemaPropSplits = schemaProp.split('.');
for(let prop of schemaPropSplits){
finalSchema = finalSchema.properties[schemaProp];
}
Material Measurement Guidelines
Events
| Attribute | Description |
|---|---|
| onplayclick | Fires when the play button click. |
| onpauseclick | Fires when the pause button click. |
| onnextclick | Fires when the next button click. |
| onpreviousclick | Fires when the previous button click. |
| onhover | Fires when the element's value hover. |
| onhoverleave | Fires when the element's value hover leave. |
| oninvalid | Script to be run when an element is invalid. |
Event Method signature
method(parentRefObj, evtObj, elm, others)
Parameters description
| Parameter | Value | Description |
|---|---|---|
| parentRefObj | parentRefObj = { parentContext, loopParentContext, doubleLoopParentContext } | Parent Context references |
| evtObj | object | Event object |
| elm | object | Element value |
| others | any | Other value |
OverRidable Classes
- cst-ovr-flash
- cst-ovr-flash-txt
Unit Test Screenshots
Responsiveness Test Screenshots
Design Images
Demo link
Features
- Display content as flash
- Play, pause, next and previous button click functionality is there
- As per class flash style will change