@exmg/exmg-radio-group v8.1.35

<exmg-radio-group>

@exmg/exmg-radio-group

This package provides radio group functionality.

Components included:

1. exmg-radio-group - parent component
2. 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

Events

Properties/Attributes

\

Can be used only as children of exmg-radio-group.

Attributes:

1. value - value of particular item.
2. disabled - boolean, should value be selectable or not (still possible to select programmatically, even if disabled)
3. 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:

1. Define slots with names "title" and "body"
2. 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

• Additional Documentation

• Demo