javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 19:21:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(toolbar): added the ability to add a search bar or segment in toolbar

Browse Source 
Removed ion-segments dependency on being in the ion-title as this
should be for text only. References #356
This commit is contained in:
Brandy Carney
2015-11-02 15:43:00 -05:00
parent c19fcd5bed
commit ccd109dfee
3 changed files with 29 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
ionic/components/segment/segment.scss
View File

@ -7,6 +7,7 @@ $segment-button-padding: 0 16px !default;
ion-segment { ion-segment {
display: block; display: block;
width: 100%;
} }
.ion-segment { .ion-segment {

60
ionic/components/segment/test/basic/main.html
View File

@ -1,14 +1,12 @@
<ion-toolbar> <ion-toolbar>
<ion-title> <ion-segment [(ng-model)]="relationship">
<ion-segment [(ng-model)]="relationship"> <ion-segment-button value="friends" class="e2eSegmentFriends">
<ion-segment-button value="friends" class="e2eSegmentFriends"> Friends
Friends </ion-segment-button>
</ion-segment-button> <ion-segment-button value="enemies">
<ion-segment-button value="enemies"> Enemies
Enemies </ion-segment-button>
</ion-segment-button> </ion-segment>
</ion-segment>
</ion-title>
</ion-toolbar> </ion-toolbar>
<ion-toolbar> <ion-toolbar>
@ -17,16 +15,14 @@
<icon search></icon> <icon search></icon>
</button> </button>
</ion-nav-items> </ion-nav-items>
<ion-title> <ion-segment secondary>
<ion-segment secondary> <ion-segment-button>
<ion-segment-button> Something
Something </ion-segment-button>
</ion-segment-button> <ion-segment-button>
<ion-segment-button> Else
Else </ion-segment-button>
</ion-segment-button> </ion-segment>
</ion-segment>
</ion-title>
</ion-toolbar> </ion-toolbar>
<ion-content padding> <ion-content padding>
@ -87,17 +83,15 @@
</ion-content> </ion-content>
<ion-toolbar position="bottom"> <ion-toolbar position="bottom">
<ion-title> <ion-segment [(ng-model)]="appType" primary>
<ion-segment [(ng-model)]="appType" primary> <ion-segment-button value="paid">
<ion-segment-button value="paid"> Paid
Paid </ion-segment-button>
</ion-segment-button> <ion-segment-button value="free">
<ion-segment-button value="free"> Free
Free </ion-segment-button>
</ion-segment-button> <ion-segment-button value="top" class="e2eSegmentTopGrossing">
<ion-segment-button value="top" class="e2eSegmentTopGrossing"> Top Grossing
Top Grossing </ion-segment-button>
</ion-segment-button> </ion-segment>
</ion-segment>
</ion-title>
</ion-toolbar> </ion-toolbar>

2
ionic/components/toolbar/toolbar.ts
View File

@ -60,7 +60,7 @@ export class ToolbarBase extends Ion {
template: template:
'<div class="toolbar-inner">' + '<div class="toolbar-inner">' +
'<ng-content select="[menu-toggle]"></ng-content>' + '<ng-content select="[menu-toggle]"></ng-content>' +
'<ng-content select="ion-title"></ng-content>' + '<ng-content select="ion-title,ion-search-bar,ion-segment"></ng-content>' +
'<ng-content select="ion-nav-items[primary]"></ng-content>' + '<ng-content select="ion-nav-items[primary]"></ng-content>' +
'<ng-content select="ion-nav-items[secondary]"></ng-content>' + '<ng-content select="ion-nav-items[secondary]"></ng-content>' +
'</div>' + '</div>' +