typography.js 2.0KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. import { Directive, ElementRef, Renderer } from '@angular/core';
  2. import { Config } from '../../config/config';
  3. import { Ion } from '../ion';
  4. /**
  5. * @name Typography
  6. * @module ionic
  7. * @description
  8. *
  9. * The Typography component is a simple component that can be used to style the text color of any element.
  10. * The `ion-text` attribute should be added to the element in order to pass a color from the Sass `$colors`
  11. * map and change the text color of that element.
  12. *
  13. * @usage
  14. *
  15. * ```html
  16. * <h1 ion-text color="secondary">H1: The quick brown fox jumps over the lazy dog</h1>
  17. *
  18. * <h2 ion-text color="primary">H2: The quick brown fox jumps over the lazy dog</h2>
  19. *
  20. * <h3 ion-text color="light">H3: The quick brown fox jumps over the lazy dog</h3>
  21. *
  22. * <h4 ion-text color="danger">H4: The quick brown fox jumps over the lazy dog</h4>
  23. *
  24. * <h5 ion-text color="dark">H5: The quick brown fox jumps over the lazy dog</h5>
  25. *
  26. * <h6 ion-text [color]="dynamicColor">H6: The quick brown fox jumps over the lazy dog</h6>
  27. *
  28. * <p>
  29. * I saw a werewolf with a Chinese menu in his hand.
  30. * Walking through the <sub ion-text color="danger">streets</sub> of Soho in the rain.
  31. * He <i ion-text color="primary">was</i> looking for a place called Lee Ho Fook's.
  32. * Gonna get a <a ion-text color="secondary">big dish of beef chow mein.</a>
  33. * </p>
  34. *
  35. * <p>
  36. * He's the hairy-handed gent who ran amuck in Kent.
  37. * Lately he's <sup ion-text color="primary">been</sup> overheard in Mayfair.
  38. * Better stay away from him.
  39. * He'll rip your lungs out, Jim.
  40. * I'd like to meet his tailor.
  41. * </p>
  42. * ```
  43. *
  44. */
  45. export class Typography extends Ion {
  46. constructor(config, elementRef, renderer) {
  47. super(config, elementRef, renderer, 'text');
  48. }
  49. }
  50. Typography.decorators = [
  51. { type: Directive, args: [{
  52. selector: '[ion-text]'
  53. },] },
  54. ];
  55. /** @nocollapse */
  56. Typography.ctorParameters = () => [
  57. { type: Config, },
  58. { type: ElementRef, },
  59. { type: Renderer, },
  60. ];
  61. //# sourceMappingURL=typography.js.map