feat(toolbar): control toolbar borders on top/bottom

Toolbars can be stacked up vertically in `<ion-header>`,
`<ion-content>`, and `<ion-footer>` 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.
This commit is contained in:
Adam Bradley
2016-06-20 12:01:21 -05:00
parent a1223da08c
commit 3a7addf7b0
16 changed files with 98 additions and 65 deletions

View File

@ -1,6 +1,6 @@
<ion-header>
<ion-toolbar>
<ion-toolbar no-border-bottom>
<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>
<ion-toolbar no-border-top>
<ion-buttons end>
<button>
<ion-icon name="search"></ion-icon>
@ -117,7 +117,7 @@
</ion-segment>
</ion-toolbar>
<ion-toolbar>
<ion-toolbar no-border-top no-border-bottom>
<ion-segment [(ngModel)]="appType" danger>
<ion-segment-button value="paid">
Default
@ -131,7 +131,7 @@
</ion-segment>
</ion-toolbar>
<ion-toolbar>
<ion-toolbar no-border-top>
<ion-segment [(ngModel)]="appType" dark [disabled]="isDisabled">
<ion-segment-button value="paid">
Default

View File

@ -1,12 +1,12 @@
<ion-header>
<ion-navbar>
<ion-navbar no-border-bottom>
<ion-title>
Segment under Navbar
</ion-title>
</ion-navbar>
<ion-toolbar>
<ion-toolbar no-border-top>
<ion-segment [(ngModel)]="signInType">
<ion-segment-button value="new">
New

View File

@ -1,12 +1,12 @@
<ion-header>
<ion-navbar>
<ion-navbar no-border-bottom>
<ion-title>
Segment Swipeable under Navbar
</ion-title>
</ion-navbar>
<ion-toolbar>
<ion-toolbar no-border-top>
<ion-segment [(ngModel)]="selectedSegment" (ionChange)="onSegmentChanged($event)">
<ion-segment-button value="first">
First