123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. import { Directive, 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 class Chip extends Ion {
  92. constructor(config, elementRef, renderer) {
  93. super(config, elementRef, renderer, 'chip');
  94. }
  95. }
  96. Chip.decorators = [
  97. { type: Directive, args: [{
  98. selector: 'ion-chip'
  99. },] },
  100. ];
  101. /** @nocollapse */
  102. Chip.ctorParameters = () => [
  103. { type: Config, },
  104. { type: ElementRef, },
  105. { type: Renderer, },
  106. ];
  107. //# sourceMappingURL=chip.js.map