8.2.3 • Published 9 months ago
@exmg/exmg-radio-group v8.2.3
<exmg-radio-group>

@exmg/exmg-radio-group
This package provides radio group functionality.
Components included:
- exmg-radio-group - parent component
- exmg-radio-group-item - each children
Components
\
Can contain many exmg-radio-group-item components as it's children. Children of other types are not supported.
API
Slots
Name | Description |
---|---|
default | Slot to display anything within the item |
title | Title of the description of the exmg-radio-group-item |
body | Body to render additional information within the exmg-radio-group-item |
Events
Name | Description |
---|---|
exmg-radio-group-changed | when selected radio group item changed. |
Properties/Attributes
Name | Type | Default | Description |
---|---|---|---|
name | string | None | Name of the exmg-radio-group |
selected | string | None | Selected value. Should be value of one of value attributes of children nodes. |
required | boolean | None | Used for form validation |
vertical | string | None | 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.
Usage
With slots
<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>
Without slots
<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>
Additional references
8.2.3
9 months ago
8.2.2
9 months ago
8.2.1
9 months ago
8.2.0
9 months ago
8.1.35
2 years ago
8.1.34
2 years ago
8.1.31
2 years ago
8.1.33
2 years ago
8.1.32
2 years ago
8.1.23
3 years ago
8.1.17
4 years ago
8.1.10
4 years ago
8.1.13
4 years ago
8.1.12
4 years ago
8.1.14
4 years ago
8.1.9
4 years ago
8.0.1
4 years ago
8.1.2
4 years ago
8.1.1
4 years ago
8.1.4
4 years ago
8.1.3
4 years ago
8.1.5
4 years ago
3.0.1
4 years ago
3.0.0
5 years ago
2.1.1
6 years ago
2.1.0
6 years ago
2.0.2
6 years ago
2.0.1
6 years ago
2.0.0
6 years ago
1.1.0
6 years ago
1.0.0
6 years ago