Skip to content

Commit 1b1772c

Browse files
Michael Linjelbourn
authored andcommitted
docs(radio): Add README.
Closes #182
1 parent 40d3f0c commit 1b1772c

File tree

1 file changed

+52
-0
lines changed

1 file changed

+52
-0
lines changed

src/components/radio/README.md

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
# MdRadio
2+
Radio buttons allow the user to select one option from a set. Use radio buttons for exclusive selection if you think that the user needs to see all available options side-by-side.
3+
4+
![Preview](https://material.angularjs.org/material2_assets/radio/radios.png)
5+
6+
### Examples
7+
A basic radio group would have the following markup.
8+
```html
9+
<md-radio-group>
10+
<md-radio-button value="option_1">1</md-radio-button>
11+
<md-radio-button value="option_2">2</md-radio-button>
12+
</md-radio-group>
13+
```
14+
15+
A dynamic example, populated from a `data` variable:
16+
```html
17+
<md-radio-group [(value)]="groupValue">
18+
<md-radio-button *ngFor="#d of data" [value]="d.value">
19+
{{d.label}}
20+
</md-radio-button>
21+
</md-radio-group>
22+
```
23+
24+
## `<md-radio-group>`
25+
### Properties
26+
27+
| Name | Type | Description |
28+
| --- | --- | --- |
29+
| `selected` | `MdRadioButton` | The currently selected button. |
30+
| `value` | `any` | The current value for this group. |
31+
| `disabled` | `boolean` | Whether the group is disabled. |
32+
33+
When selection is changed, an event is emitted from the `change` EventEmitter property.
34+
35+
### Notes
36+
The `md-radio-group` component has no button initially selected.
37+
38+
## `<md-radio-button>`
39+
### Properties
40+
41+
| Name | Type | Description |
42+
| --- | --- | --- |
43+
| `id` | `string` | The unique ID of this radio button. |
44+
| `name` | `string` | Group name, defaults to parent radio group if present. |
45+
| `value` | `any` | The value of this radio button. |
46+
| `checked` | `boolean` | Whether the radio is checked. |
47+
| `disabled` | `boolean` | Whether the radio is disabled. |
48+
49+
When checked, an event is emitted from the `change` EventEmitter property.
50+
51+
### Notes
52+
* The `md-radio-button` component by default uses the accent color from the theme palette.

0 commit comments

Comments
 (0)