Add readme and package.json files to the button toggle #925
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 | ||
| <md-button-toggle>Bold</md-button-toggle> | ||
| ``` | ||
|
|
||
| Output: | ||
|
|
||
|  | ||
|
|
||
| ### 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 | ||
| <md-button-toggle-group name="alignment"> | ||
| <md-button-toggle value="left"><md-icon>format_align_left</md-icon></md-button-toggle> | ||
| <md-button-toggle value="center"><md-icon>format_align_center</md-icon></md-button-toggle> | ||
| <md-button-toggle value="right"><md-icon>format_align_right</md-icon></md-button-toggle> | ||
| <md-button-toggle value="justify"><md-icon>format_align_justify</md-icon></md-button-toggle> | ||
| </md-button-toggle-group> | ||
| ``` | ||
|
|
||
| Output: | ||
|
|
||
|  | ||
|
|
||
| ### 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 | ||
|
There was a problem hiding this comment. Hmm, have you thought about putting the exclusive selection section before multiple selection? It's probably more common, and that way, you can explain |
||
| group of button toggles. | ||
|
|
||
| ```html | ||
| <md-button-toggle-group multiple> | ||
| <md-button-toggle>Flour</md-button-toggle> | ||
| <md-button-toggle>Eggs</md-button-toggle> | ||
| <md-button-toggle>Sugar</md-button-toggle> | ||
| <md-button-toggle>Milk</md-button-toggle> | ||
| </md-button-toggle-group> | ||
|
There was a problem hiding this comment. Can you add screenshots for this and exclusive selection as well? There was a problem hiding this comment. Nitpick: It might be a little confusing that you are showing a disabled button-toggle along with a selected one. It almost looks like multi-select. Perhaps create another section for the "disabled" example, so it's clear? |
||
| ``` | ||
|
|
||
| Output: | ||
|
|
||
|  | ||
|
|
||
| ## Dynamic Exclusive Selection | ||
|
|
||
|
There was a problem hiding this comment. What is dynamic exclusive selection? Probably need some text here. |
||
| `md-button-toggle`s can be used with `ngModel` to dynamically create groups and update the value for | ||
| a group. | ||
|
|
||
| ```html | ||
| <md-button-toggle-group name="pies" [(ngModel)]="favoritePie"> | ||
| <md-button-toggle *ngFor="let pie of pieOptions" [value]="pie"> | ||
| {{pie}} | ||
| </md-button-toggle> | ||
| </md-button-toggle-group> | ||
| <p>Your favorite type of pie is: {{favoritePie}}</p> | ||
| ``` | ||
|
|
||
| ### 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 | ||
| <md-button-toggle-group disabled> | ||
| <md-button-toggle value="one">One</md-button-toggle> | ||
| <md-button-toggle value="two">Two</md-button-toggle> | ||
| <md-button-toggle value="three">Three</md-button-toggle> | ||
| </md-button-toggle-group> | ||
|
|
||
| <md-button-toggle-group> | ||
| <md-button-toggle value="red" disabled>Red</md-button-toggle> | ||
| <md-button-toggle value="blue">Blue</md-button-toggle> | ||
| </md-button-toggle-group> | ||
| ``` | ||
|
|
||
| Output: | ||
|
|
||
|  | ||
|
|
||
| ## `<md-button-toggle>` | ||
|
|
||
| ### 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. | | ||
|
|
||
| ## `<md-button-toggle-group>` | ||
|
|
||
| ### 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. | | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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" | ||
| } | ||
| } |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can you add a screenshot of what this might look like?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This looks good, but I think it's showing two button toggles? Does the code match the image?