docs(toolbar): update API docs and any tests to remove old toolbar attributes

2026-03-13 10:22:08 +08:00 · 2016-12-07 11:59:26 -05:00
parent b73304e3aa
commit e210448e63
14 changed files with 87 additions and 140 deletions
--- a/src/components/app/test/cordova/page1.html
+++ b/src/components/app/test/cordova/page1.html
@@ -18,7 +18,7 @@
    </button>
  </ion-navbar>

-  <ion-toolbar no-border-top>
+  <ion-toolbar>
    <ion-title>I'm a toolbar</ion-title>
  </ion-toolbar>

--- a/src/components/app/test/cordova/page2.html
+++ b/src/components/app/test/cordova/page2.html
@@ -1,6 +1,6 @@
 <ion-header>

-  <ion-navbar no-border-bottom>
+  <ion-navbar>
    <ion-title>Page 2</ion-title>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
@@ -15,7 +15,7 @@
    </button>
  </ion-navbar>

-  <ion-toolbar no-border-top>
+  <ion-toolbar>
    Hello, I am a sub header, with no border on top
  </ion-toolbar>

--- a/src/components/content/test/basic/page3.html
+++ b/src/components/content/test/basic/page3.html
@@ -1,5 +1,5 @@
 <ion-header>
-  <ion-navbar style="opacity: 0.8" no-border-bottom>
+  <ion-navbar style="opacity: 0.8">
    <ion-title>Page 3</ion-title>
    <ion-buttons right>
      <button ion-button icon-right [navPush]="page4">
@@ -8,7 +8,7 @@
      </button>
    </ion-buttons>
  </ion-navbar>
-  <ion-toolbar class="opaque" no-border-top>
+  <ion-toolbar class="opaque">
    <ion-title>Subheader</ion-title>
  </ion-toolbar>
 </ion-header>
--- a/src/components/content/test/fullscreen/page3.html
+++ b/src/components/content/test/fullscreen/page3.html
@@ -1,5 +1,5 @@
 <ion-header>
-  <ion-navbar style="opacity: 0.8" no-border-bottom>
+  <ion-navbar style="opacity: 0.8">
    <ion-title>Page 3</ion-title>
    <ion-buttons right>
      <button ion-button icon-right [navPush]="page4">
@@ -8,7 +8,7 @@
      </button>
    </ion-buttons>
  </ion-navbar>
-  <ion-toolbar class="opaque" no-border-top>
+  <ion-toolbar class="opaque">
    <ion-title>Subheader</ion-title>
  </ion-toolbar>
 </ion-header>
