1.0.1 • Published 2 years ago
@meveo-org/mv-radio v1.0.1
mv-radio
MvRadio is a Meveo radio component (based on lit-element) that renders a radio buttons
Features
- Renders the radio buttons using a single component tag
- Simple interface
- Dispatches a custom event when radio button is clicked
- Written in vanila javascript
Quick Start
To experiment with the MvRadio component.
Clone this repo.
Serve the project from the root directory with some http server (best served with meveo itself)
Update the radio button demo component in
demo.js
file
The mv-radio
has:
- 2
type
variants:
single, multiple
- 2
theme
variants:
dark, light
Sample usage
multiple
:
<mv-radio
theme="light" // theme values - can be light or dark
.data="${[{label: "Label 1", checked: true, disabled: false, name: "groupName", value: "1" }]}" // Array of objects for the radio buttons
@radio-clicked="${this.handleRadioClicked}" // custom event dispatched when the radio button is clicked
></mv-radio>
single
:
<mv-radio
id="${item.id}" // id for the radio
type="single" // use the single or multiple radio
label="${item.label}" // string label for the radio
theme="${theme}" // the light and dark theme mode
.value="${item.value}" // value can be any object
?checked="${item.checked}" // boolean that determines whether the radio is selected or not
?disabled="${item.disabled}" // boolean that determines whether the radio is used or not
?no-toggle="${item.noToggle}" // boolean that disables toggling of the radio
@radio-clicked="${this.handleClickSecondRadio}" // custom event dispatched when the radio button is clicked
></mv-radio>
You can also check this demo