Radio Group

  • It will repeat the radio buttons.
  • It is single select.

Features/ Functionality

  • Click functionality on each radio button.

  • It will repeat in horizontal direction but if the width of outer div is small, it will wrap.

  • Component is container responsive.

  • It is cross browser compatible. (IE11, Edge, Firefox, chrome).

Basic Usage

Dependency

HTML Structure

<require from="{user_path}/radio_groups/radio_group"></require>
<cst-radio-group items.bind="{items}" input-id.bind="{inputId}" readable-item.bind="{readableItem}" options.bind="{options}" other-info.bind="{otherInfo}" ext-disabled.bind="{disabled}" evt-click-callback.bind="{evtClickCallback}"></cst-radio-group>

Bindable Properties

PropertyData TypeRequiredDescription
itemsarrayYesData to be passed to component.
inputIdstring/intNoSelected value's id will be set in inputId. It is two way communication property. Once the data sent will be set, then whatever selected value changes page can get it.(Data type as per optins.propId)
readableItemobjectNoTo get selected value in this object. Inisially bind this object as empty.
optionsobjectNoBasic component options
otherInfoanyNoExtra info to be passed on event
extDisabledbooleanNoDisables any functionality on component.
evtClickCallbackmethodNoMethod to be called on click event.

Structure of bindable properties

items

items = [
{
id: '', // id is required
label: ''
},...
]

readableItem

readableItem = {} // If we want selected value in this object, pass it as empty

options

options = {
propId: '', // This is the key of items object, which we consider as id. Default value = 'id'.
propLabel: '', // This is the key of items object, which we consider as label. Default value = 'label'.
pageLabel: {}, // Override page labels
pageColorData: {} // Override css colour porperty
}

evtClickCallback

evtClickCallback(_event,_info);
_info = {
overrideContext: overrideContext,
otherInfo: otherInfo,
value: item
}

CSS Overrinding

  • Following classes are given to override CSS:
    • .cst-radio-group-container-override : Container Class
    • .cst-radio-group-element-override: Element Class

Note

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

Rules

Component measurements

Image of measurements

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

Working Example

HTML

<template>
<require from="./shared/core_comp/radio_groups/radio_groups"></require>
<div>
<cst-radio-group items.bind="items" input-id.bind="inputId" readable-item.bind="readableItem" options.bind="options" other-info.bind="otherInfo" ext-disabled.bind="disabled" evt-click-callback.bind="evtClickCallback"></cst-radio-group>
</div>
</template>

CSS

.cst-ex-radio-group{
.cst-radio-group-element-override {
margin-right: 20px !important;
}
.cst-radio-group-container-override {
justify-content: center !important;
}
}

JS

class MyCls{
constructor(){
this.otherInfo = {
qId : '1'
}
this.items = [
{
key: 1,
value: 'Male'
},
{
key: 2,
value: 'Female'
},
{
key: 3,
value: 'Others'
}
];
this.inputId = 3;
this.options = {
propId: 'key', // If items object's property is not id
propLabel: 'value' // If items object's property is not label
};
this.disabled = false;
this.readableItem = {};
}
evtClickCallback(_event,_info){
console.log(_event);
console.log(_info);
}
}
export { MyCls }

Example Screen Shots

Desktop

Image of Ex

IE Desktop

Image of Ex

Tab

Image of Ex

Mobile

Image of Ex

Demo Link
Demo

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

VersionDateDeveloped ByInformation ClassificationReviewed ByApproved By
1.012-10-2019TarunINTERNALGunjan and PrasanPrasan