docs(demos): force android navbar color

This commit is contained in:
Drew Rygh
2015-10-19 23:48:32 -05:00
parent 9e0109d4d2
commit 4528c8288b
46 changed files with 65 additions and 61 deletions

View File

@@ -194,3 +194,12 @@ ion-card.adv-map p {
color: #32DB64;
}
body.md .android-attr, body.md .android-attr div.toolbar-background {
background-color: #387EF5;
}
body.md .android-attr .toolbar-title {
color: #fff;
}

View File

@@ -1,4 +1,4 @@
<ion-navbar *navbar>
<ion-navbar *navbar class="android-attr">
<ion-title>Block Buttons</ion-title>
</ion-navbar>

View File

@@ -1,4 +1,4 @@
<ion-navbar *navbar>
<ion-navbar *navbar class="android-attr">
<ion-title>Buttons</ion-title>
</ion-navbar>

View File

@@ -1,4 +1,4 @@
<ion-navbar *navbar>
<ion-navbar *navbar class="android-attr">
<ion-title>Clear Buttons</ion-title>
</ion-navbar>

View File

@@ -1,4 +1,4 @@
<ion-navbar *navbar>
<ion-navbar *navbar class="android-attr">
<ion-title>Buttons</ion-title>

View File

@@ -1,4 +1,4 @@
<ion-navbar *navbar>
<ion-navbar *navbar class="android-attr">
<ion-title>FAB</ion-title>
</ion-navbar>

View File

@@ -1,4 +1,4 @@
<ion-navbar *navbar>
<ion-navbar *navbar class="android-attr">
<ion-title>Full Buttons</ion-title>
</ion-navbar>

View File

@@ -1,5 +1,5 @@
<ion-navbar *navbar>
<ion-navbar *navbar class="android-attr">
<ion-title>Icon Buttons</ion-title>
</ion-navbar>

View File

@@ -1,4 +1,4 @@
<ion-navbar *navbar>
<ion-navbar *navbar class="android-attr">
<ion-title>Outline Buttons</ion-title>
</ion-navbar>

View File

@@ -1,4 +1,4 @@
<ion-navbar *navbar>
<ion-navbar *navbar class="android-attr">
<ion-title>Round Buttons</ion-title>
</ion-navbar>

View File

@@ -1,4 +1,4 @@
<ion-navbar *navbar>
<ion-navbar *navbar class="android-attr">
<ion-title>Button Sizes</ion-title>
</ion-navbar>

View File

@@ -1,5 +1,5 @@
<ion-navbar *navbar class="show-navbar">
<ion-navbar *navbar class="show-navbar android-attr">
<ion-title>Advanced: Image</ion-title>
</ion-navbar>

View File

@@ -1,5 +1,5 @@
<ion-navbar *navbar class="show-navbar">
<ion-navbar *navbar class="show-navbar android-attr">
<ion-title>Advanced: Map</ion-title>
</ion-navbar>

View File

@@ -1,5 +1,5 @@
<ion-navbar *navbar class="show-navbar">
<ion-navbar *navbar class="show-navbar android-attr">
<ion-title>Advanced: Social</ion-title>
</ion-navbar>

View File

@@ -1,5 +1,5 @@
<ion-navbar *navbar class="show-navbar">
<ion-navbar *navbar class="show-navbar android-attr">
<ion-title>Background Images</ion-title>
</ion-navbar>

View File

@@ -1,5 +1,5 @@
<ion-navbar *navbar class="show-navbar">
<ion-navbar *navbar class="show-navbar android-attr">
<ion-title>Basic Cards</ion-title>
</ion-navbar>

View File

@@ -1,5 +1,5 @@
<ion-navbar *navbar class="show-navbar">
<ion-navbar *navbar class="show-navbar android-attr">
<ion-title>Card Headers</ion-title>
</ion-navbar>

View File

@@ -1,5 +1,5 @@
<ion-navbar *navbar class="show-navbar">
<ion-navbar *navbar class="show-navbar android-attr">
<ion-title>Card Images</ion-title>
</ion-navbar>

