diff --git a/src/components/button-toggle/README.md b/src/components/button-toggle/README.md new file mode 100644 index 000000000000..61788efb4cff --- /dev/null +++ b/src/components/button-toggle/README.md @@ -0,0 +1,155 @@ +# md-button-toggle + +`MdButtonToggle` is a group of buttons that can be toggled. +There are two modes, `multiple` and `exclusive`. +When in 'exclusive' mode, only one button can be selected at a time (like radio buttons). +When in 'multiple' mode, multiple buttons can be selected at once (like checkboxes). +You can read more about button toggles in the +[Material Design spec](https://material.google.com/components/buttons.html#buttons-toggle-buttons). + +## Usage + +### Setup + +Importing the symbols: +```ts +import { MdUniqueSelectionDispatcher } from '@angular2-material/core'; +import { MD_BUTTON_TOGGLE_DIRECTIVES } from '@angular2-material/button-toggle' +``` + +Adding providers and directives: +```ts +@Component({ + ... + directives: [MD_BUTTON_TOGGLE_DIRECTIVES], + providers: [MdUniqueSelectionDispatcher] +}) +``` + +### Basic Usage + +`md-button-toggle` can be used on its own and acts as a checkbox. + +```html +Bold +``` + +Output: + +![Basic Toggle Button Example](https://material.angularjs.org/material2_assets/button-toggle/basic-toggle.png) + +### Exclusive Selection + +`md-button-toggle` can be used in an exclusive selection group when surrounded by +`md-button-toggle-group`. This styles all buttons within the group to appear as a single +group of button toggles and allows only one button toggle to be selected at a time. + +```html + + format_align_left + format_align_center + format_align_right + format_align_justify + +``` + +Output: + +![Exclusive Toggle Button Example](https://material.angularjs.org/material2_assets/button-toggle/exclusive-toggle.png) + +### Multiple Selection + +`md-button-toggle` can be used in a multiple selection group when surrounded by +`md-button-toggle-group multiple`. This styles all buttons within the group to appear as a single +group of button toggles. + +```html + + Flour + Eggs + Sugar + Milk + +``` + +Output: + +![Multiple Toggle Button Example](https://material.angularjs.org/material2_assets/button-toggle/multi-toggle.png) + +## Dynamic Exclusive Selection + +`md-button-toggle`s can be used with `ngModel` to dynamically create groups and update the value for +a group. + +```html + + + {{pie}} + + +

Your favorite type of pie is: {{favoritePie}}

+``` + +### Disabled Button Toggle + +`md-button-toggle-group` and `md-button-toggle` can both be disabled by adding a `disabled` +attribute to either one. Adding `disabled` to an exclusive group or a multiple group will disable +the entire group. Adding `disabled` to a single toggle will disable that toggle. + +```html + + One + Two + Three + + + + Red + Blue + +``` + +Output: + +![Disabled Toggle Buttons Example](https://material.angularjs.org/material2_assets/button-toggle/disabled-toggles.png) + +## `` + +### Bound Properties + +| Name | Type | Description | +| --- | --- | --- | +| `id` | string | The unique ID of the toggle. IDs are generated by default when not specified. | +| `name` | string | Optional, defaults to parent group name if one exists for exclusive selection toggles, otherwise null. This is used to differentiate between different groups. | +| `value` | any | Value of the toggle. Only used when in a group to determine which are selected. | +| `checked` | boolean | Optional, default = `false`. Whether or not the toggle is checked. | +| `disabled` | boolean | Optional, default = `false`. Whether or not the toggle is disabled | + +### Events + +| Name | Description | +| --- | --- | +| `change` | Emitted when the `checked` value is changed. | + +## `` + +### Bound Properties + +| Name | Type | Description | +| --- | --- | --- | +| `name` | string | Optional, the name of the group. | +| `disabled` | boolean | Optional, default = `false`. | +| `value` | any | The current value for the group. Will be set to the value of the selected toggle or a list of values from the selected toggles. | +| `selected` | `mdButtonToggle` | The current selected toggle or a list of the selected toggles. | + +### Attributes + +| Name | Type | Description | +| --- | --- | --- | +| `multiple` | boolean | Optional, default = `false`. Whether or not the group allows multiple selection. | + +### Events + +| Name | Description | +| --- | --- | +| `change` | Emitted when the `value` of the group changes. | diff --git a/src/components/button-toggle/package.json b/src/components/button-toggle/package.json new file mode 100644 index 000000000000..288e3f616dcf --- /dev/null +++ b/src/components/button-toggle/package.json @@ -0,0 +1,29 @@ +{ + "name": "@angular2-material/button-toggle", + "version": "2.0.0-alpha.6-2", + "description": "Angular 2 Material Button Toggle", + "main": "./button-toggle.js", + "typings": "./button-toggle.d.ts", + "repository": { + "type": "git", + "url": "https://github.com/angular/material2.git" + }, + "keywords": [ + "angular", + "material", + "material design", + "components", + "button-toggle", + "button", + "toggle" + ], + "license": "MIT", + "bugs": { + "url": "https://github.com/angular/material2/issues" + }, + "homepage": "https://github.com/angular/material2#readme", + "peerDependencies": { + "@angular2-material/core": "2.0.0-alpha.6-2", + "@angular/forms": "^0.2.0" + } +}