--- a/src/components/modal/test/basic/app-module.ts
+++ b/src/components/modal/test/basic/app-module.ts
@@ -280,7 +280,7 @@ export class ModalPassData {
        <ion-title>Toolbar 1</ion-title>
      </ion-toolbar>

-      <ion-toolbar no-border-top>
+      <ion-toolbar>
        <ion-title>Toolbar 2</ion-title>
      </ion-toolbar>
    </ion-header>
--- a/src/components/nav/test/basic/app-module.ts
+++ b/src/components/nav/test/basic/app-module.ts
@@ -373,7 +373,7 @@ export class FullPage {
          <button ion-button>S1g</button>
        </ion-buttons>
      </ion-navbar>
-      <ion-toolbar no-border-top>
+      <ion-toolbar>
        <ion-title>{{subheader}}</ion-title>
      </ion-toolbar>
    </ion-header>
@@ -391,10 +391,10 @@ export class FullPage {
      <div ion-fixed style="position: absolute; pointer-events: none; top:0; bottom:0; right:0; width:50%; background: rgba(0,0,0,0.5);"></div>
    </ion-content>
    <ion-footer>
-      <ion-toolbar no-border-bottom>
+      <ion-toolbar>
        I'm a sub footer!
      </ion-toolbar>
-      <ion-toolbar no-border-top>
+      <ion-toolbar>
        <ion-title>Footer</ion-title>
      </ion-toolbar>
    </ion-footer>
@@ -472,7 +472,7 @@ export class PrimaryHeaderPage {
      </ion-navbar>
    </ion-header>
    <ion-content>
-      <ion-toolbar no-border-top>
+      <ion-toolbar>
        I'm a sub header in the content!
      </ion-toolbar>
      <ion-list>
@@ -490,10 +490,10 @@ export class PrimaryHeaderPage {
        <button ion-item (click)="setBackButtonText()">Set Back Button Text</button>
        <div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div>
      </ion-list>
-      <ion-toolbar no-border-bottom>
+      <ion-toolbar>
        I'm a sub footer in the content!
      </ion-toolbar>
-      <ion-toolbar no-border-bottom no-border-top>
+      <ion-toolbar>
        And I'm a sub footer in the content too!
      </ion-toolbar>
    </ion-content>
--- a/src/components/searchbar/test/nav/search.html
+++ b/src/components/searchbar/test/nav/search.html
@@ -1,11 +1,11 @@
 <ion-header>

-  <ion-navbar no-border-bottom>
+  <ion-navbar>
    <ion-searchbar color="primary" autofocus (ionInput)="getItems($event)" placeholder="Filter Schedules">
    </ion-searchbar>
  </ion-navbar>

-  <ion-toolbar no-border-top>
+  <ion-toolbar>
    <ion-title>Searchbar</ion-title>
    <ion-buttons end>
      <button ion-button (click)="openModal()">Open modal</button>
--- a/src/components/segment/test/basic/main.html
+++ b/src/components/segment/test/basic/main.html
@@ -1,6 +1,6 @@
 <ion-header>

-  <ion-toolbar no-border-bottom>
+  <ion-toolbar>
    <ion-segment id="segment" [(ngModel)]="relationship" (ionChange)="onSegmentChanged($event)">
      <ion-segment-button value="friends" (ionSelect)="onSegmentSelected($event)" class="e2eSegmentFriends">
        Friends
@@ -11,7 +11,7 @@
    </ion-segment>
  </ion-toolbar>

-  <ion-toolbar no-border-top>
+  <ion-toolbar>
    <ion-buttons end>
      <button ion-button icon-only>
        <ion-icon name="search"></ion-icon>
@@ -117,7 +117,7 @@
    </ion-segment>
  </ion-toolbar>

-  <ion-toolbar no-border-top no-border-bottom>
+  <ion-toolbar>
    <ion-segment [(ngModel)]="appType" color="danger">
      <ion-segment-button value="paid">
        Default
@@ -131,7 +131,7 @@
    </ion-segment>
  </ion-toolbar>

-  <ion-toolbar no-border-top>
+  <ion-toolbar>
    <ion-segment [(ngModel)]="appType" color="dark" [disabled]="isDisabled">
      <ion-segment-button value="paid">
        Default
--- a/src/components/segment/test/nav/main.html
+++ b/src/components/segment/test/nav/main.html
@@ -1,12 +1,12 @@
 <ion-header>

-  <ion-navbar no-border-bottom>
+  <ion-navbar>
    <ion-title>
      Segment under Navbar
    </ion-title>
  </ion-navbar>

-  <ion-toolbar no-border-top>
+  <ion-toolbar>
    <ion-segment [(ngModel)]="signInType">
      <ion-segment-button value="new">
        New
--- a/src/components/segment/test/swipe/main.html
+++ b/src/components/segment/test/swipe/main.html
@@ -1,12 +1,12 @@
 <ion-header>

-  <ion-navbar no-border-bottom>
+  <ion-navbar>
    <ion-title>
      Segment Swipeable under Navbar
    </ion-title>
  </ion-navbar>

-  <ion-toolbar no-border-top>
+  <ion-toolbar>
    <ion-segment [(ngModel)]="selectedSegment" (ionChange)="onSegmentChanged($event)">
      <ion-segment-button value="first">
        First
--- a/src/components/tap-click/test/click-block/main.html
+++ b/src/components/tap-click/test/click-block/main.html
@@ -7,12 +7,12 @@

 <ion-header>

-  <ion-navbar no-border-bottom>
+  <ion-navbar>
    <ion-searchbar color="primary" placeholder="Filter Schedules">
    </ion-searchbar>
  </ion-navbar>

-  <ion-toolbar no-border-top>
+  <ion-toolbar>
    <ion-title>ClickBlock ( {{index}} )</ion-title>
    <ion-buttons end>
      <button ion-button (click)="showToast('long button')">Long Long Button</button>
--- a/src/components/toolbar/test/colors/main.html
+++ b/src/components/toolbar/test/colors/main.html
@@ -1,10 +1,10 @@

 <ion-content>
-  <ion-toolbar no-border-top>
+  <ion-toolbar>
    <ion-title>This is the title that never ends. It just goes on and on my friend.</ion-title>
  </ion-toolbar>

-  <ion-toolbar no-border-top>
+  <ion-toolbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
@@ -24,7 +24,7 @@
    <ion-title>Default</ion-title>
  </ion-toolbar>

-  <ion-toolbar no-border-top color="primary">
+  <ion-toolbar color="primary">
    <ion-buttons start>
      <button ion-button showWhen="ios" icon-only>
        <ion-icon name="contact"></ion-icon>
@@ -41,7 +41,7 @@
    <ion-title>Primary</ion-title>
  </ion-toolbar>

-  <ion-toolbar no-border-top color="primary">
+  <ion-toolbar color="primary">
    <ion-buttons start>
      <button ion-button showWhen="ios" icon-only class="activated">
        <ion-icon name="contact"></ion-icon>
@@ -58,7 +58,7 @@
    <ion-title>Primary.activated</ion-title>
  </ion-toolbar>

-  <ion-toolbar no-border-top color="secondary">
+  <ion-toolbar color="secondary">
    <ion-buttons start>
      <button ion-button icon-only color="primary">
        <ion-icon name="contact"></ion-icon>
@@ -77,7 +77,7 @@
    </ion-buttons>
  </ion-toolbar>

-  <ion-toolbar no-border-top color="secondary">
+  <ion-toolbar color="secondary">
    <ion-buttons start>
      <button ion-button icon-only color="primary" class="activated">
        <ion-icon name="contact"></ion-icon>
@@ -96,7 +96,7 @@
    </ion-buttons>
  </ion-toolbar>

-  <ion-toolbar no-border-top color="dark">
+  <ion-toolbar color="dark">
    <ion-buttons start>
      <button ion-button icon-only outline>
        <ion-icon name="contact"></ion-icon>
@@ -114,7 +114,7 @@
    <ion-title>Dark</ion-title>
  </ion-toolbar>

-  <ion-toolbar no-border-top color="dark">
+  <ion-toolbar color="dark">
    <ion-buttons start>
      <button ion-button outline icon-only class="activated">
        <ion-icon name="contact"></ion-icon>
@@ -132,7 +132,7 @@
    <ion-title>Dark.activated</ion-title>
  </ion-toolbar>

-  <ion-toolbar no-border-top color="danger">
+  <ion-toolbar color="danger">
    <ion-buttons start>
      <button ion-button icon-left>
        <ion-icon name="contact"></ion-icon>
@@ -148,7 +148,7 @@
    <ion-title>Danger</ion-title>
  </ion-toolbar>

-  <ion-toolbar no-border-top color="danger">
+  <ion-toolbar color="danger">
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
@@ -160,7 +160,7 @@
    <ion-title>Danger</ion-title>
  </ion-toolbar>

-  <ion-toolbar no-border-top color="light">
+  <ion-toolbar color="light">
    <ion-buttons start>
      <button ion-button icon-left>
        <ion-icon name="contact"></ion-icon>
@@ -176,7 +176,7 @@
    <ion-title>Light</ion-title>
  </ion-toolbar>

-  <ion-toolbar no-border-top color="light">
+  <ion-toolbar color="light">
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
@@ -188,7 +188,7 @@
    <ion-title>Light</ion-title>
  </ion-toolbar>

-  <ion-toolbar no-border-top transparent>
+  <ion-toolbar transparent>
    <ion-buttons end>
      <button ion-button #button1 icon-only (click)="buttonClick(button1)">
        <ion-icon name="star"></ion-icon>
--- a/src/components/toolbar/test/scenarios/main.html
+++ b/src/components/toolbar/test/scenarios/main.html
@@ -4,11 +4,11 @@
    <ion-title>This should have no padding</ion-title>
  </ion-toolbar>

-  <ion-toolbar no-border-top>
+  <ion-toolbar>
    <ion-title>This is the title that never ends. It just goes on and on my friend.</ion-title>
  </ion-toolbar>

-  <ion-toolbar no-border-top>
+  <ion-toolbar>
    <ion-buttons start>
      <button ion-button icon-only>
        <ion-icon name="contact"></ion-icon>
@@ -25,7 +25,7 @@
    <ion-title>This is a long title with buttons. It just goes on and on my friend.</ion-title>
  </ion-toolbar>

-  <ion-toolbar no-border-top>
+  <ion-toolbar>
    <ion-buttons start>
      <button ion-button icon-only>
        <ion-icon name="contact"></ion-icon>
@@ -42,7 +42,7 @@
    <ion-title>Defaults</ion-title>
  </ion-toolbar>

-  <ion-toolbar no-border-top>
+  <ion-toolbar>
    <ion-buttons start>
      <button ion-button icon-only class="activated">
        <ion-icon name="contact"></ion-icon>
@@ -59,7 +59,7 @@
    <ion-title>Defaults.activated</ion-title>
  </ion-toolbar>

-  <ion-toolbar no-border-top>
+  <ion-toolbar>
    <ion-buttons start>
      <button ion-button icon-only solid>
        <ion-icon name="contact"></ion-icon>
@@ -78,7 +78,7 @@
    </ion-buttons>
  </ion-toolbar>

-  <ion-toolbar no-border-top>
+  <ion-toolbar>
    <ion-buttons start>
      <a ion-button icon-only solid class="activated">
        <ion-icon name="contact"></ion-icon>
@@ -97,7 +97,7 @@
    </ion-buttons>
  </ion-toolbar>

-  <ion-toolbar no-border-top>
+  <ion-toolbar>
    <ion-buttons start>
      <button ion-button icon-only outline>
        <ion-icon name="contact"></ion-icon>
@@ -115,7 +115,7 @@
    <ion-title>Outline</ion-title>
  </ion-toolbar>

-  <ion-toolbar no-border-top>
+  <ion-toolbar>
    <ion-buttons start>
      <button ion-button icon-only outline class="activated">
        <ion-icon name="contact"></ion-icon>
@@ -133,7 +133,7 @@
    <ion-title>Outline.activated</ion-title>
  </ion-toolbar>

-  <ion-toolbar no-border-top>
+  <ion-toolbar>
    <ion-buttons start>
      <button ion-button icon-left>
        <ion-icon name="contact"></ion-icon>
@@ -149,7 +149,7 @@
    <ion-title>Icon/Color Attr</ion-title>
  </ion-toolbar>

-  <ion-toolbar no-border-top>
+  <ion-toolbar>
    <ion-buttons start>
      <button ion-button>
        Go Back
@@ -163,7 +163,7 @@
    <ion-title>Text Only</ion-title>
  </ion-toolbar>

-  <ion-toolbar no-border-top>
+  <ion-toolbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
@@ -175,7 +175,7 @@
    <ion-title>Left side menu toggle</ion-title>
  </ion-toolbar>

-  <ion-toolbar no-border-top>
+  <ion-toolbar>
    <ion-buttons end>
      <button ion-button icon-only #button1 (click)="buttonClick(button1)">
        <ion-icon name="star"></ion-icon>
@@ -187,7 +187,7 @@
    </button>
  </ion-toolbar>

-  <ion-toolbar no-border-top>
+  <ion-toolbar>
    <ion-buttons end>
      <button ion-button icon-only #button2 (click)="buttonClick(button2)">
        <ion-icon name="search"></ion-icon>
@@ -203,7 +203,7 @@
    </ion-segment>
  </ion-toolbar>

-  <ion-toolbar no-border-top>
+  <ion-toolbar>
    <ion-segment>
      <ion-segment-button value="light">
        Light
--- a/src/components/toolbar/toolbar.ts
+++ b/src/components/toolbar/toolbar.ts
@@ -14,22 +14,18 @@ import { ViewController } from '../../navigation/view-controller';
 *
 * @usage
 *
- * ```ts
- * @Component({
- *   template: `
- *      <ion-header>
- *        <ion-navbar>
- *          <ion-title>Page1</ion-title>
- *        </ion-navbar>
+ * ```html
+ * <ion-header>
+ *   <ion-navbar>
+ *     <ion-title>Page1</ion-title>
+ *   </ion-navbar>
 *
- *        <ion-toolbar>
- *          <ion-title>Subheader</ion-title>
- *        </ion-toolbar>
- *      </ion-header>
+ *   <ion-toolbar>
+ *     <ion-title>Subheader</ion-title>
+ *   </ion-toolbar>
+ * </ion-header>
 *
- *      <ion-content></ion-content>
- *   `
- * })
+ * <ion-content></ion-content>
 * ```
 *
 */
@@ -54,17 +50,14 @@ export class Header extends Ion {
 *
 * @usage
 *
- * ```ts
- * @Component({
- *   template: `
- *      <ion-content></ion-content>
- *      <ion-footer>
- *        <ion-toolbar>
- *          <ion-title>Footer</ion-title>
- *        </ion-toolbar>
- *      </ion-footer>
- *   `
- * })
+ * ```html
+ * <ion-content></ion-content>
+ *
+ * <ion-footer>
+ *   <ion-toolbar>
+ *     <ion-title>Footer</ion-title>
+ *   </ion-toolbar>
+ * </ion-footer>
 * ```
 *
 */
@@ -134,13 +127,15 @@ export class ToolbarBase extends Ion {
 * | `right`     | Positions element to the right of all other elements.                                                           |
 *
 *
- * ### Header / Footer Box Shadow
- * In `md` mode, the `ion-header` will receive a box-shadow on the bottom, and the
- * `ion-footer` will receive a box-shadow on the top. This can be removed by adding
- * the `no-shadow` attribute to the element.
+ * ### Header / Footer Box Shadow and Border
+ * In `md` mode, the `<ion-header>` will receive a box-shadow on the bottom, and the
+ * `<ion-footer>` will receive a box-shadow on the top.  In `ios` mode, the `<ion-header>`
+ * will receive a border on the bottom, and the `<ion-footer>` will receive a border on the
+ * top. Both the `md` box-shadow and the `ios` border can be removed by adding the `no-border`
+ * attribute to the element.
 *
 * ```html
- * <ion-header no-shadow>
+ * <ion-header no-border>
 *   <ion-toolbar>
 *     <ion-title>Header</ion-title>
 *   </ion-toolbar>
@@ -149,55 +144,24 @@ export class ToolbarBase extends Ion {
 * <ion-content>
 * </ion-content>
 *
- * <ion-footer no-shadow>
+ * <ion-footer no-border>
 *   <ion-toolbar>
 *     <ion-title>Footer</ion-title>
 *   </ion-toolbar>
 * </ion-footer>
 * ```
 *
- * ### Toolbar Borders
- * Toolbars can be stacked up vertically in `<ion-header>`, `<ion-content>`, and
- * `<ion-footer>` elements. In `ios` mode, toolbars have borders on the top and
- * bottom. To hide both borders, the `no-border` attribute should be used on the
- * `ion-toolbar`. To hide the top or bottom border, the `no-border-top` and
- * `no-border-bottom` attribute should be used.
- *
- * ```html
- * <ion-header no-shadow>
- *   <ion-toolbar no-border-bottom>
- *     <ion-title>Header</ion-title>
- *   </ion-toolbar>
- *   <ion-toolbar no-border>
- *     <ion-title>Subheader</ion-title>
- *   </ion-toolbar>
- *   <ion-toolbar no-border-top>
- *     <ion-title>Another Header</ion-title>
- *   </ion-toolbar>
- * </ion-header>
- *
- * <ion-content>
- * </ion-content>
- * ```
- *
- *
 * @usage
- * ```html
- * <ion-header no-shadow>
 *
- *   <ion-toolbar no-border-bottom>
- *     <ion-buttons start>
- *       <button ion-button>
- *         <ion-icon name="contact"></ion-icon>
- *       </button>
- *       <button ion-button>
- *         <ion-icon name="search"></ion-icon>
- *       </button>
- *     </ion-buttons>
+ * ```html
+ *
+ * <ion-header no-border>
+ *
+ *   <ion-toolbar>
 *     <ion-title>My Toolbar Title</ion-title>
 *   </ion-toolbar>
 *
- *   <ion-toolbar no-border-top>
+ *   <ion-toolbar>
 *     <ion-title>I'm a subheader</ion-title>
 *   </ion-toolbar>
 *
@@ -213,27 +177,10 @@ export class ToolbarBase extends Ion {
 * </ion-content>
 *
 *
- * <ion-footer>
+ * <ion-footer no-border>
 *
- *   <ion-toolbar no-border>
- *     <ion-title>I'm a subfooter</ion-title>
- *     <ion-buttons right>
- *       <button ion-button>
- *         <ion-icon name="menu"></ion-icon>
- *       </button>
- *     </ion-buttons>
- *   </ion-toolbar>
- *
- *   <ion-toolbar no-border-top>
+ *   <ion-toolbar>
 *     <ion-title>I'm a footer</ion-title>
- *     <ion-buttons end>
- *       <button ion-button>
- *         <ion-icon name="more"></ion-icon>
- *       </button>
- *       <button ion-button>
- *         <ion-icon name="options"></ion-icon>
- *       </button>
- *     </ion-buttons>
 *   </ion-toolbar>
 *
 * </ion-footer>