0.1.1 • Published 6 months ago
@teenageinterface/radio v0.1.1
Radio Component
The Radio
component is a reusable radio button component that allows users to select one option from a group. It supports customizable styles and emits events when the selected option changes.
Installation
Ensure that you have installed the @teenageinterface/radio
library in your Angular project. If not, you can add it using:
npm install @teenageinterface/radio
Usage
Import the RadioComponent
into your Angular application:
import { RadioComponent } from '@teenageinterface/radio';
@Component({
selector: 'app-radio-example',
template: `
<tiRadio
[item]="option"
[value]="selectedValue"
[type]="'primary'"
(valuesChange)="onValueChange($event)">
</tiRadio>
`,
})
export class RadioExampleComponent {
option = { value: 'option1', name: 'Option 1', id: '1' };
selectedValue: string = 'option1';
onValueChange(event: { value: string, name: string, id: string }) {
console.log('Selected option:', event);
}
}
Example
<tiRadio
[item]="{ value: 'option2', name: 'Option 2', id: '2' }"
[value]="selectedValue"
[type]="'default'"
(valuesChange)="onRadioChange($event)">
</tiRadio>
Properties
Property | Type | Default | Description |
---|---|---|---|
item | { value: string, name: string, id: string } | { value: "", name: "", id: "" } | The option associated with the radio button. |
value | string | "" | The currently selected value. |
type | "default" \| "primary" | "default" | The style type of the radio button (default or primary). |
Output Events
valuesChange
: Emits an object{ value, name, id }
when the selected value changes.
Types
The type
property can be one of the following values:
default
: Standard radio with no special styling.primary
: Emphasized radio for primary actions.
Documentation
For more information, visit the official documentation.
Repository
The source code is available on GitHub.
License
This project is licensed under the MIT License.