javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 12:29:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

betterz iOS toolbars

Browse Source
This commit is contained in:
Adam Bradley
2015-05-15 12:25:24 -05:00
parent ba6561cbe2
commit 0032858e38
12 changed files with 118 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
ionic/components/app/structure.scss
View File

@ -76,6 +76,10 @@ ion-toolbar {
// by default .nav-item is hidden
// and the transition animation will display it
display: none;
&.show-nav-item {
display: block;
}
}
ion-content {

4
ionic/components/nav/test/basic/pages/second-page.js
View File

@ -1,14 +1,14 @@
import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
import {View} from 'angular2/src/core/annotations_impl/view';
import {NavController, NavParams, Header, Toolbar} from 'ionic/ionic';
import {NavController, NavParams, Header, Toolbar, ToolbarTitle} from 'ionic/ionic';
import {ThirdPage} from './third-page';
@Component()
@View({
templateUrl: 'pages/second-page.html',
directives: [Header, Toolbar]
directives: [Header, Toolbar, ToolbarTitle]
})
export class SecondPage {
constructor(

4
ionic/components/nav/test/basic/pages/third-page.js
View File

@ -1,13 +1,13 @@
import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
import {View} from 'angular2/src/core/annotations_impl/view';
import {NavController, Header, Toolbar} from 'ionic/ionic';
import {NavController, Header, Toolbar, ToolbarTitle} from 'ionic/ionic';
@Component()
@View({
templateUrl: 'pages/third-page.html',
directives: [Header, Toolbar]
directives: [Header, Toolbar, ToolbarTitle]
})
export class ThirdPage {
constructor(

3
ionic/components/toolbar/extensions/ios.scss
View File

@ -39,6 +39,7 @@ $toolbar-ios-button-background-color: transparent !default;
.toolbar [side="primary"] {
@include flex-order(map-get($toolbar-order-ios, 'primary'));
}
.toolbar [side="secondary"] {
@include flex-order(map-get($toolbar-order-ios, 'secondary'));
}
@ -46,8 +47,10 @@ $toolbar-ios-button-background-color: transparent !default;
ion-title {
@include flex-order(map-get($toolbar-order-ios, 'title'));
font-size: $toolbar-ios-title-font-size;
font-weight: 500;
text-align: center;
}
.toolbar-back-button {
@include flex-order(map-get($toolbar-order-ios, 'back-button'));
}

14
ionic/components/toolbar/toolbar.scss
View File

@ -20,16 +20,20 @@ $toolbar-secondary-flex-order: 10;
}
ion-toolbar {
/*@include flex-display();
@include flex-direction(row);
@include flex-align-items(center);
@include flex-justify-content(space-between);*/
@include flex-justify-content(space-between);
// by default ion-toolbar is hidden
// and the transition animation will display it
// by default ion-toolbar is display:none and
// the transition animation will add the show class
display: none;
&.show-toolbar {
@include flex-display();
}
}
// buttons are primary by default
ion-toolbar .button,
ion-toolbar [side="primary"] {
@ -40,7 +44,7 @@ ion-toolbar [side="secondary"] {
@include flex-order(map-get($toolbar-order-core, 'secondary'));
}
.toolbar-title.toolbar-title {
ion-title {
// double selector to override the following
@include flex-display();
@include flex(1);