arms_v2.8_webui_test v1.1.15
Overview
arms_v2.8_webui is a package which allows the User to use the custom controls by importing it into the Application. for example, we can import the various reusable controls like Input, Label, Combobox etc just importing the following in the web application.
Pre-requisites
NodeJS to be installed in the system.
How to install the package?
In the root folder of the application, execute 'npm install arms_v2.8_webui' command to install the Node package.
```bash
npm install arms_v2.8_webuiUsage
AgGrid
Control Details:
The AgGrid also supports custom column headers and adding custom controls.for example, if we need to add a custom DropDown control, we can giveSet the default Column Definition.
const defaultColDef = {
flex: 1,
cellStyle: (params) => ({
display: "flex",
alignItems: "center",
}),
};Define array object for Column Group, Column Definition and sample object.
const columnGroup = [];
const columnDefs = [];
const sampleOb = {};Return row from the AgGrid component.
Now, the column group headers are also customizable. In the column definitions below, if we need to show checkbox for selecting all rows and checkbox for selecting a single row, we can assign 'rowHeader: true 'for which ever column we want to show the checkbox and also provide custom widths for each column headers.
import { AgGrid } from "arms_v2.8_webui";This grid also supports column filters and column grouping . In the example shown below, we are grouping 'Make' and 'Model' columns under 'Car Info' group, 'Price' ,'Years' and 'Colors' under 'Other Info' group. We can provide date or text or number filters for the column which should have a filter.
Props:
Prop Type Default Description
setAlwaysShowVerticalScroll={true} Boolean true Set the setAlwaysShowVerticalScroll to true into the AgGrid as deafult. onRowDoubleClicked={props.onRowDoubleClicked} Function N/A Function called after the row has been completely loaded of the AgGrid to use as props. suppressRowClickSelection={true} Boolean true Set the suppressRowClickSelection to true into the AgGrid as deafult. frameworkComponents={props.frameworkComponents} Components N/A Components of framework Components passed as props. defaultColDef={defaultColDef} Object N/A defaultColDef of the AgGrid to use. rowData={props.rowData} List N/A List of row data passed as props. onGridReady={onGridReady} Function N/A Function called after the row has been completely loaded. rowSelection={rowSelection} Function N/A Function called after the row has been completely loaded. rowClassRules={rowClassRules} Function N/A Function called after the row has been completely loaded. disableEditrowIndex={"5"} Integer No of Row Count Set the disableEditrowIndex to total row count into the AgGrid as deafult. headerHeight={props.colHeight} Function N/A Function called after the row has been completely loaded. rowHeight={24} Integer 24 Set the rowHeight to 25 into the AgGrid as deafult. columnDefs={columnDefs} Object N/A columnDefs of the AgGrid to use. filter={true} Boolean true Set the filter to true into the AgGrid as deafult. gridOptions={gridOptions} Object N/A gridOptions of the AgGrid to use. pagination={true} To add enable pagination in AgGrid paginationPageSize={100} to add page Size in Aggrid onRowClicked Signle Rowclick {...props} Object N/A Object of the AgGrid to use as props.
const rowData = [
{ make: "Toyota", model: "Celica", price: 35000 },
{ make: "Ford", model: "Mondeo", price: 32000 },
{ make: "Porsche", model: "Boxter", price: 72000 },
];
const columnDefs = [
{ headerName: "Make", field: "make", group: "company" },
{ headerName: "Model", field: "model", group: "details" },
{ headerName: "Price", field: "price", group: "details" },
{ headerName: "Years", field: "year", group: "details" },
{ headerName: "Colors", field: "color", group: "details" },
];
// without column headers
const rowData = [
{ make: "Toyota", model: "Celica", price: 35000 },
{ make: "Ford", model: "Mondeo", price: 32000 },
{ make: "Porsche", model: "Boxter", price: 72000 },
];
const columnDefs = [
{ headerName: "Make", field: "make" },
{ headerName: "Model", field: "model" },
{ headerName: "Price", field: "price" },
];
const columns = [
{ headerName: "PAXType", field: "PAXType", width: 160 },
{
headerName: "Male",
field: "Male",
width: 65,
filter:true // To add filter to cloum
editable: true, // To edit cell of cloum
sortable: true, // To sort colum
unSortIcon: true, // To visible sort Icon
cellStyle: {
height: "100%",
display: "flex ",
"justify-content": "center",
"align-items": "center ",
"font-size": "12px",
},
},
}];We can provide custom styling for this control as
let Style = {
width: "100%",
height: "165px",
};
<AgGrid columnDefs={columnDefs} rowData={rowData} style={Style} />;
//The control automatically generates the column headers.In this example(make,model,price) and places the data under it-with/without header data.
<AGrid
columnData={columns}
rowData={PaxDetailsSpread}
disableEditrowIndex={"5"}
/>;
//The control automatically generates the columnData along with headers and rowData.In this example(headerName: "Male",editable: true and cellStyle,sortable: true,unSortIcon: true,) and places the data under it-with/without editable. sortable and unSortIcon to true to the row data based on the header name.
<AgGrid
//The control set the filter true ad default and set gridOptions icons menu as above styling object of menu, asc and desc.
/>;Button
import { Button } from "arms_v2.8_webui";Check for passing props style are passed or not, if not passed set the default css style as below
let cssStyles = props.style ? props.style : "";The default styling given for this component is backgroundColor: 'rgb(77,73,152)', color: 'white', textTransform: 'none', border:'none', outline: 'none', cursor: 'pointer', width:'70px',height:'22px', '& .MuiButton-root': { minWidth:'10px' }
We can also provide custom styling from where the control is called...
## Props:
Prop Type Default Description
---
name={props.name} String N/A Name of the Button name to use.
type={props.type} String N/A Type of the Button type to use.
variant="contained" String "contained" Set the variant of the Button name to use as default value.
onClick={props.onClick} Function N/A Function called after the Button has been completely loaded.
disabled={props.disabled}> Boolean true Set the disabled to true into the Button control as deafult.
{props.text} String N/A Text of the button to use.
```javascript
let Style = {
width: "100px",
height: "30px",
};In the render method, call the component as
<Button /> // renders a plain button control.
<Button style={Style} />// renders a button control with Style.
<Button text='Click/OK' /> // renders a button with the text as 'Click/OK'
<Button text='Click' onClick={ClickEventHandler} /> // renders a button with the text as 'Click' and a event handler for the Click event.
<Button name="frmSubmit" type="submit" />// renders a button control with name as form submit and type as submit.
<Button disabled />// renders a button control with disabled values as props to the control.Calender
import { Calender } from "arms_v2.8_webui";Props:
Prop Type Default Description
name = {props.name} String Name of the Calender to use. type="date" String date onChange = {props.onChange} Function Function called after the Calender has been completely loaded. value = {props.value} String Value of the Calender to use.
<Calender label="Date Range" />There is a default styling provided to the control which is outline:'none', width: "125px", marginLeft:'10px', marginRight:'10px', marginTop:'2px', height:'22px', backgroundColor: "rgb(255, 255, 255)", color: "black",
CheckBox
import { CheckBox } from "arms_v2.8_webui";Check for props style are passed or not, if not passed set the default css style as below.
let cssStyles = props.style ? props.style : "";The default styling given for this component is root: { "&:hover": { backgroundColor: "transparent", },
border: "1px solid #8db3e2", width: "13px", height: "13px", backgroundColor: "white", borderRadius: 0, padding: 0, color: "transparent", fontSize: "12px", },
There is a default styling provided to the control icon which is
"&.MuiSvgIcon-root": { color: "#0f243e", width: props.checkwidth ? props.checkwidth : "75%", height: props.checkheight ? props.checkheight : "75%", backgroundColor: "#0f243e", padding: 1, },
Props:
Prop Type Default Description
onChange = {props.onChange} Function N/A Function called after the Checkbox has been completely loaded. disabled={props.disabled} Boolen true Set the disabled to true into the Checkbox control as deafult. defaultChecked={false} Boolen flase Set the defaultChecked to flase into the Checkbox control as deafult. icon Object true Set the default style and defult back ground of the icon into the Checkbox control as deafult. DataTable={props.DataTable} Object N/A DataTable of the Checkbox to use. DataColumn={props.DataColumn} Object N/A DataColumn of the Checkbox to use. label=props.label String N/A Lable of the Checkbox to use.
We can also provide custom styling from where the control is called...
let Style = {
width: "100px",
height: "30px",
};In the render method, call the component as
<CheckBox /> // renders the plain CheckBox control.
<CheckBox style={Style} />// renders the CheckBox control with Style.
<CheckBox lable='Check box Option' /> // renders the CheckBox with the lable as 'Check box Option'
<CheckBox lable='Check box Option' onChange={ClickEventHandler} /> // renders a CheckBox with the Check box Option as 'Check box Option' and a event handler for the Click event.
<CheckBox disabled />// renders the CheckBox control with disabled as props to the control.
<CheckBox DataTable="table" DataColumn="column" />
{/* renders the Input control with DataTable as 'table' and DataColumn as 'column*/}Close Button
import { CloseButton } from "arms_v2.8_webui";Props:
Prop Type Default Description
style={props.style} Object Style object of the CloseButton to use. onClick = {props.onClick} Function Function called after the CloseButton has been completely loaded.
In the render method, call the component as
let closeButtonStyle = {
color: 'white',
width:'13px',
height:'13px',
marginTop:'8px',
cursor: 'pointer'
}
<CloseButton style={closeButtonStyle} /> // closeButtonStyle is the style we are giving to the component.
<CloseButton style={closeButtonStyle} onClick={onClickHandler}/> // onClickHandler is the click event handler.ComboBox
import { ComboBox } from "arms_v2.8_webui";The default styling given for this component is textAlign: "center", backgroundColor: "#fff", width: "70px", fontSize: "11px", height: customStyle.height ? customStyle.height : "21px", outline: "none", border: "none", "& .MuiSvgIcon-root": { color: "rgb(255, 255, 255)", backgroundColor: "#95B3D7", height: customStyle.height ? customStyle.height : "21px", }, "& .MuiNativeSelect-select": { padding: "0", fontSize: customStyle.fontSize ? customStyle.fontSize : "12px", }, border: "1 soild #fff", };
There is a default styling provided to the control icon which is
"&.MuiSvgIcon-root": { color: "#0f243e", width: props.checkwidth ? props.checkwidth : "75%", height: props.checkheight ? props.checkheight : "75%", backgroundColor: "#0f243e", padding: 1, },
Return the Checkbox control.
Props:
Prop Type Default Description
style={props.style} Object N/A Style object of the ComboBox to use. name={props.name} String N/A Name of the ComboBox to use. onChange = {props.onChange} Function N/A Function called after the ComboBox has been completely loaded. disabled={props.disabled} Boolen true Set the disabled to true into the ComboBox control as deafult. {Options} List List Value, ListName and Display value of the Combobox option to use. We can also provide custom styling from where the control is called...
let Style = {
width: "100px",
height: "30px",
};We can also provide sample data for combobox option as
const sampleData = [
{ value: "A", listname: "A", displayValue: "A" },
{ value: "B", listname: "B", displayValue: "B" },
{ value: "C", listname: "C", displayValue: "C" },
{ value: "D", listname: "D", displayValue: "D" },
{ value: "E", listname: "E", displayValue: "E" },
];In the render method, call the component as
<ComboBox options={sampleData}/> // renders the ComboBox control with option as props.
<ComboBox style={Style} />// renders the ComboBox control with Style.
<ComboBox options={sampleData} name="Combo Box1"/> // renders the ComboBox with the props name as 'Combo Box1'
<ComboBox options={sampleData} name="Combo Box1" disabled/> // renders the ComboBox with the props name as 'Combo Box1' and disable props as 'disabled' to the control.Input(TextBox)
import { Input } from "arms_v2.8_webui";The default styling given for this component is outline: 'none', border:'none', color:'black', backgroundColor: 'white', marginTop: '2px', marginBottom: '2px', width: '70px', "& .MuiInputBase-root": { height: '22px' }, "& .MuiOutlinedInput-input": { padding:"0px 0px 0px 5px", top:'1px' }, '& .MuiInputBase-root .Mui-disabled':{ border:'none', outline:'none', backgroundColor:'lightDark' } Set in-valid style as below
let invalidStyle = {
border: "1px solid red",
backgroundColor: "#fda49a",
};Set the custom classes and actual style as below
const useStyles = makeStyles({
style: defaultStyle,
custom: customStyle,
invalid: invalidStyle,
customLabel: customLabelStyle,
});
const customClasses = useStyles();Return the actual TextField input.
Props:
Prop Type Default Description
style={props.style} Object N/A Style object of the Input to use. data-table={props.DataTable} Object N/A DataTable object of the Input to use. data-column={props.DataColumn} Object N/A DataColumn object of the Input to use. type={props.type} String N/A type like password, number of the Input to use. name={props.name} String N/A Name of the Input to use. value={props.value} String N/A value of the Input to use. disabled={props.disabled} Boolean true Set the disabled to true into the Input control as deafult. onChange={props.onChange} Function N/A Function Function called after the Input has been completely loaded. placeholder={props.placeHolder} String N/A Place Holder Name of the Input to use.
We can also provide custom styling from where the control is called...
let Style = {
width: "100px",
height: "30px",
};In the render method, call the component as We can also provide DataTable, DataColumn, name, value, onChange,disabled, placeHolder values as props to the control. for example
<Input /> // type is optional...if not given the default type is text...
<Input type='number' /> // for number types
<Input type='password' /> // for password types
<Input style={Style} />// renders a Input control with Style.
<Input name='Demo Name' value ='12345' /> // renders the Input with the name as 'Name' and value as '12345'
<Input onChange={ChangeEventHandler} /> // renders the Input with the event handler for the onChange event.
<Input disabled />// renders a Input control with disabled values as props to the control.
<Input DataTable='table' DataColumn='column' />// renders a Input control with DataTable as 'table' and DataColumn as column as props to the control.
<Input
style={{ width: "100px", height: "20px" }}
placeHolder="Please eneter"
/>
{/* // renders the Input with the placeholder as 'Please eneter' as a place
holder value. */}Label
import { Label } from "arms_v2.8_webui";The default styling given for this component is marginTop:'5px', marginLeft: '5px', fontSize: '11px', color: '#0f243e',
Return the actual Typography as Label input.
Props:
Prop Type Default Description
style={props.style} Object Style object of the Label to use. text=props.text String Name of the Label to use. fontVariant = props.variant String body2 Variant name of the Label to use.
We can also provide custom styling from where the control is called...
let labelStyle = {
margin: "5px 150px 10px 10px",
color: "white",
fontSize: "12px",
};In the render method, call the component as We can also provide text value, variant type and css style as props to the control. for example
<Label style={labelStyle} text="Label Text" variant="h1" /> // renders the Label control with labelStyle is the style, text value as 'Label Text' and variant as 'h1' as the props to the control.LineChart
import { LineChart } from "arms_v2.8_webui";The default styling given for this component is marginTop:'5px', marginLeft: '5px', fontSize: '11px', color: '#0f243e',
Return the actual Typography as Label input.
<LineChart
title={"WEIGHT Vs INDEX Vs CG GRAPH"}
slantlines={this.slantlines}
xDashAxisValues={updatedArr}
xDashAxisRange={[newArr[0], newArr[newArr.length - 4]]}
xAxis={{
min: this.xAxisMin[0],
max: this.xAxisMax[0],
gap: this.xAxisGap[0],
}}
yAxis={{
min: this.yAxisMin[0],
max: this.yAxisMax[0],
gap: this.yAxisGap[0],
}}
mainLine={this.mainLine}
/>Props:
Prop Type Default Description
style={props.style} Object Style object of the Label to use.
title={"WEIGHT Vs INDEX Vs CG GRAPH"} String "WEIGHT Vs INDEX Vs CG GRAPH" title of the LineChart to use as default.
slantlines = {this.slantlines}
xDashAxisValues = {updatedArr}
xDashAxisRange = {[newArr[0], newArr[newArr.length - 4]]}
xAxis = {{
min: this.xAxisMin[0],
max: this.xAxisMax[0],
gap: this.xAxisGap[0],
}}
yAxis ={" "}
{{ min: this.yAxisMin[0], max: this.yAxisMax[0], gap: this.yAxisGap[0] }}
mainLine = {this.mainLine}
fontVariant = props.variant String body2 Variant name of the Label to use.
We can also provide custom styling from where the control is called...let labelStyle = {
margin: "5px 150px 10px 10px",
color: "white",
fontSize: "12px",
};In the render method, call the component as We can also provide text value, variant type and css style as props to the control. for example
<LineChart3 style={labelStyle} title={"WEIGHT Vs INDEX Vs CG GRAPH"} /> // renders the LineChart control with labelStyle is the style, title value as 'WEIGHT Vs INDEX Vs CG GRAPH'.RadioButton
import { RadioButton } from "arms_v2.8_webui";Props:
Prop Type Default Description
style={props.style} Object N/A Style object of the RadioButton to use. row Object row Set the RadioButton to display a row wise as deafult. name = {props.name} String N/A Name of the RadioButton to use. value={props.value} String N/A Value of the RadioButton to use. onChange={props.onChange} Function N/A Function called after the RadioButton has been completely loaded. disabled = {props.disabled} Boolean Disabled the RadioButton to use as deafult. size="small" String "small" Size the RadioButton to use as deafult. {Options} List N/A Key Value pair like {Id:id, Name:name} of the RadioButton option to use. default = true and set defaultIndex={id} to set default Value In the render method, call the component as
let labelStyle = {
margin: '5px 150px 10px 10px',
color:'white',
fontSize:'12px'
}
<RadioButton style={labelStyle} /> // labelStyle is the style we are giving to the component.
<RadioButton style={labelStyle} name ='List Text'/> // Define the content to be shown as Label in the 'text' PropertyIf style property is not given, this component would take the default styling as marginTop:'5px', marginLeft: '5px', fontSize: '11px', color: '#0f243e',
TabGroup(Tab Control)
import { TabGroup } from "arms_v2.8_webui";Check for passing props style are passed or not, if not passed set the default css style as below.
let cssStyles = props.style ? props.style : "";The default styling given for this component is background: "#B8CCE4", color: "#0F243E", minHeight: "36px !important", "&:hover": { // background: "#0F243E !important", // color: "#fff !important", }, "&:focus": { outline: "none", borderRadius: "0", }, "&.MuiButtonBase-root": { background: "#B8CCE4", color: "#0F243E", marginRight: "2px", minHeight: "36px !important", padding: "0 0 0 10px", }, "&.Mui-selected": { background: "#0F243E", color: "#fff !important", }, minHeight: "36px !important", }, defaultTab: { background: "#B8CCE4", color: "#0F243E", minHeight: "36px !important", "&:hover": { background: "#0F243E !important", color: "#fff !important", }, "&:focus": { outline: "none", borderRadius: "0", }, "&.MuiButtonBase-root": { background: "#B8CCE4", color: "#0F243E", marginRight: "2px", minHeight: "36px !important", padding: "0 10px", }, "&.Mui-selected": { background: "#0F243E", color: "#fff !important", }, "& .MuiTabPanel-root": { padding: 0, }, },
Props:
Prop Type Default Description
style={props.style} Object N/A Style object of the TabGroup to use. defaultLabels={defaultLabels} List N/A Key Value pair like {label:"DashBoard", value:0} of the TabGroup option to use. dataList={dataList} List N/A List map of the TabGroup option to use. customContent={customContent} List N/A List map of the TabGroup option to use. defaultContent={defaultContent} List N/A List map of the TabGroup option to use. isDashboard="true" String true Set the isDashboard value to "true" of the TabGroup as deafult.. OnCloseClick={(i) => closeTab(i)} Function N/A Function called after the TabGroup has been completely loaded.
let Style = {
width: "100px",
height: "30px",
};
let customContent = (
<TrimSheet
seatData={seatData}
paxData={paxData}
linkedFlight={linkedFlight}
userDetails={user}
/>
);
const defaultLabels = [
{ label: "DashBoard", value: 0, isStikcy: "sticky", left: "0" },
];
const defaultContent = [{ value: 0, content: defaultContent1 }];In the render method, call the component as
<TabGroup
defaultLabels={defaultLabels}
dataList={dataList}
customContent={customContent}
defaultContent={defaultContent}
isDashboard="true"
OnCloseClick={(i) => closeTab(i)}
style={{ marginTop: "180" }}
/>
<TabGroup /> // renders the plain TabGroup control.
<TabGroup style={Style} />// renders the TabGroup control with Style.
<TabGroup defaultLabels='Tab Name' /> // renders the TabGroup with the defaultLabels as 'Tab Name'
<TabGroup dataList={dataList} OnCloseClick={closeTab} /> // renders a TabGroup with the event handler for the Click event.
<TabGroup disabled />// renders the TabGroup control with disabled as props to the control.
<TabGroup customContent={customContent} defaultContent={defaultContent} />
{/* renders the TabGroup control with defaultContent as 'defaultContent' and customContent as 'customContent'*/}
<TabGroup
defaultLabels={defaultLabels}
customContent={customContent}
defaultContent={defaultContent}
/>
{/* renders the TabGroup control with defaultLabels as 'DashBoard',isStikcy: "sticky", left: "0" to display the static tab into the TabGroup default label as default.*/}TextArea
import { TextArea } from "arms_v2.8_webui";In the render method, call the component as
<TextArea /> // type is optional...if not given the default type is text...There is a default styling provided to the control which is outline: 'none', backgroundColor: 'white', marginTop: '2px', marginBottom: '2px', width: '70px', "& .MuiInputBase-root": { height: '22px' }
We can also provide custom styling from where the control is called...
let Style = {
width: "100px",
};
<TextArea style={Style} />;We can also provide DataTable, DataColumn, name, value, onChange,disabled, placeHolder values as props to the control. for example
<TextArea DataTable="table1" DataColumn="column1" />Props:
Prop Type Default Description
style={props.style} Object N/A Style object of the TextArea to use. multiline Object multiline Set the TextArea to display into a multiline as deafult. rows={2} Number 2 Set the TextArea to display total number of row is 2 as deafult. DataTable = {props.DataTable} Object N/A DataTable object of the TextArea to use. DataColumn = {props.DataColumn} Object N/A DataColumn object of the TextArea to use. type={props.type} String N/A Type of the TextArea to use. name={props.name} String N/A Name of the TextArea to use. value={props.value} String N/A Value of the TextArea to use. disabled = {props.disabled} Boolean Disabled the TextArea to use as deafult. onChange={props.onChange} Function N/A Function Function called after the TextArea has been completely loaded. placeholder={props.placeHolder} String N/A Place Holder name of the TextArea to use.
In the render method, call the control as
const CompanyData = [
{id:'flight1', name:"Flight1"},
{id:'flight2', name:"Flight2"},
]
<TextArea name='rData' options={CompanyData}/> // name is the name for the TextArea and options is the array is the control contentsWe can also provide onChange, disabled values as props to the control. for example
<TextArea disabled="true" onChange={onChangeHandler} />Default styling for the Dropdown is backgroundColor: 'white', display: 'block', marginTop: '2px', marginBottom: '2px', position: 'relative', top: '10px', right: '3px'
We can also provide custom styling as
let Style = {
width: "100px",
height: "30px",
};
<TextArea style={Style} />;Switch
Switch component have pre-defined styling, i,e, height, width, color scheme. Switch component comes with pre-defined size i.e. large, medium/regular, small, tiny, custom. When no props are passed while defining component By default Switch component will consider size = "regular/medium" Note: 1. medium or regular - will provide same size component. provide any one of the value for the property. 2. Any pre-defined size value will not support any customization except "custom". 3. custom - this property will give you power to customize a component with your desire properties.
Component sample declaration :
1. <Switch size="large"/>
2. <Switch size="medium" />
3. <Switch size="small" />
4. <Switch size="tiny" />
5. <Switch size="regular" />
6. <Switch
size="custom"
height="35px"
width="60px"
padding="9px"
trackOff='#ecdff0'
trackOn='#c2a3c4'
margin="3px"
thumbHeight="27px"
thumbWidth="27px"
startTransition="translateX(3px)"
endTransition="translateX(22px)"
bgImageOff={`url("https://via.placeholder.com/32")`}
bgImageOn={`url("https://via.placeholder.com/32")`}
bgImageEdge="50%"
/>
7. <Switch
size="custom"
height="35px"
width="60px"
padding="9px"
color ='yellow'
trackOff='#F0F3F6'
trackOn='#a5ccb7'
thumbOn='#5bcf90'
border="1px"
margin="3px"
thumbHeight="27px"
thumbWidth="27px"
startTransition="translateX(3px)"
endTransition="translateX(22px)"
bgImageEdge="50%"
/>This component is fully customizable via CSS properties. The following props will help to customise this component.
1. width : width : width of the component.
Valid values as follows:
a. fixed - Fixed value expressed in pixels, em's, etc. e.g. 150px or 50em
b. percentage - Percentage value e.g. 100%
c. auto - Browser will calculate the width for the element e.g. auto
d. inherit - Component will inherit the width from its parent element e.g. inherit
2. height : height : height of the component.
Valid values as follows:
a. fixed - Fixed value expressed in pixels, em's, etc. e.g. 50px or 30em
b. percentage - Percentage value e.g. 100%
c. auto - Browser will calculate the width for the element e.g. auto
d. inherit - Component will inherit the width from its parent element e.g. inherit
3. padding : padding : defines the padding space on all sides of an element : This property helps to give height to the track.
Values for this property can be expressed with one, two, three or four values
i. padding: all;
ii. padding: top_bottom left_right;
iii. padding: top right_left bottom;
iv. padding: top right bottom left;
Valid values as follows:
a. fixed - Fixed value expressed in px, em, ... e.g. 5px or 4em 5px or 2px 5px 10px or 4px 5px 2px 3px
b. percentage - Percentage value e.g. 8% or 4% 5% or 2% 5% 8% or 4% 5% 2% 3%
c. fixed and percentage - (in combination) Combination of fixed and percentage values e.g. 4% 5px or 2em 5% 8px or 4px 5em 2% 3px
d. inherit - Component will inherit the padding from its parent element e.g. inherit
5. margin : margin : defines the margin on all sides of an element.
Values for this property can be expressed with one, two, three or four values, it is preferable to use one value.
i. margin: all;
ii. margin: top_bottom left_right;
iii. margin: top right_left bottom;
iv. margin: top right bottom left;
Valid values as follows:
a. fixed - Fixed value expressed in px, em, ... e.g. 5px or 4em 5px or 2px 5px 10px or 4px 5px 2px 3px
b. percentage - Percentage value e.g. 8% or 4% 5% or 2% 5% 8% or 4% 5% 2% 3%
c. fixed and percentage - (in combination) Combination of fixed and percentage values e.g. 4% 5px or 2em 5% 8px or 4px 5em 2% 3px
d. inherit - Component will inherit the padding from its parent element e.g. inherit
6. startTransition : translateX() : repositions an element horizontally on the 2D plane
Syntax : translateX(<length-percentage>)
Valid values as follows:
a. fixed - Fixed value expressed in px to reposition for distance given pixel... e.g. translateX(3px), translateX(1px)
7. endTransition : transition : : translateX() : repositions an element horizontally on the 2D plane
Syntax : translateX(<length-percentage>)
Valid values as follows:
a. fixed - Fixed value expressed in px to reposition for distance given pixel... e.g. translateX(17px), translateX(22px)
8. thumbWidth : width : width of the thumb on the switch. width and height needs to be same to be circle shape.
Valid values as follows:
a. fixed - Fixed value expressed in pixels. e.g. 30px
9. thumbHeight : height : height of the thumb on the switch. width and height needs to be same to be circle shape.
Valid values as follows:
a. fixed - Fixed value expressed in pixels. e.g. 30px
10. thumbOn : color : defines the color of the thumb of the switch in ON state.
Valid values as follows :
a. #RRGGBB - Hexadecimal representation of the background color i.e. #DABBDE
b. rgb() - RGB representation of the background color i.e. rgb(255,0,0)
c. color name - Name of the background color ie. red
d. transparent - Indicates that the element shows the background-color of the element behind it.
The default value for CSS background-color is transparent. i.e. transparent
e. inherit - Component will inherit the background-color from its parent element i.e. inherit.
11. bgImageOn : backgroundImage : defines the background image for the thumb in ON state.
Syntax : background-image: value;
Valid values as follows :
url Location of the image resource background-image: url("/images/logo.png");
12. bgImageOff : backgroundImage : defines the background image for the thumb in OFF state.
Syntax : background-image: value;
Valid values as follows :
url Location of the image resource background-image: url("/images/logo.png");
13. bgImageEdge : border-radius : defines rounded corners on the border of the thumb in both ON and OFF state. provide 50% for to achieve circle shape with background image.
Values for this property can be expressed with one, two, three or four values.
i. border-radius: all [ / all];
ii. border-radius: top-left&bottom-right top-right&bottom-left
[ / top-left&bottom-right top-right&bottom-left];
iii. border-radius: top-left top-right&bottom-left bottom-right
[ / top-left top-right&bottom-left bottom-right];
iv. border-radius: top-left top-right bottom-right bottom-left
[ / top-left top-right bottom-right bottom-left];
Valid values are as follows:
a. fixed - Fixed value expressed in px, em, e.g. 4px or 4px / 6px
b. percentage - Percentage value e.g. 8% or 8% / 6%
c. inherit - Component will inherit the border-radius from its parent element e.g. inherit
14. trackOn : color : defines the color of the track in OFF state.
Valid values as follows :
a. #RRGGBB - Hexadecimal representation of the background color i.e. #DABBDE
b. rgb() - RGB representation of the background color i.e. rgb(255,0,0)
c. color name - Name of the background color ie. red
d. transparent - Indicates that the element shows the background-color of the element behind it.
The default value for CSS background-color is transparent. i.e. transparent
e. inherit - Component will inherit the background-color from its parent element i.e. inherit.
15. trackOff : color : defines the color of the track in ON state.
Valid values as follows :
a. #RRGGBB - Hexadecimal representation of the background color i.e. #DABBDE
b. rgb() - RGB representation of the background color i.e. rgb(255,0,0)
c. color name - Name of the background color ie. red
d. transparent - Indicates that the element shows the background-color of the element behind it.
The default value for CSS background-color is transparent. i.e. transparent
e. inherit - Component will inherit the background-color from its parent element i.e. inherit.Slider
import { Slider } from "arms_v2.8_webui";Check for props style are passed or not, if not passed set the default css style as below.
let cssStyles = props.style ? props.style : "";The default styling given for this component is color: style && style.color ? style.color : "#181D1F", width: style && style.width ? style.width : "100px", marginLeft: 20,
There is a default styling provided to the slider thumb which is '& .MuiSlider-thumb': { borderRadius: style && style.thumbRadius && style.thumbRadius , },
There is a default styling provided to the slider rail which is "& .MuiSlider-rail": { height: style && style.sliderThickness ? style.sliderThickness : '5px' }, "& .MuiSlider-track": { height: style && style.sliderThickness ? style.sliderThickness : '5px' },
We can also provide custom styling from where the control is called...
let Style = {
width: "300px",
color: "green",
thumbRadius: "2px",
sliderThickness: "5px",
};In the render method, call the component as
<Slider value={state} onChange={ClickEventHandler}/> // renders the plain Slider control.
<Slider value={state} onChange={ClickEventHandler} style={Style}/>// renders the Slider control with Style.
<Slider value={state} onChange={ClickEventHandler} min={1} max={10}/> // renders the Slider with min and max values'
<CheckBox value={state} onChange={ClickEventHandler} min={1} max={10} step={1}/> // renders the Slider with min, max and step values.
<CheckBox value={state} onChange={ClickEventHandler} max={10} step={1} style={Style}/> // renders the Slider with min, max, step values and Style.Listbox
import { Listbox } from "arms_v2.8_webui";The default styling given for this component is width: props.width ? props.width : '200px', height: props.height ? props.height : '250px', overflow: 'auto', padding: '10px', border: '1px solid black',
## Props:
Prop Type Default Description
---
We can also provide sample data for listbox data as
```javascript
const Data = [
{ id: 1, title: 'Item 1' },
{ id: 2, title: 'Item 2' },
{ id: 3, title: 'Item 3' },
{ id: 4, title: 'Item 4' },
{ id: 5, title: 'Item 5' },
]
```
In the render method, call the component as
```javascript
<ListboxCom data={Data} /> // renders the listBox control with data as props.
<ListboxCom data={Data} style={Style} /> // renders the listBox control with Style.
<ListboxCom data={Data} onclick={SelectItem} /> // renders a listbox with the data and a event handler for the Click event.
<ListboxCom data={Data} onclick={SelectItem} checked={checked} /> // renders listbox control with checked props which have set values and see which item is selected.
```
\*/2 years ago