Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lacinia purus ac turpis fermentum, nec accumsan nulla rutrum. Aenean lorem est, luctus id iaculis ac, ultricies quis odio. Aenean imperdiet imperdiet ex et vehicula. Suspendisse vulputate turpis quis ultricies porttitor. Proin malesuada tortor at libero laoreet, eu eleifend enim pulvinar. Nulla facilisi. Fusce sit amet mauris mauris. Mauris consequat libero sed egestas tincidunt.
diff --git a/src/components/toolbar/toolbar.ios.scss b/src/components/toolbar/toolbar.ios.scss
index 7395bbd0d02..3607b582423 100644
--- a/src/components/toolbar/toolbar.ios.scss
+++ b/src/components/toolbar/toolbar.ios.scss
@@ -38,41 +38,35 @@ $navbar-ios-height: $toolbar-ios-height !default;
}
-// iOS Header Toolbar
+// iOS Toolbar Background
// --------------------------------------------------
-ion-header {
- border: 0;
+.toolbar-background {
+ border-top-width: 1px;
border-bottom-width: 1px;
border-style: solid;
border-color: $toolbar-ios-border-color;
+ background: $toolbar-ios-background;
}
-&.hairlines ion-header {
+&.hairlines .toolbar-background {
+ border-top-width: $hairlines-width;
border-bottom-width: $hairlines-width;
}
-// iOS Footer Toolbar
+// iOS Toolbar Borders
// --------------------------------------------------
-ion-footer {
- border: 0;
- border-top-width: 1px;
- border-style: solid;
- border-color: $toolbar-ios-border-color;
+ion-header .toolbar:first-child .toolbar-background,
+ion-menu > .toolbar:first-child .toolbar-background,
+.toolbar[no-border-top] .toolbar-background {
+ border-top-width: 0;
}
-&.hairlines ion-footer {
- border-top-width: $hairlines-width;
-}
-
-
-// iOS Toolbar Background
-// --------------------------------------------------
-
-.toolbar-background {
- background: $toolbar-ios-background;
+ion-footer .toolbar:last-child .toolbar-background,
+.toolbar[no-border-bottom] .toolbar-background {
+ border-bottom-width: 0;
}
diff --git a/src/components/toolbar/toolbar.ts b/src/components/toolbar/toolbar.ts
index f985b0a4417..4078936d373 100644
--- a/src/components/toolbar/toolbar.ts
+++ b/src/components/toolbar/toolbar.ts
@@ -116,14 +116,25 @@ export class ToolbarBase extends Ion {
* | `left` | Positions element to the left of all other elements. |
* | `right` | Positions element to the right of all other elements. |
*
- * See [usage](#usage) below for some examples.
+ *
+ * ### Multiple Toolbars
+ * Toolbars can be stacked up vertically in ``, ``, and
+ * `` elements. However, toolbars also come with borders on both
+ * the top and bottom of the toolbar. To give developers full control of the
+ * design, Ionic also includes the `no-border-bottom` and `no-border-top` attributes.
+ * For example, sometimes two vertically stacked toolbars may have different
+ * background colors, in this case it might be best to leave a border between them.
+ * However, if they have the same background color, the app may look best without
+ * a border between them. The main point here is, it's entirely up to the app's design
+ * to decide when and when not to show borders between toolbars, and to do so then
+ * each toolbar can individually set `no-border-bottom` and `no-border-top` attributes.
*
*
* @usage
* ```html
*
*
- *
+ *
*
*
*
- *
+ *
* I'm a subheader
*
*
@@ -153,7 +164,7 @@ export class ToolbarBase extends Ion {
*
*
*
- *
+ *
* I'm a subfooter
*
*
*
*
- *
+ *
* I'm a footer
*
*