button.d.ts 5.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209
  1. import { ElementRef, Renderer } from '@angular/core';
  2. import { Config } from '../../config/config';
  3. import { Ion } from '../ion';
  4. /**
  5. * @name Button
  6. * @module ionic
  7. * @description
  8. * Buttons are simple components in Ionic. They can consist of text and icons
  9. * and be enhanced by a wide range of attributes.
  10. *
  11. * @usage
  12. *
  13. * ```html
  14. *
  15. * <!-- Colors -->
  16. * <button ion-button>Default</button>
  17. *
  18. * <button ion-button color="secondary">Secondary</button>
  19. *
  20. * <button ion-button color="danger">Danger</button>
  21. *
  22. * <button ion-button color="light">Light</button>
  23. *
  24. * <button ion-button color="dark">Dark</button>
  25. *
  26. * <!-- Shapes -->
  27. * <button ion-button full>Full Button</button>
  28. *
  29. * <button ion-button block>Block Button</button>
  30. *
  31. * <button ion-button round>Round Button</button>
  32. *
  33. * <!-- Outline -->
  34. * <button ion-button full outline>Outline + Full</button>
  35. *
  36. * <button ion-button block outline>Outline + Block</button>
  37. *
  38. * <button ion-button round outline>Outline + Round</button>
  39. *
  40. * <!-- Icons -->
  41. * <button ion-button icon-start>
  42. * <ion-icon name="star"></ion-icon>
  43. * Left Icon
  44. * </button>
  45. *
  46. * <button ion-button icon-end>
  47. * Right Icon
  48. * <ion-icon name="star"></ion-icon>
  49. * </button>
  50. *
  51. * <button ion-button icon-only>
  52. * <ion-icon name="star"></ion-icon>
  53. * </button>
  54. *
  55. * <!-- Sizes -->
  56. * <button ion-button large>Large</button>
  57. *
  58. * <button ion-button>Default</button>
  59. *
  60. * <button ion-button small>Small</button>
  61. * ```
  62. *
  63. * @advanced
  64. *
  65. * ```html
  66. *
  67. * <!-- Bind the color and outline inputs to an expression -->
  68. * <button ion-button [color]="isDanger ? 'danger' : 'primary'" [outline]="isOutline">
  69. * Danger (Solid)
  70. * </button>
  71. *
  72. * <!-- Bind the color and round inputs to an expression -->
  73. * <button ion-button [color]="myColor" [round]="isRound">
  74. * Secondary (Round)
  75. * </button>
  76. *
  77. * <!-- Bind the color and clear inputs to an expression -->
  78. * <button ion-button [color]="isSecondary ? 'secondary' : 'primary'" [clear]="isClear">
  79. * Primary (Clear)
  80. * </button>
  81. *
  82. * <!-- Bind the color, outline and round inputs to an expression -->
  83. * <button ion-button [color]="myColor2" [outline]="isOutline" [round]="isRound">
  84. * Dark (Solid + Round)
  85. * </button>
  86. *
  87. * <!-- Bind the click event to a method -->
  88. * <button ion-button (click)="logEvent($event)">
  89. * Click me!
  90. * </button>
  91. * ```
  92. *
  93. * ```ts
  94. * @Component({
  95. * templateUrl: 'main.html'
  96. * })
  97. * class E2EPage {
  98. * isDanger: boolean = true;
  99. * isSecondary: boolean = false;
  100. * isRound: boolean = true;
  101. * isOutline: boolean = false;
  102. * isClear: boolean = true;
  103. * myColor: string = 'secondary';
  104. * myColor2: string = 'dark';
  105. *
  106. * logEvent(event) {
  107. * console.log(event)
  108. * }
  109. * }
  110. *
  111. * ```
  112. *
  113. * @demo /docs/demos/src/button/
  114. * @see {@link /docs/components#buttons Button Component Docs}
  115. * @see {@link /docs/components#fabs FabButton Docs}
  116. * @see {@link ../../fab/FabButton FabButton API Docs}
  117. * @see {@link ../../fab/FabContainer FabContainer API Docs}
  118. */
  119. export declare class Button extends Ion {
  120. /** @hidden */
  121. _role: string;
  122. /** @hidden */
  123. _size: string;
  124. /** @hidden */
  125. _style: string;
  126. /** @hidden */
  127. _shape: string;
  128. /** @hidden */
  129. _display: string;
  130. /** @hidden */
  131. _decorator: string;
  132. /** @hidden */
  133. _init: boolean;
  134. /**
  135. * @input {boolean} If true, activates the large button size.
  136. */
  137. large: boolean;
  138. /**
  139. * @input {boolean} If true, activates the small button size.
  140. */
  141. small: boolean;
  142. /**
  143. * @input {boolean} If true, activates the default button size. Normally the default, useful for buttons in an item.
  144. */
  145. default: boolean;
  146. /**
  147. * @input {boolean} If true, activates a transparent button style with a border.
  148. */
  149. outline: boolean;
  150. /**
  151. * @input {boolean} If true, activates a transparent button style without a border.
  152. */
  153. clear: boolean;
  154. /**
  155. * @input {boolean} If true, activates a solid button style. Normally the default, useful for buttons in a toolbar.
  156. */
  157. solid: boolean;
  158. /**
  159. * @input {boolean} If true, activates a button with rounded corners.
  160. */
  161. round: boolean;
  162. /**
  163. * @input {boolean} If true, activates a button style that fills the available width.
  164. */
  165. block: boolean;
  166. /**
  167. * @input {boolean} If true, activates a button style that fills the available width without
  168. * a left and right border.
  169. */
  170. full: boolean;
  171. /**
  172. * @input {boolean} If true, activates a button with a heavier font weight.
  173. */
  174. strong: boolean;
  175. /**
  176. * @input {string} The mode determines which platform styles to use.
  177. * Possible values are: `"ios"`, `"md"`, or `"wp"`.
  178. * For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
  179. */
  180. mode: string;
  181. /** @hidden */
  182. _attr(type: string, attrName: string, attrValue: boolean): void;
  183. /**
  184. * @input {string} The color to use from your Sass `$colors` map.
  185. * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
  186. * For more information, see [Theming your App](/docs/theming/theming-your-app).
  187. */
  188. color: string;
  189. constructor(ionButton: string, config: Config, elementRef: ElementRef, renderer: Renderer);
  190. /** @hidden */
  191. ngAfterContentInit(): void;
  192. /**
  193. * @hidden
  194. */
  195. setRole(val: string): void;
  196. /**
  197. * @hidden
  198. */
  199. _assignCss(assignCssClass: boolean): void;
  200. /**
  201. * @hidden
  202. */
  203. _setClass(type: string, assignCssClass: boolean): void;
  204. /**
  205. * @hidden
  206. */
  207. _updateColor(color: string, isAdd: boolean): void;
  208. }