toolbar.d.ts 3.3KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. import { ElementRef, Renderer } from '@angular/core';
  2. import { Config } from '../../config/config';
  3. import { ToolbarBase } from './toolbar-base';
  4. /**
  5. * @name Toolbar
  6. * @description
  7. * A Toolbar is a generic bar that is positioned above or below content.
  8. * Unlike a [Navbar](../Navbar/), a toolbar can be used as a subheader.
  9. * When toolbars are placed within an `<ion-header>` or `<ion-footer>`,
  10. * the toolbars stay fixed in their respective location. When placed within
  11. * `<ion-content>`, toolbars will scroll with the content.
  12. *
  13. *
  14. * ### Buttons in a Toolbar
  15. * Buttons placed in a toolbar should be placed inside of the `<ion-buttons>`
  16. * element. An exception to this is a [menuToggle](../../menu/MenuToggle) button.
  17. * It should not be placed inside of the `<ion-buttons>` element. Both the
  18. * `<ion-buttons>` element and the `menuToggle` can be positioned inside of the
  19. * toolbar using different properties. The below chart has a description of each
  20. * property.
  21. *
  22. * | Property | Description |
  23. * |-------------|-----------------------------------------------------------------------------------------------------------------------|
  24. * | `start` | Positions element to the left of the content in `ios` mode, and directly to the right in `md` and `wp` mode. |
  25. * | `end` | Positions element to the right of the content in `ios` mode, and to the far right in `md` and `wp` mode. |
  26. * | `left` | Positions element to the left of all other elements. |
  27. * | `right` | Positions element to the right of all other elements. |
  28. *
  29. *
  30. * ### Header / Footer Box Shadow and Border
  31. * In `md` mode, the `<ion-header>` will receive a box-shadow on the bottom, and the
  32. * `<ion-footer>` will receive a box-shadow on the top. In `ios` mode, the `<ion-header>`
  33. * will receive a border on the bottom, and the `<ion-footer>` will receive a border on the
  34. * top. Both the `md` box-shadow and the `ios` border can be removed by adding the `no-border`
  35. * attribute to the element.
  36. *
  37. * ```html
  38. * <ion-header no-border>
  39. * <ion-toolbar>
  40. * <ion-title>Header</ion-title>
  41. * </ion-toolbar>
  42. * </ion-header>
  43. *
  44. * <ion-content>
  45. * </ion-content>
  46. *
  47. * <ion-footer no-border>
  48. * <ion-toolbar>
  49. * <ion-title>Footer</ion-title>
  50. * </ion-toolbar>
  51. * </ion-footer>
  52. * ```
  53. *
  54. * @usage
  55. *
  56. * ```html
  57. *
  58. * <ion-header no-border>
  59. *
  60. * <ion-toolbar>
  61. * <ion-title>My Toolbar Title</ion-title>
  62. * </ion-toolbar>
  63. *
  64. * <ion-toolbar>
  65. * <ion-title>I'm a subheader</ion-title>
  66. * </ion-toolbar>
  67. *
  68. * <ion-header>
  69. *
  70. *
  71. * <ion-content>
  72. *
  73. * <ion-toolbar>
  74. * <ion-title>Scrolls with the content</ion-title>
  75. * </ion-toolbar>
  76. *
  77. * </ion-content>
  78. *
  79. *
  80. * <ion-footer no-border>
  81. *
  82. * <ion-toolbar>
  83. * <ion-title>I'm a footer</ion-title>
  84. * </ion-toolbar>
  85. *
  86. * </ion-footer>
  87. * ```
  88. *
  89. * @demo /docs/demos/src/toolbar/
  90. * @see {@link ../Navbar/ Navbar API Docs}
  91. */
  92. export declare class Toolbar extends ToolbarBase {
  93. /** @hidden */
  94. _sbPadding: boolean;
  95. constructor(config: Config, elementRef: ElementRef, renderer: Renderer);
  96. }