Switch

• Material Design Spec
• Develop
• Demo

• Graphics Link

Definition

<cst-switch>

<sub-theme/>

<sub-font/>

<sub-style/>

<sub-access/>

<sub-lr-label/>

<sub-lr-label/>

<sub-lr-icon/>

<sub-lr-icon/>

<sub-help-icon/>

<sub-feature-flag/>

</cst-switch>

Example

<cst-switch id="" value="">

<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-lr-label text="" position="right"/>

<sub-lr-label text="" position=""/>

<sub-lr-icon name="" position="" title="" link=""/>

<sub-lr-icon name="" position="" title="" link=""/>

<sub-help-icon name="" position="" title="" link="">

<sub-feature-flag char-count-hide="">

</cst-switch>

OR

<cst-element name="switch" schema="" schema-prop="" value=""/>

Attributes

Attribute	Value	Description
id	string type	Identifier for component.
value	boolean type	Specifies the value for component.(two way bind attribute)
class		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-lr-labels	array type	Specifies fixed text to be displayed in text field. Ref
sub-lr-icons	array type	Specifies icons to be displayed.
sub-help-icon	object type	Specifies help icon to be displayed.
sub-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(standard/filled/shaped-filled/outlined/shaped-outlined)	Name of design to be used.
width	percentage/pixels/string(x-small,small,medium,large,x-large)	Gives width/any other prop value

sub-lr-labels

(a.k.a left right labels)

Property	Value	Description
text	string type	Label text.
position	left/right	Position of the label.

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

properties: {

onOffSwitch: {

type: "boolean",

title:"Click",//= label

cstAttr: {

raw:{ //loop & add to element

disabled : true,

class:'outline cst-class1'

},

others:{

},

subStyle:{ //loop & add to element style

name: '',

width:'',

height:'',

fontSize:''

},

subLrLabels: [{

text: '',

position: ''

}],

subLrIcons:[{

name:'',

position:'',

title:''

}],

subHelpIcon: {

name: '',

position: '',

title:'',

link:''

},

subFeatureFlag: {

},

subTheme:{

name:'',

clrLabel:''

},

subFont:{

name:'',

fontText:'',

fontLabel:'',

fontError:''

}

}

}

}

}

let schemaProp = 'onOffSwitch';

let value = true

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

Exact schema

let schema = {

type: "boolean",

title: "Click", //= label

cstAttr: {

}

}

let schemaProp = '';

let value = false

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

Nested object

Nested object schemaProp

let schema = {};

let schemaProp = 'EMDDetails.onOffSwitch';

let value = false

var finalSchema = schema;

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

for(let prop of schemaPropSplits){

finalSchema = finalSchema.properties[schemaProp];

}

Events

Attribute	Description
onchange	Fires when the value gets changed.

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-switch-elm
• cst-ovr-switch
• cst-ovr-switch-label

Unit Test Screenshots

Responsiveness Test Screenshots

Design Images

Demo link

Points

• It will display toggle switch button
• Click on switch, value will be change