⚠️ Project no longer maintened here, please find this package under the exmg-elements-monorepo ⚠️
This package provides radio group functionality.
Components included:
- exmg-radio-group - parent component
- exmg-radio-group-item - each children
Can contain many exmg-radio-group-item components as it's children. Children of other types are not supported.
Events:
- exmg-radio-group-changed - when selected radio group item changed.
Attributes:
- name
- selected - selected value. Should be value of one of value attributes of children nodes.
- required - boolean, used for form validation
- vertical - boolean, if you want to have vertical layout
Can be used only as children of exmg-radio-group.
Attributes:
- value - value of particular item.
- disabled - boolean, should value be selectable or not (still possible to select programmatically, even if disabled)
- hide-radio-button - boolean, should circle radio buttons be hidden or not
Each exmg-radio-group-item can have defined content in one of following ways:
- Define slots with names "title" and "body"
- Just put any content without defining slot.
<exmg-radio-group name="license" selected="${this.selected}" @exmg-radio-group-changed="${this.onPaperRadioGroupChanged}">
<exmg-radio-group-item value="option1">
<div slot="title">Option 1</div>
<div slot="body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</exmg-radio-group-item>
<exmg-radio-group-item value="option2">
<div slot="title">Option 2</div>
<div slot="body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</exmg-radio-group-item>
<exmg-radio-group-item value="option3" disabled>
<div slot="title">Option 3</div>
<div slot="body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</exmg-radio-group-item>
</exmg-radio-group>
<exmg-radio-group name="license" selected="${this.selected}" @exmg-radio-group-changed="${this.onPaperRadioGroupChanged}">
<exmg-radio-group-item value="option1">
Option 1
</exmg-radio-group-item>
<exmg-radio-group-item value="option2">
Option 2
</exmg-radio-group-item>
</exmg-radio-group>