@angular2-material/checkbox
Advanced tools
+77
-14
| { | ||
| "name": "@angular2-material/checkbox", | ||
| "version": "2.0.0-alpha.8-2", | ||
| "_args": [ | ||
| [ | ||
| { | ||
| "raw": "@angular2-material/checkbox", | ||
| "scope": "@angular2-material", | ||
| "escapedName": "@angular2-material%2fcheckbox", | ||
| "name": "@angular2-material/checkbox", | ||
| "rawSpec": "", | ||
| "spec": "latest", | ||
| "type": "tag" | ||
| }, | ||
| "/private/tmp/old-packages" | ||
| ] | ||
| ], | ||
| "_from": "@angular2-material/checkbox@latest", | ||
| "_id": "@angular2-material/checkbox@2.0.0-alpha.8-3", | ||
| "_inCache": true, | ||
| "_installable": true, | ||
| "_location": "/@angular2-material/checkbox", | ||
| "_nodeVersion": "5.7.0", | ||
| "_npmOperationalInternal": { | ||
| "host": "packages-16-east.internal.npmjs.com", | ||
| "tmp": "tmp/checkbox-2.0.0-alpha.8-3.tgz_1473988779585_0.38027149671688676" | ||
| }, | ||
| "_npmUser": { | ||
| "name": "angular2-material", | ||
| "email": "angular-core+npm@google.com" | ||
| }, | ||
| "_npmVersion": "3.7.5", | ||
| "_phantomChildren": {}, | ||
| "_requested": { | ||
| "raw": "@angular2-material/checkbox", | ||
| "scope": "@angular2-material", | ||
| "escapedName": "@angular2-material%2fcheckbox", | ||
| "name": "@angular2-material/checkbox", | ||
| "rawSpec": "", | ||
| "spec": "latest", | ||
| "type": "tag" | ||
| }, | ||
| "_requiredBy": [ | ||
| "#USER" | ||
| ], | ||
| "_resolved": "https://registry.npmjs.org/@angular2-material/checkbox/-/checkbox-2.0.0-alpha.8-3.tgz", | ||
| "_shasum": "1eb6c44fccaa1d073f0582239019b62fc6804679", | ||
| "_shrinkwrap": null, | ||
| "_spec": "@angular2-material/checkbox", | ||
| "_where": "/private/tmp/old-packages", | ||
| "bugs": { | ||
| "url": "https://github.com/angular/material2/issues" | ||
| }, | ||
| "dependencies": {}, | ||
| "description": "Angular 2 Material checkbox", | ||
| "main": "./checkbox.umd.js", | ||
| "module": "./index.js", | ||
| "typings": "./index.d.ts", | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "https://github.com/angular/material2.git" | ||
| "devDependencies": {}, | ||
| "directories": {}, | ||
| "dist": { | ||
| "shasum": "1eb6c44fccaa1d073f0582239019b62fc6804679", | ||
| "tarball": "https://registry.npmjs.org/@angular2-material/checkbox/-/checkbox-2.0.0-alpha.8-3.tgz" | ||
| }, | ||
| "homepage": "https://github.com/angular/material2#readme", | ||
| "keywords": [ | ||
@@ -20,10 +69,24 @@ "angular", | ||
| "license": "MIT", | ||
| "bugs": { | ||
| "url": "https://github.com/angular/material2/issues" | ||
| }, | ||
| "homepage": "https://github.com/angular/material2#readme", | ||
| "main": "./checkbox.umd.js", | ||
| "maintainers": [ | ||
| { | ||
| "name": "angular2-material", | ||
| "email": "angular-core+npm@google.com" | ||
| } | ||
| ], | ||
| "module": "./index.js", | ||
| "name": "@angular2-material/checkbox", | ||
| "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
-79
@@ -1,79 +0,5 @@ | ||
| # md-checkbox | ||
| `md-checkbox` is a Material Design selection control that allows users to make a binary choice for | ||
| a predetermined conditioned. It is modeled after the browser's native checkbox element, and behaves | ||
| in the same way. Similar to the native checkbox element, it supports an indeterminate state for | ||
| "mixed" checkboxes. | ||
| A demo of the checkbox can be found at https://plnkr.co/edit/P7qce8lN9n2flS6kBhDy?p=preview. | ||
| ## Usage | ||
| ### Basic Usage | ||
| `md-checkbox` can be used anywhere a normal checkbox would be used, and in the same way. | ||
| ```html | ||
| <ul> | ||
| <li *ngFor="let todo of todos"> | ||
| <md-checkbox [checked]="todo.completed" | ||
| (change)="todo.completed = $event"> | ||
| {{todo.name}} | ||
| </md-checkbox> | ||
| </li> | ||
| </ul> | ||
| ``` | ||
| ### Usage within Forms | ||
| In addition to supporting native checkbox functionality, `md-checkbox` also supports `[(ngModel)]` | ||
| for use within forms. | ||
| ```html | ||
| <form (submit)="saveUser()"> | ||
| <!-- Form fields... --> | ||
| <div> | ||
| <md-checkbox [(ngModel)]="user.agreesToTOS"> | ||
| I have read and agree to the terms of service. | ||
| </md-checkbox> | ||
| </div> | ||
| <button type="submit" [disabled]="!user.agreesToTOS">Sign Up</button> | ||
| </form> | ||
| ``` | ||
| ### Indeterminate Checkboxes | ||
| Indeterminate checkboxes are useful when a checkbox needs to be in a "mixed" state | ||
| ```html | ||
| <md-checkbox [checked]="false" | ||
| [indeterminate]="isIndeterminate" | ||
| (change)="isIndeterminate = false"> | ||
| Click the Button Below to Make Me Indeterminate. | ||
| </md-checkbox> | ||
| <button type="button" (click)="isIndeterminate = true"> | ||
| Make Indeterminate | ||
| </button> | ||
| ``` | ||
| ### Alignment | ||
| Note that checkboxes can be aligned to come at the "start" or the "end" of its corresponding label. | ||
| ```html | ||
| <md-checkbox [checked]="true" align="end"> | ||
| I come after my label. | ||
| </md-checkbox> | ||
| ``` | ||
| Note that this alignment is preserved within RTL layouts. | ||
| ### Accessibility | ||
| By default, `md-checkbox` provides all the accessibility attributes needed. It also supports | ||
| keyboard navigation and toggling via the spacebar. However, you can provide an `aria-label` to the | ||
| checkbox if you do not wish to have any label text. | ||
| ```html | ||
| <md-checkbox [checked]="false" aria-label="My standalone checkbox"></md-checkbox> | ||
| ``` | ||
| 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. |
146719
0.06%6
-92.5%