Loader

Definition

<cst-loader>

<sub-theme/>

<sub-font/>

<sub-style/>

<sub-access/>

<sub-label/>

<sub-feature-flag/>

</cst-loader>

OR

<cst-element name="loader" schema="" schema-prop=""/>

Example

<cst-loader 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-label text="" position=""/>

<sub-feature-flag>

</cst-loader>

Attributes

Attribute	Value	Description
id	string type	Identifier for component.
class	string type	Specifies class to be applied(Multiple classes can be given with space).
sub-theme	object type	Specifies theme to be used for component.
sub-font	object type	Specifies fonts to be used for component.
sub-style	object type	Specifies style to be applied to component.
sub-label	object type	Specifies label to be displayed.
feature-flag	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	material/skeuomorphic	Name of design to be used.
width	percentage/pixels/string(x-small,small,medium,large,x-large)	Gives width/any other prop value

sub-label

Property	Value	Description
text	string type	Label text.
position	left/top/center(default)	Position of the label.

feature-flag

Property	Value	Description

Schema Examples

Full schema

Fetch appropriate based on schemaProp

let schema = {

type: "object",

properties: {

loader: {

type: "object",

cstAttr: {

raw:{ //loop & add to element

class:'outline cst-class1',

},

subStyle:{

name: '',

width:'',

height:'',

fontSize:''

},

subFeature: {

},

subTheme:{

name:'',

clrLabel:''

},

subFont:{

name:'',

fontText:'',

fontLabel:'',

fontError:''

},

subLabel: {

text: 'Loading Data',

position: 'bottom'

}

},

cstElm: {

image: { // picture element schema

src:''

},

icon: { // icon element schema

}

}

}

}

}

let schemaProp = 'loader';

let finalSchema = schemaProp ? schema.properties[schemaProp] : schema;

Exact schema

let schema = {

cstAttr: {

}

}

let schemaProp = '';

let finalSchema = schemaProp ? schema.properties[schemaProp] : schema;

Nested object

Nested object schemaProp

let schema = {};

let schemaProp = 'EMDDetails.loader';

var finalSchema = schema;

let schemaPropSplits = schemaProp.split('.');

for(let prop of schemaPropSplits){

finalSchema = finalSchema.properties[schemaProp];

}

Over-ridable Classes

• cst-ovr-loader-elm
• cst-ovr-loader
• cst-ovr-loader-label

Unit test Screenshots

Responsiveness Test Screenshots

Design Images

Demo link

Points

• unit test screen shots
• ui + responsive test screen shots
• component demo link
• bring designer's images in docs