🚀. Socket Launch Week Day 3:Socket Firewall Now Blocks Malicious VS Code and Open VSX Extensions.Learn more
Sign In

@angular2-material/button-toggle

Package Overview
Dependencies
Maintainers
1
Versions
20
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@angular2-material/button-toggle - npm Package Compare versions

Comparing version
2.0.0-alpha.8-2
to
2.0.0-alpha.8-3
+77
-14
package.json
{
"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:
![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
<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:
![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
<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:
![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
<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:
![Disabled Toggle Buttons Example](https://material.angularjs.org/material2_assets/button-toggle/disabled-toggles.png)
## `<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.