Menu

• Material Design Spec
• Develop menu
• Develop dropdown
• Demo menu
• Demo dropdown

• Graphics Link

Definition

<cst-menu>

<sub-theme/>

<sub-font/>

<sub-style/>

<sub-access/>

<sub-label/>

<sub-item/>

<sub-item/>

<sub-options />

<sub-help-icon/>

<sub-feature-flag/>

</cst-menu>

OR

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

Example

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

<sub-item text="" sub-text="" value=""/>

<sub-item text="" sub-text="" value=""/>

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

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

<sub-options items-prop="" item-text-prop="" item-value-prop=""

item-sub-text-prop="" checkbox-position=""/>

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

<sub-feature-flag allow-selection="" allow-search="" is-opened="">

</cst-menu>

Attributes

Attribute	Value	Description
id	string type	Identifier for component.
value	array type	Selected item(s) from the list
required	boolean type	Specifies if field must be filled.
disabled	boolean type	Specifies if component should be disabled.(aurelia ext attribute)
autofocus	boolean type	Specifies if component should be focused when loaded.
multiple	boolean type	Specifies that multiple options can be selected at once.
class	cst-mat-filled (default if material design) cst-mat-outlined cst-mat-shaped-filled cst-mat-shaped-outlined	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.
sub-lr-icons	array type	Specifies icons to be displayed.
sub-options	object type	Specifies the options of the component.
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/material-open/skeuomorphic-open	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.

sub-lr-icons

(a.k.a left right icons)

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 of icon.

sub-options

Property	Value	Description
items-prop	string type	Property of item array
item-text-prop	string type	Property of item's text, display in list.
item-sub-text-prop	string type	Property of item's small text, display in list.
item-value-prop	string type	Property of item's value
checkbox-position	string type(left/right)	Position of checkbox in item if feature-flag is allow-selection or multiple is true

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
allow-selection	boolean type	Specifies to select item. Display checkbox in front of item
allow-search	boolean type	Specifies to search items. Display search textbox at top
disable-ripple	boolean type	Disables ripple effec when given true.

Schema Examples

Full schema

Fetch appropriate based on schemaProp

let schema = {

type: "object",

required: ["regionId"], //= required

properties: {

regionId: {

type: "number",

title:"Region",//= label

cstAttr: {

raw:{ //loop & add to element

disabled : true,

autofocus : false,

class:'outline cst-class1',

multiple: false

},

placeholder: '-- Select --',

subStyle:{ //loop & add to element style

name: '',

width:'',

height:'',

fontSize:''

},

subLabel:{

position:'',

text:''

},

subLrIcons:[{

name:'',

position:'',

title:''

}],

subOptions:{

itemsProp: '',

itemTextProp: '',

itemSubTextProp: '',

itemValueProp: '',

itemLrIconsProp: ''

},

subHelpIcon: {

name: '',

position: '',

title:'',

link:''

},

subFeatureFlag: {

allowSelection: false,

allowSearch: false,

isOpened: true

},

subTheme:{

name:'',

clrLabel:''

},

subFont:{

name:'',

fontText:'',

fontLabel:'',

fontError:''

},

itemsSource: '', //to check in page object

itemsSourceAPI: '',

}

}

}

}

let schemaProp = 'regionId';

let value = [200];

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

let data = [

{

text: '',// If no id or value, it will be as group title.

// If id and value is there, it will be the item

items: [

{

id: '',

text: '',

subText: '',// Small text at the bottom of main text

value: '',

disabled: '',// To disabled particular item

lrIcons:[ // Left Right icon array

{

name:'',

position:'',

title:''

}

]

items: [

{

id: '',

text: '',

subText: '',

value: '',

disabled: '',

lrIcons:[

{

name:'',

position:'',

title:''

}

]

}

]

}

]

}

]

Exact schema

let schema = {

type: "number",

title: "Region", //= label

cstAttr: {

}

}

let schemaProp = '';

let value = [200];

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

Nested object

Nested object schemaProp

let schema = {};

let schemaProp = 'EMDDetails.regionId';

let value = [200];

var finalSchema = schema;

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

for(let prop of schemaPropSplits){

finalSchema = finalSchema.properties[schemaProp];

}

Material Measurement Guidelines

Minimum and maximum

• min-width = 112px
• max-width = 280px
• space from top = 8px
• space from bottom = 8px
• space from left = 16px
• space from right = 16px
• item's min-height = 48px

Minimum

Maximum

Mobile

• Top section
  • height = 32px
  • width = 128px
  • right side arrow icon width = 40px
  • right side arrow icon height = 24px
  • space from top = 8px
  • space from bottom = 4px
  • space from left = 16px
  • space from right = 8px
  • border = 1px
• Selection section
  • height = 144px
  • space from top = 8px
  • space from bottom = 8px
  • space from left = 16px
  • space from right = 8px
  • item's height = 32px

With Icon

Normal

• min-width = as per content
• space from top = 8px
• space from bottom = 8px
• space from left = 24px
• space from right = 24px
• item height = 48px
• icon height = 24px
• icon width = 24px
• space b/w left icon and item = 20px
• border = 1px

Dense

• max-width = 320px
• space from top = 8px
• space from bottom = 8px
• space from left = 16px
• space from right = 15px
• item height = 32px
• icon height = 24px
• icon width = 24px
• space b/w left icon and item = 20px
• border = 1px

Events

Attribute	Description
onchange	Fires when the element's value changes(for dropdown).
onclick	Fires when the item clicked(for menu item click).
oninvalid	Script to be run when an element is invalid.
onreset	Fires when reset button is clicked.
onvalidate	Custom validate hook, must return error message else considered valid; will be called onchange.

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

Features

• Display menu of items/ nested items/ group items

• Nested items have expand icon at right corner, on click of which displays sub menu item.

  • cascading menu cannot be provided for mobile, so going with card style (check images folder),sample2
  • Alternative is card with back button sample 1
  • When nested card is opened, have state difference like Bg Color, side dotted line..etc

• Each item can have prefix/ suffix icon

• Each item/ nested item have checkbox selection (nested item partial selection is denoted by checkbox indeterminate state)

• Item Selection

  • Single selection
  • Multi selection
    • going with style: fixed width (eg: selected value is "Monday (+1 other)")
    • alternative style: chips (add image)
    • View selected/ all/ search (tab view at top) //so top level not editable
    • Use checkbox indeterminate state for nested item partial selection

• Menu with group headers / dividers between group

• Scrollable menu

• auto complete dropdown (search & select)

  • static data(All, selected & search option)
  • API data (selected & search option)

• For large data, search all or with in a group

• For large data, async nested items load

• Same component for dropdown, menu, nested menu

• Every items must have id prop (add in check list)

Points

• The maximum height of a menu should be at least one row less than the height of the app’s UI.
• select2, selectize