View File

@@ -1,5 +1,5 @@
<ion-navbar *navbar class="show-navbar">
<ion-navbar *navbar class="show-navbar android-attr">
<ion-title>Card Lists</ion-title>
</ion-navbar>

View File

@@ -1,4 +1,4 @@
<ion-navbar *navbar>
<ion-navbar *navbar class="android-attr">
<ion-title>Fixed Labels</ion-title>
</ion-navbar>

View File

@@ -1,4 +1,4 @@
<ion-navbar *navbar>
<ion-navbar *navbar class="android-attr">
<ion-title>Floating Labels</ion-title>
</ion-navbar>

View File

@@ -1,4 +1,4 @@
<ion-navbar *navbar class="show-navbar">
<ion-navbar *navbar class="show-navbar android-attr">
<ion-title>Forms</ion-title>
</ion-navbar>

View File

@@ -1,4 +1,4 @@
<ion-navbar *navbar>
<ion-navbar *navbar class="android-attr">
<ion-title>Inline Labels</ion-title>
</ion-navbar>

View File

@@ -1,4 +1,4 @@
<ion-navbar *navbar>
<ion-navbar *navbar class="android-attr">
<ion-title>Inset Labels</ion-title>
</ion-navbar>

View File

@@ -1,4 +1,4 @@
<ion-navbar *navbar>
<ion-navbar *navbar class="android-attr">
<ion-title>Placeholders</ion-title>
</ion-navbar>

View File

@@ -1,4 +1,4 @@
<ion-navbar *navbar>
<ion-navbar *navbar class="android-attr">
<ion-title>Stacked Labels</ion-title>
</ion-navbar>

View File

