@angular2-material/button-toggle
Advanced tools
+77
-14
| { | ||
| "name": "@angular2-material/button-toggle", | ||
| "version": "2.0.0-alpha.8-2", | ||
| "_args": [ | ||
| [ | ||
| { | ||
| "raw": "@angular2-material/button-toggle", | ||
| "scope": "@angular2-material", | ||
| "escapedName": "@angular2-material%2fbutton-toggle", | ||
| "name": "@angular2-material/button-toggle", | ||
| "rawSpec": "", | ||
| "spec": "latest", | ||
| "type": "tag" | ||
| }, | ||
| "/private/tmp/old-packages" | ||
| ] | ||
| ], | ||
| "_from": "@angular2-material/button-toggle@latest", | ||
| "_id": "@angular2-material/button-toggle@2.0.0-alpha.8-3", | ||
| "_inCache": true, | ||
| "_installable": true, | ||
| "_location": "/@angular2-material/button-toggle", | ||
| "_nodeVersion": "5.7.0", | ||
| "_npmOperationalInternal": { | ||
| "host": "packages-12-west.internal.npmjs.com", | ||
| "tmp": "tmp/button-toggle-2.0.0-alpha.8-3.tgz_1473988771213_0.8481078539043665" | ||
| }, | ||
| "_npmUser": { | ||
| "name": "angular2-material", | ||
| "email": "angular-core+npm@google.com" | ||
| }, | ||
| "_npmVersion": "3.7.5", | ||
| "_phantomChildren": {}, | ||
| "_requested": { | ||
| "raw": "@angular2-material/button-toggle", | ||
| "scope": "@angular2-material", | ||
| "escapedName": "@angular2-material%2fbutton-toggle", | ||
| "name": "@angular2-material/button-toggle", | ||
| "rawSpec": "", | ||
| "spec": "latest", | ||
| "type": "tag" | ||
| }, | ||
| "_requiredBy": [ | ||
| "#USER" | ||
| ], | ||
| "_resolved": "https://registry.npmjs.org/@angular2-material/button-toggle/-/button-toggle-2.0.0-alpha.8-3.tgz", | ||
| "_shasum": "e64e8d0db6bf851b29db9fc72ff75ee76003f561", | ||
| "_shrinkwrap": null, | ||
| "_spec": "@angular2-material/button-toggle", | ||
| "_where": "/private/tmp/old-packages", | ||
| "bugs": { | ||
| "url": "https://github.com/angular/material2/issues" | ||
| }, | ||
| "dependencies": {}, | ||
| "description": "Angular 2 Material Button Toggle", | ||
| "main": "./button-toggle.umd.js", | ||
| "module": "./index.js", | ||
| "typings": "./index.d.ts", | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "https://github.com/angular/material2.git" | ||
| "devDependencies": {}, | ||
| "directories": {}, | ||
| "dist": { | ||
| "shasum": "e64e8d0db6bf851b29db9fc72ff75ee76003f561", | ||
| "tarball": "https://registry.npmjs.org/@angular2-material/button-toggle/-/button-toggle-2.0.0-alpha.8-3.tgz" | ||
| }, | ||
| "homepage": "https://github.com/angular/material2#readme", | ||
| "keywords": [ | ||
@@ -22,10 +71,24 @@ "angular", | ||
| "license": "MIT", | ||
| "bugs": { | ||
| "url": "https://github.com/angular/material2/issues" | ||
| }, | ||
| "homepage": "https://github.com/angular/material2#readme", | ||
| "main": "./button-toggle.umd.js", | ||
| "maintainers": [ | ||
| { | ||
| "name": "angular2-material", | ||
| "email": "angular-core+npm@google.com" | ||
| } | ||
| ], | ||
| "module": "./index.js", | ||
| "name": "@angular2-material/button-toggle", | ||
| "optionalDependencies": {}, | ||
| "peerDependencies": { | ||
| "@angular2-material/core": "2.0.0-alpha.8-2", | ||
| "@angular2-material/core": "2.0.0-alpha.8-3", | ||
| "@angular/forms": "^2.0.0" | ||
| } | ||
| }, | ||
| "readme": "ERROR: No README data found!", | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "git+https://github.com/angular/material2.git" | ||
| }, | ||
| "scripts": {}, | ||
| "typings": "./index.d.ts", | ||
| "version": "2.0.0-alpha.8-3" | ||
| } |
+5
-149
@@ -1,149 +0,5 @@ | ||
| # 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 module: | ||
| ```ts | ||
| @NgModule({ | ||
| imports: [MdButtonToggleModule], | ||
| ... | ||
| }) | ||
| export class MyAppModule { } | ||
| ``` | ||
| ### 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 | ||
| 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> | ||
| ``` | ||
| Output: | ||
|  | ||
| ## Dynamic Exclusive Selection | ||
| `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 package was used early in the pre-release development cycle of Angular Material v2, but has no | ||
| longer been used since September of 2016. Development of Angular Material now occurs under scoped | ||
| npm package @angular/material. Visit https://material.angular.io for the latest information and | ||
| instructions for using Angular Material or check out the latest source code | ||
| from https://github.com/angular/material2. |
114411
-2.34%6
-96%