docs(NgClass): update docs, add example

Closes #4520
This commit is contained in:
Pawel Kozlowski 2015-09-22 16:05:58 +02:00
parent 90191ce261
commit df09389df8
1 changed files with 53 additions and 13 deletions

View File

@ -12,23 +12,63 @@ import {Renderer} from 'angular2/src/core/render';
import {StringMapWrapper, isListLikeIterable} from 'angular2/src/core/facade/collection';
/**
* Adds and removes CSS classes based on an {expression} value.
* The `NgClass` directive conditionally adds and removes CSS classes on an HTML element based on
* an expression's evaluation result.
*
* The result of expression is used to add and remove CSS classes using the following logic,
* based on expression's value type:
* - {string} - all the CSS classes (space - separated) are added
* - {Array} - all the CSS classes (Array elements) are added
* - {Object} - each key corresponds to a CSS class name while values
* are interpreted as {boolean} expression. If a given expression
* evaluates to {true} a corresponding CSS class is added - otherwise
* it is removed.
* The result of an expression evaluation is interpreted differently depending on type of
* the expression evaluation result:
* - `string` - all the CSS classes listed in a string (space delimited) are added
* - `Array` - all the CSS classes (Array elements) are added
* - `Object` - each key corresponds to a CSS class name while values are interpreted as expressions
* evaluating to `Boolean`. If a given expression evaluates to `true` a corresponding CSS class
* is added - otherwise it is removed.
*
* # Example:
* While the `NgClass` directive can interpret expressions evaluating to `string`, `Array`
* or `Object`, the `Object`-based version is the most often used and has an advantage of keeping
* all the CSS class names in a template.
*
* ### Example ([live demo](http://plnkr.co/edit/a4YdtmWywhJ33uqfpPPn?p=preview)):
*
* ```
* <div class="message" [ng-class]="{error: errorCount > 0}">
* Please check errors.
* </div>
* import {Component, View, NgClass} from 'angular2/angular2';
*
* @Component({
* selector: 'toggle-button',
* inputs: ['isDisabled']
* })
* @View({
* template: `
* <div class="button" [ng-class]="{active: isOn, disabled: isDisabled}"
* (click)="toggle(!isOn)">
* Click me!
* </div>`,
* styles: [`
* .button {
* width: 120px;
* border: medium solid black;
* }
*
* .active {
* background-color: red;
* }
*
* .disabled {
* color: gray;
* border: medium solid gray;
* }
* `]
* directives: [NgClass]
* })
* class ToggleButton {
* isOn = false;
* isDisabled = false;
*
* toggle(newState) {
* if (!this.isDisabled) {
* this.isOn = newState;
* }
* }
* }
* ```
*/
@Directive({selector: '[ng-class]', inputs: ['rawClass: ng-class', 'initialClasses: class']})