@@ -54,6 +54,7 @@ import {TabsPage} from './tabs/tabs';
export class AndroidAttribute {
constructor (platform: Platform, elementRef: ElementRef, renderer: Renderer) {
console.log('init');
this.isAndroid = platform.is('android');
renderer.setElementAttribute(elementRef, 'primary', this.isAndroid ? true : null);
}

View File

@@ -1,5 +1,5 @@
<ion-navbar *navbar class="show-navbar">
<ion-navbar *navbar class="show-navbar android-attr">
<ion-title>Icons</ion-title>
</ion-navbar>

View File

@@ -5,16 +5,17 @@ import * as helpers from './helpers';
@App({
template: '<ion-nav id="nav" [root]="rootPage"></ion-nav><ion-overlay></ion-overlay>',
directives: [helpers.AndroidAttribute],
template: '<ion-nav id="nav" [root]="rootPage" #content></ion-nav><ion-overlay></ion-overlay>',
})
class DemoApp {
rootPage: any;
androidAttribute: any;
constructor(app: IonicApp, platform: Platform) {
this.app = app;
this.platform = platform;
this.androidAttribute = helpers.AndroidAttribute;
this.platform.ready().then( () => {
window.addEventListener('message', (e) => {

View File

@@ -1,5 +1,5 @@
<ion-navbar *navbar class="show-navbar">
<ion-navbar *navbar class="show-navbar android-attr">
<ion-title>Avatar List</ion-title>
</ion-navbar>

View File

@@ -1,5 +1,5 @@
<ion-navbar *navbar class="show-navbar">
<ion-navbar *navbar class="show-navbar android-attr">
<ion-title>Lists</ion-title>
</ion-navbar>

View File

@@ -1,5 +1,5 @@
<ion-navbar *navbar class="show-navbar">
<ion-navbar *navbar class="show-navbar android-attr">
<ion-title>Dividers</ion-title>
</ion-navbar>

View File

@@ -1,5 +1,5 @@
<ion-navbar *navbar class="show-navbar">
<ion-navbar *navbar class="show-navbar android-attr">
<ion-title>Icon List</ion-title>
</ion-navbar>

View File

@@ -1,5 +1,5 @@
<ion-navbar *navbar class="show-navbar">
<ion-navbar *navbar class="show-navbar android-attr">
<ion-title>Inset List</ion-title>
</ion-navbar>

View File

@@ -1,5 +1,5 @@
<ion-navbar *navbar class="show-navbar">
<ion-navbar *navbar class="show-navbar android-attr">
<ion-title>List Headers</ion-title>
</ion-navbar>

View File

@@ -1,4 +1,4 @@
<ion-navbar *navbar>
<ion-navbar *navbar class="android-attr">
<a menu-toggle>
<icon menu></icon>

View File

@@ -1,6 +1,6 @@
<ion-navbar *navbar>
<ion-navbar *navbar class="android-attr">
<a menu-toggle>
<a menu-toggle="leftMenu">
<icon menu></icon>
</a>

View File

@@ -1,4 +1,4 @@
<ion-navbar *navbar>
<ion-navbar *navbar class="android-attr">
<a menu-toggle>
<icon menu></icon>

View File

@@ -1,4 +1,4 @@
<ion-menu #menu [content]="content">
<ion-menu [content]="content" id="leftMenu">
<ion-toolbar primary>
<ion-title>Menu</ion-title>
@@ -12,7 +12,7 @@
{{p.title}}
</button>
<button ion-item menu-toggle>
<button ion-item menu-close="leftMenu" detail-none>
Close Menu
</button>
@@ -21,4 +21,4 @@
</ion-menu>
<ion-nav id="menuNav" #content [root]="rootView"></ion-nav>
<ion-nav id="menuNav" [root]="rootPage" #content swipe-back-enabled="false"></ion-nav>

View File

@@ -1,14 +1,11 @@
import {App, IonicApp, Page, NavController, NavParams} from 'ionic/ionic';
import {Page, Events} from 'ionic/ionic';
import {App, IonicApp, Page} from 'ionic/ionic';
import * as helpers from './helpers';
@Page({
templateUrl: 'menus/menu-home.html'
})
class PageOne{
constructor(nav: NavController, events: Events) {
this.nav = nav;
this.events = events;
constructor() {
}
}
@@ -29,10 +26,9 @@ class PageThree{
})
export class MenusPage {
constructor(app: IonicApp, events: Events, nav: NavController) {
this.nav = nav;
constructor(app: IonicApp) {
this.app = app;
this.rootView = PageOne;
this.rootPage = PageOne;
this.pages = [
{ title: 'Home', component: PageOne },
{ title: 'Friends', component: PageTwo },
@@ -41,16 +37,13 @@ export class MenusPage {
}
onViewWillUnload() {
}
openPage(menu, page) {
// close the menu when clicking a link from the menu
menu.close();
this.app.getComponent('leftMenu').close();
// Reset the content nav to have just this page
// we wouldn't want the back button to show in this scenario
// let nav = this.app.getComponent('nav');
this.nav.setRoot(page.component);
let nav = this.app.getComponent('menuNav');
nav.setRoot(page.component);
}
}

View File

@@ -1,5 +1,5 @@
<ion-navbar *navbar class="show-navbar">
<ion-navbar *navbar class="show-navbar android-attr">
<ion-title>Modals</ion-title>
</ion-navbar>

View File

@@ -1,5 +1,5 @@
<ion-navbar *navbar>
<ion-navbar *navbar class="android-attr">
<ion-title>{{selection.title}}</ion-title>
</ion-navbar>

View File

@@ -1,5 +1,5 @@
<ion-navbar *navbar>
<ion-navbar *navbar class="android-attr">
<ion-title>Navigation</ion-title>
</ion-navbar>

View File

@@ -1,5 +1,5 @@
<ion-navbar *navbar>
<ion-navbar *navbar class="android-attr">
<ion-title>Popups</ion-title>
</ion-navbar>

View File

@@ -1,5 +1,5 @@
<ion-navbar *navbar class="show-navbar">
<ion-navbar *navbar class="show-navbar android-attr">
<ion-title>Slides</ion-title>
</ion-navbar>

View File

@@ -1,4 +1,4 @@
<ion-navbar *navbar class="show-navbar">
<ion-navbar *navbar class="show-navbar android-attr">
<ion-title>Tabs</ion-title>
</ion-navbar>