| 1 | import { ElementRef, Renderer } from '@angular/core';
|
| 2 | import { Config } from '../../config/config';
|
| 3 | import { Ion } from '../ion';
|
| 4 | /**
|
| 5 | * @name Chip
|
| 6 | * @module ionic
|
| 7 | * @description
|
| 8 | * Chips represent complex entities in small blocks, such as a contact.
|
| 9 | *
|
| 10 | *
|
| 11 | * @usage
|
| 12 | *
|
| 13 | * ```html
|
| 14 | * <ion-chip>
|
| 15 | * <ion-label>Default</ion-label>
|
| 16 | * </ion-chip>
|
| 17 | *
|
| 18 | * <ion-chip>
|
| 19 | * <ion-label color="secondary">Secondary Label</ion-label>
|
| 20 | * </ion-chip>
|
| 21 | *
|
| 22 | * <ion-chip color="secondary">
|
| 23 | * <ion-label color="dark">Secondary w/ Dark label</ion-label>
|
| 24 | * </ion-chip>
|
| 25 | *
|
| 26 | * <ion-chip color="danger">
|
| 27 | * <ion-label>Danger</ion-label>
|
| 28 | * </ion-chip>
|
| 29 | *
|
| 30 | * <ion-chip>
|
| 31 | * <ion-icon name="pin"></ion-icon>
|
| 32 | * <ion-label>Default</ion-label>
|
| 33 | * </ion-chip>
|
| 34 | *
|
| 35 | * <ion-chip>
|
| 36 | * <ion-icon name="heart" color="dark"></ion-icon>
|
| 37 | * <ion-label>Default</ion-label>
|
| 38 | * </ion-chip>
|
| 39 | *
|
| 40 | * <ion-chip>
|
| 41 | * <ion-avatar>
|
| 42 | * <img src="assets/img/my-img.png">
|
| 43 | * </ion-avatar>
|
| 44 | * <ion-label>Default</ion-label>
|
| 45 | * </ion-chip>
|
| 46 | * ```
|
| 47 | *
|
| 48 | *
|
| 49 | * @advanced
|
| 50 | *
|
| 51 | * ```html
|
| 52 | * <ion-chip #chip1>
|
| 53 | * <ion-label>Default</ion-label>
|
| 54 | * <button ion-button clear color="light" (click)="delete(chip1)">
|
| 55 | * <ion-icon name="close-circle"></ion-icon>
|
| 56 | * </button>
|
| 57 | * </ion-chip>
|
| 58 | *
|
| 59 | * <ion-chip #chip2>
|
| 60 | * <ion-icon name="pin" color="primary"></ion-icon>
|
| 61 | * <ion-label>With Icon</ion-label>
|
| 62 | * <button ion-button (click)="delete(chip2)">
|
| 63 | * <ion-icon name="close"></ion-icon>
|
| 64 | * </button>
|
| 65 | * </ion-chip>
|
| 66 | *
|
| 67 | * <ion-chip #chip3>
|
| 68 | * <ion-avatar>
|
| 69 | * <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
|
| 70 | * </ion-avatar>
|
| 71 | * <ion-label>With Avatar</ion-label>
|
| 72 | * <button ion-button clear color="dark" (click)="delete(chip3)">
|
| 73 | * <ion-icon name="close-circle"></ion-icon>
|
| 74 | * </button>
|
| 75 | * </ion-chip>
|
| 76 | * ```
|
| 77 | *
|
| 78 | * ```ts
|
| 79 | * @Component({
|
| 80 | * templateUrl: 'main.html'
|
| 81 | * })
|
| 82 | * class E2EPage {
|
| 83 | * delete(chip: Element) {
|
| 84 | * chip.remove();
|
| 85 | * }
|
| 86 | * }
|
| 87 | * ```
|
| 88 | *
|
| 89 | * @demo /docs/demos/src/chip/
|
| 90 | **/
|
| 91 | export declare class Chip extends Ion {
|
| 92 | constructor(config: Config, elementRef: ElementRef, renderer: Renderer);
|
| 93 | }
|