From bead0118d252a0b634d456cd022e03f8606b3ce8 Mon Sep 17 00:00:00 2001 From: Ivey Padgett Date: Tue, 26 Jul 2016 18:12:20 -0700 Subject: [PATCH 01/10] Add README to button toggle --- src/components/button-toggle/README.md | 86 ++++++++++++++++++++++++++ 1 file changed, 86 insertions(+) create mode 100644 src/components/button-toggle/README.md diff --git a/src/components/button-toggle/README.md b/src/components/button-toggle/README.md new file mode 100644 index 000000000000..e826b471eec9 --- /dev/null +++ b/src/components/button-toggle/README.md @@ -0,0 +1,86 @@ +# MdButtonToggle + +`MdButtonToggle` is a group of buttons that can be toggled. There are two modes, `multiple` and +`exclusive`. `Multiple` is a group in which multiple buttons can be toggled at once. `Exclusive` is +a group in which only one button can be toggled at once. + +## `` + +### 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. | + +## Usage + +### Basic Usage + +`md-button-toggle` can be used on its own and acts as a checkbox. + +```html +Bold +``` + +### 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 + +``` + +### 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 + +``` From cf73f118cd191a7b12629dba0935570c8a25c1b4 Mon Sep 17 00:00:00 2001 From: Ivey Padgett Date: Tue, 26 Jul 2016 18:17:42 -0700 Subject: [PATCH 02/10] Add dynamic example to README --- src/components/button-toggle/README.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/components/button-toggle/README.md b/src/components/button-toggle/README.md index e826b471eec9..969ca58d30dc 100644 --- a/src/components/button-toggle/README.md +++ b/src/components/button-toggle/README.md @@ -84,3 +84,14 @@ group of button toggles and allows only one button toggle to be selected at a ti format_align_justify ``` + +## Dynamic Exclusive Selection + +```html + + + {{pie}} + + +

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

+``` From 93aedabd608b861f85fcb197ad9b0bf50c49a5f5 Mon Sep 17 00:00:00 2001 From: Ivey Padgett Date: Tue, 26 Jul 2016 18:22:58 -0700 Subject: [PATCH 03/10] Add package file --- src/components/button-toggle/package.json | 29 +++++++++++++++++++++++ 1 file changed, 29 insertions(+) create mode 100644 src/components/button-toggle/package.json 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" + } +} From 3eb64211a2a137ba172af6b02b86af448c6cc3b4 Mon Sep 17 00:00:00 2001 From: Ivey Padgett Date: Tue, 26 Jul 2016 18:58:14 -0700 Subject: [PATCH 04/10] Reorganize readme and add more information --- src/components/button-toggle/README.md | 143 +++++++++++++++---------- 1 file changed, 89 insertions(+), 54 deletions(-) diff --git a/src/components/button-toggle/README.md b/src/components/button-toggle/README.md index 969ca58d30dc..e5579f7f57b4 100644 --- a/src/components/button-toggle/README.md +++ b/src/components/button-toggle/README.md @@ -1,60 +1,62 @@ -# MdButtonToggle +# md-button-toggle -`MdButtonToggle` is a group of buttons that can be toggled. There are two modes, `multiple` and -`exclusive`. `Multiple` is a group in which multiple buttons can be toggled at once. `Exclusive` is -a group in which only one button can be toggled at once. +`MdButtonToggle` is a group of buttons that can be toggled. +There are two modes, `multiple` and `exclusive`. +When in 'multiple' mode, multiple buttons can be selected at once. +When in 'exclusive'mode, only one button can be selected at a time. +You can read more about button toggles in the +[Material Design spec](https://material.google.com/components/buttons.html#buttons-toggle-buttons). -## `` - -### 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. | +## Usage -## `` +### Setup -### Bound Properties +Importing the symbols: +```typescript +import { MdUniqueSelectionDispatcher } from '@angular2-material/core'; +import { MD_BUTTON_TOGGLE_DIRECTIVES } from '@angular2-material/button-toggle' +``` -| 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. | +Adding providers and directives: +```typescript +@Component({ + ... + directives: [MD_BUTTON_TOGGLE_DIRECTIVES], + providers: [MdUniqueSelectionDispatcher] +}) +``` -### Attributes +### Basic Usage -| Name | Type | Description | -| --- | --- | --- | -| `multiple` | boolean | Optional, default = `false`. Whether or not the group allows multiple selection. | +`md-button-toggle` can be used on its own and acts as a checkbox. -### Events +```html +Bold +``` -| Name | Description | -| --- | --- | -| `change` | Emitted when the `value` of the group changes. | +Output: -## Usage + -### Basic Usage +### Exclusive Selection -`md-button-toggle` can be used on its own and acts as a checkbox. +`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 -Bold + + format_align_left + format_align_center + format_align_right + format_align_justify + ``` +Output: + + + ### Multiple Selection `md-button-toggle` can be used in a multiple selection group when surrounded by @@ -70,23 +72,15 @@ group of button toggles. ``` -### Exclusive Selection +Output: -`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 - -``` + ## Dynamic Exclusive Selection +`md-button-toggle`s can be used with `ngModel` to dynamically create groups and update the value for +a group. + ```html @@ -95,3 +89,44 @@ group of button toggles and allows only one button toggle to be selected at a ti

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

