mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
docs(demos): force android navbar color
This commit is contained in:
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<ion-navbar *navbar>
|
||||
<ion-navbar *navbar class="android-attr">
|
||||
<ion-title>Block Buttons</ion-title>
|
||||
</ion-navbar>
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<ion-navbar *navbar>
|
||||
<ion-navbar *navbar class="android-attr">
|
||||
<ion-title>Buttons</ion-title>
|
||||
</ion-navbar>
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<ion-navbar *navbar>
|
||||
<ion-navbar *navbar class="android-attr">
|
||||
<ion-title>Clear Buttons</ion-title>
|
||||
</ion-navbar>
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<ion-navbar *navbar>
|
||||
<ion-navbar *navbar class="android-attr">
|
||||
|
||||
<ion-title>Buttons</ion-title>
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<ion-navbar *navbar>
|
||||
<ion-navbar *navbar class="android-attr">
|
||||
<ion-title>FAB</ion-title>
|
||||
</ion-navbar>
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<ion-navbar *navbar>
|
||||
<ion-navbar *navbar class="android-attr">
|
||||
<ion-title>Full Buttons</ion-title>
|
||||
</ion-navbar>
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
|
||||
<ion-navbar *navbar>
|
||||
<ion-navbar *navbar class="android-attr">
|
||||
<ion-title>Icon Buttons</ion-title>
|
||||
</ion-navbar>
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<ion-navbar *navbar>
|
||||
<ion-navbar *navbar class="android-attr">
|
||||
<ion-title>Outline Buttons</ion-title>
|
||||
</ion-navbar>
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<ion-navbar *navbar>
|
||||
<ion-navbar *navbar class="android-attr">
|
||||
<ion-title>Round Buttons</ion-title>
|
||||
</ion-navbar>
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<ion-navbar *navbar>
|
||||
<ion-navbar *navbar class="android-attr">
|
||||
<ion-title>Button Sizes</ion-title>
|
||||
</ion-navbar>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<ion-navbar *navbar>
|
||||
<ion-navbar *navbar class="android-attr">
|
||||
<ion-title>Fixed Labels</ion-title>
|
||||
</ion-navbar>
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<ion-navbar *navbar>
|
||||
<ion-navbar *navbar class="android-attr">
|
||||
<ion-title>Floating Labels</ion-title>
|
||||
</ion-navbar>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<ion-navbar *navbar>
|
||||
<ion-navbar *navbar class="android-attr">
|
||||
<ion-title>Inline Labels</ion-title>
|
||||
</ion-navbar>
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<ion-navbar *navbar>
|
||||
<ion-navbar *navbar class="android-attr">
|
||||
<ion-title>Inset Labels</ion-title>
|
||||
</ion-navbar>
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<ion-navbar *navbar>
|
||||
<ion-navbar *navbar class="android-attr">
|
||||
<ion-title>Placeholders</ion-title>
|
||||
</ion-navbar>
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<ion-navbar *navbar>
|
||||
<ion-navbar *navbar class="android-attr">
|
||||
<ion-title>Stacked Labels</ion-title>
|
||||
</ion-navbar>
|
||||
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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) => {
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<ion-navbar *navbar>
|
||||
<ion-navbar *navbar class="android-attr">
|
||||
|
||||
<a menu-toggle>
|
||||
<icon menu></icon>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<ion-navbar *navbar>
|
||||
<ion-navbar *navbar class="android-attr">
|
||||
|
||||
<a menu-toggle>
|
||||
<a menu-toggle="leftMenu">
|
||||
<icon menu></icon>
|
||||
</a>
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<ion-navbar *navbar>
|
||||
<ion-navbar *navbar class="android-attr">
|
||||
|
||||
<a menu-toggle>
|
||||
<icon menu></icon>
|
||||
|
||||
@@ -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>
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
|
||||
<ion-navbar *navbar>
|
||||
<ion-navbar *navbar class="android-attr">
|
||||
<ion-title>{{selection.title}}</ion-title>
|
||||
</ion-navbar>
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
|
||||
<ion-navbar *navbar>
|
||||
<ion-navbar *navbar class="android-attr">
|
||||
<ion-title>Navigation</ion-title>
|
||||
</ion-navbar>
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
|
||||
<ion-navbar *navbar>
|
||||
<ion-navbar *navbar class="android-attr">
|
||||
<ion-title>Popups</ion-title>
|
||||
</ion-navbar>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user