Button

• Shows a button with label or icon.
  

Features/Functionality

• Shows a button div with height '45px' and min-width '80px'.
• Label and icon can be shown as button text.
• Button will be shown if one of them is given.
• Will be shown in secondary color. Can be changed to primary through options.
• Click callback on trigger.
• Component is container responsive.
• It is cross browser compatible. (IE11, Edge, Firefox, chrome).

Basic Usage

Dependency

• jquery
• font-awesome
  
• shared styles
• shared scripts

HTML Structure

<require from="{user_path}/buttons/button"></require>

<cst-button label.bind="{label}" icon-name.bind="{iconName}" options.bind="{options}" other-info.bind="{otherInfo}" tooltip.bind="{tooltip}" ext-disabled.bind="{disabled}" evt-click-callback.bind="{evtClickCallback}"></cst-button>

Bindable Properties

Property Name	Data Type	Required	Decription	Example
label	string	Yes	Label to be shown on button.	label = 'Save'
iconName	string	No	Name of the icon to be mapped with class	iconName = 'Save'
otherInfo	any	No	Extra info to be passed on click
options	object	No	Options for the component
tooltip	string	No	Value shown on hover of icon	tooltip = 'Save Icon'
extDisabled	boolean	No	Disables any functionality on component.	disabled = true
evtClickCallback	method	No	Method to be called when button is clicked	evtClickCallback(_evt,_info)

Structure of bindable properties

options

options = {

isPrimaryClr: true, // To give button in primary color

maxChar: '', // To give maximum characters that chave to be shown on button

pageLabel: {}, // Override page labels

pageColorData: {} // Override css colour porperty

}

evtBlurCallback

evtClickCallback(_event,_info);

_info = {

overrideContext: overrideContext,

otherInfo: otherInfo

}

CSS Overrinding

• Following classes are given to override CSS:
  • .cst-button-container-override : Container Class

Note

• While giving the classes in page, give them in nested structure.

Rules

Component measurements

** box-sizing: border-box is used. So width and height will be dimensions + padding.

Working Example

HTML

<template>

<require from="./shared/core_comp/buttons/button"></require>

<div>

<cst-button label.bind="label" icon-name.bind="iconName" options.bind="options" other-info.bind="{otherInfo}" tooltip.bind="tooltip" ext-disabled.bind="disabled" evt-click-callback.bind="evtClickCallback"></cst-button>

</div>

</template>

CSS

.cst-ex-button {

.cst-button-container-override {

width: 100px !important;

height: 70px !important;

}

}

JS

class MyCls{

constructor(){

this.label = "Save";

this.tooltip = "Save";

this.otherInfo = 'Save';

this.iconName = 'Save';

this.options = {

isPrimaryClr:false

}

}

evtBtnClick(_event, _info){

}

}

export { MyCls }

Example Screen Shots

Desktop

---

IE Desktop

---

Tab

---

Mobile

---

Demo Link
Demo

---

Mark down usage
https://guides.github.com/features/mastering-markdown/

Version	Date	Developed By	Information Classification	Reviewed By	Approved By
1.0	05-11-2019	Gunjan	INTERNAL	Prasan & Tarun	Prasan