``` + +## `` + +### 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. | From 725624b5d4a2e7998d95b98dfc931d162732c6d7 Mon Sep 17 00:00:00 2001 From: Ivey Padgett Date: Wed, 27 Jul 2016 15:27:03 -0700 Subject: [PATCH 05/10] Add images --- src/components/button-toggle/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/button-toggle/README.md b/src/components/button-toggle/README.md index e5579f7f57b4..f863e60a1fc3 100644 --- a/src/components/button-toggle/README.md +++ b/src/components/button-toggle/README.md @@ -36,7 +36,7 @@ Adding providers and directives: Output: - + ### Exclusive Selection @@ -55,7 +55,7 @@ group of button toggles and allows only one button toggle to be selected at a ti Output: - + ### Multiple Selection @@ -74,7 +74,7 @@ group of button toggles. Output: - + ## Dynamic Exclusive Selection From f44d18e60ef5b5749aa8022d717d6f779f5e10b3 Mon Sep 17 00:00:00 2001 From: Ivey Padgett Date: Wed, 27 Jul 2016 15:50:33 -0700 Subject: [PATCH 06/10] Add images the markdown way --- src/components/button-toggle/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/button-toggle/README.md b/src/components/button-toggle/README.md index f863e60a1fc3..ef6569a8beaa 100644 --- a/src/components/button-toggle/README.md +++ b/src/components/button-toggle/README.md @@ -36,7 +36,7 @@ Adding providers and directives: Output: - +![Basic Toggle Button Example](https://material.angularjs.org/material2_assets/button-toggle/basic-toggle.png) ### Exclusive Selection @@ -55,7 +55,7 @@ group of button toggles and allows only one button toggle to be selected at a ti Output: - +![Exclusive Toggle Button Example](https://material.angularjs.org/material2_assets/button-toggle/exclusive-toggle.png) ### Multiple Selection @@ -74,7 +74,7 @@ group of button toggles. Output: - +![Multiple Toggle Button Example](https://material.angularjs.org/material2_assets/button-toggle/multi-toggle.png) ## Dynamic Exclusive Selection From d50e9699abb682718ebe77b8fd3d51e1d2f7a555 Mon Sep 17 00:00:00 2001 From: Ivey Padgett Date: Thu, 28 Jul 2016 11:01:15 -0700 Subject: [PATCH 07/10] Add a disabled example --- src/components/button-toggle/README.md | 25 ++++++++++++++++++++++++- 1 file changed, 24 insertions(+), 1 deletion(-) diff --git a/src/components/button-toggle/README.md b/src/components/button-toggle/README.md index ef6569a8beaa..6d984e54e879 100644 --- a/src/components/button-toggle/README.md +++ b/src/components/button-toggle/README.md @@ -49,7 +49,7 @@ group of button toggles and allows only one button toggle to be selected at a ti format_align_left format_align_center format_align_right - format_align_justify + format_align_justify ``` @@ -90,6 +90,29 @@ a group.

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 Button Example](https://material.angularjs.org/material2_assets/button-toggle/disabled-toggle.png) + ## `` ### Bound Properties From ac46f8437080389d279c6d3df99216dd57cb936c Mon Sep 17 00:00:00 2001 From: Ivey Padgett Date: Thu, 28 Jul 2016 14:03:18 -0700 Subject: [PATCH 08/10] Add disabled example image --- src/components/button-toggle/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/button-toggle/README.md b/src/components/button-toggle/README.md index 6d984e54e879..975bc5c5333c 100644 --- a/src/components/button-toggle/README.md +++ b/src/components/button-toggle/README.md @@ -111,7 +111,7 @@ the entire group. Adding `disabled` to a single toggle will disable that toggle. Output: -![Disabled Toggle Button Example](https://material.angularjs.org/material2_assets/button-toggle/disabled-toggle.png) +![Disabled Toggle Buttons Example](https://material.angularjs.org/material2_assets/button-toggle/disabled-toggles.png) ## `` From c2ec4cbc097cbe89a5c77f7f12f8d4c6e5c13de2 Mon Sep 17 00:00:00 2001 From: Ivey Padgett Date: Thu, 28 Jul 2016 14:33:06 -0700 Subject: [PATCH 09/10] Use ts and improve comments --- src/components/button-toggle/README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/button-toggle/README.md b/src/components/button-toggle/README.md index 975bc5c5333c..451e201ab7d6 100644 --- a/src/components/button-toggle/README.md +++ b/src/components/button-toggle/README.md @@ -2,8 +2,8 @@ `MdButtonToggle` is a group of buttons that can be toggled. There are two modes, `multiple` and `exclusive`. -When in 'multiple' mode, multiple buttons can be selected at once. -When in 'exclusive'mode, only one button can be selected at a time. +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). @@ -12,13 +12,13 @@ You can read more about button toggles in the ### Setup Importing the symbols: -```typescript +```ts import { MdUniqueSelectionDispatcher } from '@angular2-material/core'; import { MD_BUTTON_TOGGLE_DIRECTIVES } from '@angular2-material/button-toggle' ``` Adding providers and directives: -```typescript +```ts @Component({ ... directives: [MD_BUTTON_TOGGLE_DIRECTIVES], From f34536d1237bb56582fff0726e803550a91b01ac Mon Sep 17 00:00:00 2001 From: Ivey Padgett Date: Thu, 28 Jul 2016 14:47:56 -0700 Subject: [PATCH 10/10] Add fix missing space in sentence --- src/components/button-toggle/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/button-toggle/README.md b/src/components/button-toggle/README.md index 451e201ab7d6..61788efb4cff 100644 --- a/src/components/button-toggle/README.md +++ b/src/components/button-toggle/README.md @@ -2,7 +2,7 @@ `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 '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).