mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-23 05:58:26 +08:00
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:
@ -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
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
Reference in New Issue
Block a user