mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 11:17:19 +08:00
toolbar button updates
This commit is contained in:
Adam Bradley
@ -2,16 +2,16 @@
|
||||
|
||||
<ion-title>Buttons</ion-title>
|
||||
|
||||
<ion-nav-items primary>
|
||||
<ion-buttons start>
|
||||
<button>
|
||||
<icon contact></icon>
|
||||
</button>
|
||||
</ion-nav-items>
|
||||
<ion-nav-items secondary>
|
||||
</ion-buttons>
|
||||
<ion-buttons end>
|
||||
<button>
|
||||
<icon search></icon>
|
||||
</button>
|
||||
</ion-nav-items>
|
||||
</ion-buttons>
|
||||
|
||||
</ion-navbar>
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<ion-navbar *navbar hide-back-button class="android-attr">
|
||||
|
||||
<a menu-toggle="leftMenu">
|
||||
<button menu-toggle="leftMenu">
|
||||
<icon menu></icon>
|
||||
</a>
|
||||
</button>
|
||||
|
||||
<ion-title>
|
||||
Events
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<ion-navbar *navbar hide-back-button class="android-attr">
|
||||
|
||||
<a menu-toggle="leftMenu">
|
||||
<button menu-toggle="leftMenu">
|
||||
<icon menu></icon>
|
||||
</a>
|
||||
</button>
|
||||
|
||||
<ion-title>
|
||||
Friends
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<ion-navbar *navbar hide-back-button class="android-attr">
|
||||
|
||||
<a menu-toggle="leftMenu">
|
||||
<button menu-toggle="leftMenu">
|
||||
<icon menu></icon>
|
||||
</a>
|
||||
</button>
|
||||
|
||||
<ion-title>
|
||||
Menus
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<ion-navbar *navbar hide-back-button class="android-attr">
|
||||
|
||||
<a menu-toggle="leftMenu">
|
||||
<button menu-toggle="leftMenu">
|
||||
<icon menu></icon>
|
||||
</a>
|
||||
</button>
|
||||
|
||||
<ion-title>
|
||||
Places
|
||||
|
||||
@ -2,14 +2,14 @@
|
||||
<ion-title>
|
||||
Description
|
||||
</ion-title>
|
||||
<ion-nav-items primary>
|
||||
<ion-buttons start>
|
||||
<button (click)="close()" *ng-if=" currentPlatform === 'ios' ">
|
||||
Cancel
|
||||
</button>
|
||||
<button (click)="close()" *ng-if=" currentPlatform === 'android' ">
|
||||
<icon close></icon>
|
||||
</button>
|
||||
</ion-nav-items>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
|
||||
|
||||
|
||||
@ -5,13 +5,13 @@ import {App, ActionSheet, IonicApp, IonicView, Register} from 'ionic/ionic';
|
||||
@IonicView({
|
||||
template: '<ion-navbar *navbar primary>' +
|
||||
'<ion-title>Heading</ion-title>' +
|
||||
'<a menu-toggle="menu">' +
|
||||
'<button menu-toggle="menu">' +
|
||||
'<icon menu></icon>' +
|
||||
'</a>' +
|
||||
'<ion-nav-items secondary>' +
|
||||
'</button>' +
|
||||
'<ion-buttons end>' +
|
||||
'<button><ion-icon md="ion-android-search" ios="ion-ios-search-strong"></i></button>' +
|
||||
'<button (click)="showMoreMenu()"><i class="icon ion-android-more-vertical"></i></button>' +
|
||||
'</ion-nav-items>' +
|
||||
'</ion-buttons>' +
|
||||
'</ion-navbar>' +
|
||||
'<ion-content>' +
|
||||
`
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
|
||||
<ion-navbar *navbar>
|
||||
|
||||
<a menu-toggle>
|
||||
<button menu-toggle>
|
||||
<icon menu></icon>
|
||||
</a>
|
||||
</button>
|
||||
|
||||
<ion-title>
|
||||
Menu
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
|
||||
<ion-navbar *navbar>
|
||||
|
||||
<a menu-toggle>
|
||||
<button menu-toggle>
|
||||
<icon menu></icon>
|
||||
</a>
|
||||
</button>
|
||||
|
||||
<ion-title>
|
||||
Menu
|
||||
|
||||
@ -73,7 +73,7 @@ export class ContactModal {
|
||||
|
||||
@Page({
|
||||
template: `
|
||||
<ion-navbar *navbar><ion-title>First Page Header</ion-title><ion-nav-items primary><button (click)="closeModal()">Close</button></ion-nav-items></ion-navbar>
|
||||
<ion-navbar *navbar><ion-title>First Page Header</ion-title><ion-buttons start><button (click)="closeModal()">Close</button></ion-buttons></ion-navbar>
|
||||
<ion-content padding>
|
||||
<p>
|
||||
<button (click)="push()">Push (Go to 2nd)</button>
|
||||
|
||||
@ -4,9 +4,9 @@ import {IonicView, Battery} from 'ionic/ionic';
|
||||
@IonicView({
|
||||
template: `
|
||||
<ion-navbar *navbar>
|
||||
<a menu-toggle>
|
||||
<button menu-toggle>
|
||||
<icon menu></icon>
|
||||
</a>
|
||||
</button>
|
||||
<ion-title>Battery</ion-title>
|
||||
</ion-navbar>
|
||||
<ion-content padding>
|
||||
|
||||
@ -5,9 +5,9 @@ import {Camera} from 'ionic/ionic';
|
||||
@IonicView({
|
||||
template: `
|
||||
<ion-navbar *navbar>
|
||||
<a menu-toggle>
|
||||
<button menu-toggle>
|
||||
<icon menu></icon>
|
||||
</a>
|
||||
</button>
|
||||
<ion-title>Camera</ion-title>
|
||||
</ion-navbar>
|
||||
<ion-content padding>
|
||||
|
||||
@ -5,9 +5,9 @@ import {Contacts} from 'ionic/ionic';
|
||||
@IonicView({
|
||||
template: `
|
||||
<ion-navbar *navbar>
|
||||
<a menu-toggle>
|
||||
<button menu-toggle>
|
||||
<icon menu></icon>
|
||||
</a>
|
||||
</button>
|
||||
<ion-title>Contacts</ion-title>
|
||||
</ion-navbar>
|
||||
<ion-content padding>
|
||||
|
||||
@ -4,9 +4,9 @@ import {IonicView, DeviceMotion} from 'ionic/ionic';
|
||||
@IonicView({
|
||||
template: `
|
||||
<ion-navbar *navbar>
|
||||
<a menu-toggle>
|
||||
<button menu-toggle>
|
||||
<icon menu></icon>
|
||||
</a>
|
||||
</button>
|
||||
<ion-title>Device Motion</ion-title>
|
||||
</ion-navbar>
|
||||
<ion-content padding>
|
||||
|
||||
@ -4,9 +4,9 @@ import {IonicView, DeviceOrientation} from 'ionic/ionic';
|
||||
@IonicView({
|
||||
template: `
|
||||
<ion-navbar *navbar>
|
||||
<a menu-toggle>
|
||||
<button menu-toggle>
|
||||
<icon menu></icon>
|
||||
</a>
|
||||
</button>
|
||||
<ion-title>Device Orientation</ion-title>
|
||||
</ion-navbar>
|
||||
<ion-content padding>
|
||||
|
||||
@ -4,9 +4,9 @@ import {IonicView, Device} from 'ionic/ionic';
|
||||
@IonicView({
|
||||
template: `
|
||||
<ion-navbar *navbar>
|
||||
<a menu-toggle>
|
||||
<button menu-toggle>
|
||||
<icon menu></icon>
|
||||
</a>
|
||||
</button>
|
||||
<ion-title>Device</ion-title>
|
||||
</ion-navbar>
|
||||
<ion-content padding>
|
||||
|
||||
@ -4,9 +4,9 @@ import {IonicView, Dialogs} from 'ionic/ionic';
|
||||
@IonicView({
|
||||
template: `
|
||||
<ion-navbar *navbar>
|
||||
<a menu-toggle>
|
||||
<button menu-toggle>
|
||||
<icon menu></icon>
|
||||
</a>
|
||||
</button>
|
||||
<ion-title>Dialogs</ion-title>
|
||||
</ion-navbar>
|
||||
<ion-content padding>
|
||||
|
||||
@ -5,9 +5,9 @@ import {Geolocation} from 'ionic/ionic';
|
||||
@IonicView({
|
||||
template: `
|
||||
<ion-navbar *navbar>
|
||||
<a menu-toggle>
|
||||
<button menu-toggle>
|
||||
<icon menu></icon>
|
||||
</a>
|
||||
</button>
|
||||
<ion-title>Geolocation</ion-title>
|
||||
</ion-navbar>
|
||||
<ion-content padding>
|
||||
|
||||
@ -5,9 +5,9 @@ import {StatusBar} from 'ionic/ionic';
|
||||
@IonicView({
|
||||
template: `
|
||||
<ion-navbar *navbar>
|
||||
<a menu-toggle>
|
||||
<button menu-toggle>
|
||||
<icon menu></icon>
|
||||
</a>
|
||||
</button>
|
||||
<ion-title>StatusBar</ion-title>
|
||||
</ion-navbar>
|
||||
<ion-content padding>
|
||||
|
||||
@ -5,9 +5,9 @@ import {Vibration} from 'ionic/ionic';
|
||||
@IonicView({
|
||||
template: `
|
||||
<ion-navbar *navbar>
|
||||
<a menu-toggle>
|
||||
<button menu-toggle>
|
||||
<icon menu></icon>
|
||||
</a>
|
||||
</button>
|
||||
<ion-title>Vibration</ion-title>
|
||||
</ion-navbar>
|
||||
<ion-content padding>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<ion-navbar *navbar>
|
||||
<ion-title>Item Groups</ion-title>
|
||||
<ion-nav-items secondary>
|
||||
<ion-buttons end>
|
||||
<button (click)="reload()">Reload</button>
|
||||
</ion-nav-items>
|
||||
</ion-buttons>
|
||||
</ion-navbar>
|
||||
|
||||
<ion-content class="outer-content">
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<ion-toolbar>
|
||||
<ion-title>Sliding Items</ion-title>
|
||||
<ion-nav-items secondary>
|
||||
<ion-buttons end>
|
||||
<button (click)="reload()">Reload</button>
|
||||
</ion-nav-items>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-content>
|
||||
|
||||
@ -1,29 +1,29 @@
|
||||
|
||||
<ion-navbar *navbar>
|
||||
|
||||
<a menu-toggle="leftMenu">
|
||||
<button menu-toggle="leftMenu">
|
||||
<icon menu></icon>
|
||||
</a>
|
||||
</button>
|
||||
|
||||
<ion-title>
|
||||
Menu
|
||||
</ion-title>
|
||||
|
||||
<ion-nav-items secondary>
|
||||
<ion-buttons end>
|
||||
<button>
|
||||
<icon football></icon>
|
||||
</button>
|
||||
</ion-nav-items>
|
||||
</ion-buttons>
|
||||
|
||||
<ion-nav-items primary>
|
||||
<ion-buttons start>
|
||||
<button>
|
||||
<icon baseball></icon>
|
||||
</button>
|
||||
</ion-nav-items>
|
||||
</ion-buttons>
|
||||
|
||||
<a menu-toggle="rightMenu" secondary>
|
||||
<button menu-toggle="rightMenu" right>
|
||||
<icon menu></icon>
|
||||
</a>
|
||||
</button>
|
||||
|
||||
</ion-navbar>
|
||||
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
|
||||
<ion-navbar *navbar>
|
||||
|
||||
<a menu-toggle="leftMenu">
|
||||
<button menu-toggle="leftMenu">
|
||||
<icon menu></icon>
|
||||
</a>
|
||||
</button>
|
||||
|
||||
<ion-title>
|
||||
Menu
|
||||
|
||||
@ -5,9 +5,9 @@
|
||||
Menu
|
||||
</ion-title>
|
||||
|
||||
<a menu-toggle="rightMenu" secondary>
|
||||
<button menu-toggle="rightMenu" right>
|
||||
<icon menu></icon>
|
||||
</a>
|
||||
</button>
|
||||
|
||||
</ion-navbar>
|
||||
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
|
||||
<ion-navbar *navbar>
|
||||
|
||||
<a menu-toggle="leftMenu">
|
||||
<button menu-toggle="leftMenu">
|
||||
<icon menu></icon>
|
||||
</a>
|
||||
</button>
|
||||
|
||||
<ion-title>
|
||||
Overlay Menu
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
|
||||
<ion-navbar *navbar>
|
||||
|
||||
<a menu-toggle="leftMenu">
|
||||
<button menu-toggle="leftMenu">
|
||||
<icon menu></icon>
|
||||
</a>
|
||||
</button>
|
||||
|
||||
<ion-title>
|
||||
Push Menu
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
|
||||
<ion-navbar *navbar>
|
||||
|
||||
<a menu-toggle="leftMenu">
|
||||
<button menu-toggle="leftMenu">
|
||||
<icon menu></icon>
|
||||
</a>
|
||||
</button>
|
||||
|
||||
<ion-title>
|
||||
Reveal Menu
|
||||
|
||||
@ -141,9 +141,9 @@ class ContactUs {
|
||||
template: `
|
||||
<ion-navbar *navbar>
|
||||
<ion-title>First Page Header</ion-title>
|
||||
<ion-nav-items primary>
|
||||
<ion-buttons start>
|
||||
<button class="e2eCloseMenu" (click)="closeModal()">Close</button>
|
||||
</ion-nav-items>
|
||||
</ion-buttons>
|
||||
</ion-navbar>
|
||||
<ion-content padding>
|
||||
<p>
|
||||
|
||||
@ -16,12 +16,12 @@ class MyCmpTest{}
|
||||
template: `
|
||||
<ion-navbar *navbar>
|
||||
<ion-title>{{title}}</ion-title>
|
||||
<ion-nav-items primary>
|
||||
<ion-buttons start>
|
||||
<button><icon star></icon></button>
|
||||
</ion-nav-items>
|
||||
<ion-nav-items secondary>
|
||||
</ion-buttons>
|
||||
<ion-buttons end>
|
||||
<button>S1</button>
|
||||
</ion-nav-items>
|
||||
</ion-buttons>
|
||||
</ion-navbar>
|
||||
<ion-content>
|
||||
<ion-list>
|
||||
|
||||
@ -75,9 +75,9 @@ export class Account {
|
||||
@Page({
|
||||
template: `
|
||||
<ion-navbar *navbar primary>
|
||||
<a menu-toggle>
|
||||
<button menu-toggle>
|
||||
<icon menu></icon>
|
||||
</a>
|
||||
</button>
|
||||
<ion-title>Account Dashboard</ion-title>
|
||||
</ion-navbar>
|
||||
<ion-content padding>
|
||||
@ -106,9 +106,9 @@ export class Dashboard {
|
||||
@Page({
|
||||
template: `
|
||||
<ion-navbar *navbar danger>
|
||||
<a menu-toggle>
|
||||
<button menu-toggle>
|
||||
<icon menu></icon>
|
||||
</a>
|
||||
</button>
|
||||
<ion-title>Account Profile</ion-title>
|
||||
</ion-navbar>
|
||||
<ion-content padding>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
|
||||
<ion-navbar *navbar>
|
||||
<a menu-toggle>
|
||||
<button menu-toggle>
|
||||
<icon menu></icon>
|
||||
</a>
|
||||
</button>
|
||||
<ion-title>First View</ion-title>
|
||||
</ion-navbar>
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
|
||||
<ion-navbar *navbar primary>
|
||||
<ion-title>Second View</ion-title>
|
||||
<ion-nav-items secondary>
|
||||
<ion-buttons end>
|
||||
<button>
|
||||
<icon help></icon>
|
||||
</button>
|
||||
|
||||
@ -71,9 +71,9 @@ class ToolbarBackground {
|
||||
'<span class="back-default">{{bbText}}</span>' +
|
||||
'</span>' +
|
||||
'</button>' +
|
||||
'<ng-content select="[menu-toggle]"></ng-content>' +
|
||||
'<ng-content select="ion-nav-items[primary]"></ng-content>' +
|
||||
'<ng-content select="ion-nav-items[secondary]"></ng-content>' +
|
||||
'<ng-content select="[menu-toggle],ion-buttons[left]"></ng-content>' +
|
||||
'<ng-content select="ion-buttons[start]"></ng-content>' +
|
||||
'<ng-content select="ion-buttons[end],ion-buttons[right]"></ng-content>' +
|
||||
'<div class="toolbar-content">' +
|
||||
'<ng-content></ng-content>' +
|
||||
'</div>',
|
||||
|
||||
@ -10,11 +10,11 @@
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-nav-items secondary>
|
||||
<ion-buttons end>
|
||||
<button>
|
||||
<icon search></icon>
|
||||
</button>
|
||||
</ion-nav-items>
|
||||
</ion-buttons>
|
||||
<ion-segment secondary>
|
||||
<ion-segment-button>
|
||||
Something
|
||||
|
||||
@ -30,16 +30,16 @@
|
||||
}
|
||||
</style>
|
||||
<ion-navbar *navbar>
|
||||
<ion-nav-items primary>
|
||||
<ion-buttons start>
|
||||
<button>
|
||||
Skip
|
||||
</button>
|
||||
</ion-nav-items>
|
||||
<ion-nav-items secondary>
|
||||
</ion-buttons>
|
||||
<ion-buttons end>
|
||||
<button (click)="next()">
|
||||
Next
|
||||
</button>
|
||||
</ion-nav-items>
|
||||
</ion-buttons>
|
||||
<ion-title>Grid Icons</ion-title>
|
||||
</ion-navbar>
|
||||
<ion-slides pager (slide-changed)="onSlideChanged($event)" loop="true" autoplay="true">
|
||||
|
||||
@ -71,9 +71,9 @@ class Tab2 {
|
||||
@Page({
|
||||
template: `
|
||||
<ion-navbar *navbar>
|
||||
<a menu-toggle>
|
||||
<button menu-toggle>
|
||||
<icon menu></icon>
|
||||
</a>
|
||||
</button>
|
||||
<ion-title>Stopwatch</ion-title>
|
||||
</ion-navbar>
|
||||
<ion-content padding>
|
||||
|
||||
@ -46,9 +46,9 @@ class Tab2 {
|
||||
@Page({
|
||||
template: `
|
||||
<ion-navbar *navbar>
|
||||
<a menu-toggle>
|
||||
<button menu-toggle>
|
||||
<icon menu></icon>
|
||||
</a>
|
||||
</button>
|
||||
<ion-title>Stopwatch</ion-title>
|
||||
</ion-navbar>
|
||||
<ion-content padding>
|
||||
@ -68,9 +68,9 @@ class Tab3 {
|
||||
@Page({
|
||||
template: `
|
||||
<ion-navbar *navbar>
|
||||
<a menu-toggle>
|
||||
<button menu-toggle>
|
||||
<icon menu></icon>
|
||||
</a>
|
||||
</button>
|
||||
<ion-title>Quesarito</ion-title>
|
||||
</ion-navbar>
|
||||
<ion-content padding>
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-title>Inset Focus</ion-title>
|
||||
<ion-nav-items secondary>
|
||||
<ion-buttons end>
|
||||
<button (click)="reload()">
|
||||
Reload
|
||||
</button>
|
||||
</ion-nav-items>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
|
||||
|
||||
|
||||
@ -6,18 +6,20 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
$toolbar-order-ios: (
|
||||
back-button: 10,
|
||||
menu-toggle-primary: 20,
|
||||
primary: 30,
|
||||
secondary: 50,
|
||||
menu-toggle-secondary: 60,
|
||||
back-button: 0,
|
||||
menu-toggle-start: 1,
|
||||
buttons-left: 2,
|
||||
buttons-start: 3,
|
||||
content: 4,
|
||||
buttons-end: 5,
|
||||
buttons-right: 6,
|
||||
menu-toggle-end: 7,
|
||||
);
|
||||
|
||||
$toolbar-ios-padding: 4px !default;
|
||||
$toolbar-ios-height: 4.4rem !default;
|
||||
$toolbar-ios-button-font-size: 1.7rem !default;
|
||||
$toolbar-ios-title-font-size: 1.7rem !default;
|
||||
|
||||
$navbar-ios-height: $toolbar-ios-height !default;
|
||||
|
||||
|
||||
@ -30,9 +32,73 @@ ion-navbar-section {
|
||||
min-height: $navbar-ios-height;
|
||||
}
|
||||
|
||||
|
||||
// iOS Toolbar Background
|
||||
// --------------------------------------------------
|
||||
|
||||
.toolbar-background {
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-style: solid;
|
||||
border-color: $toolbar-ios-border-color;
|
||||
background-color: $toolbar-ios-background-color;
|
||||
}
|
||||
|
||||
&.hairlines .toolbar-background {
|
||||
border-bottom-width: 0.55px;
|
||||
}
|
||||
|
||||
|
||||
// iOS Toolbar Content
|
||||
// --------------------------------------------------
|
||||
|
||||
.toolbar-content {
|
||||
flex: 1;
|
||||
order: map-get($toolbar-order-ios, content);
|
||||
}
|
||||
|
||||
.toolbar-title {
|
||||
font-size: $toolbar-ios-title-font-size;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
pointer-events: auto;
|
||||
color: $toolbar-ios-text-color;
|
||||
}
|
||||
|
||||
ion-title {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0px 90px 1px 90px;
|
||||
pointer-events: none;
|
||||
transform: translateZ(0px);
|
||||
}
|
||||
|
||||
|
||||
// iOS Toolbar Buttons
|
||||
// --------------------------------------------------
|
||||
|
||||
ion-buttons {
|
||||
flex: 1;
|
||||
order: map-get($toolbar-order-ios, buttons-start);
|
||||
transform: translateZ(0px);
|
||||
}
|
||||
|
||||
ion-buttons[left] {
|
||||
order: map-get($toolbar-order-ios, buttons-left);
|
||||
}
|
||||
|
||||
ion-buttons[end] {
|
||||
text-align: right;
|
||||
order: map-get($toolbar-order-ios, buttons-end);
|
||||
}
|
||||
|
||||
ion-buttons[right] {
|
||||
text-align: right;
|
||||
order: map-get($toolbar-order-ios, buttons-right);
|
||||
}
|
||||
|
||||
.bar-button {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
@ -73,14 +139,14 @@ ion-navbar-section {
|
||||
}
|
||||
|
||||
|
||||
// iOS Back Button
|
||||
// iOS Toolbar Back Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.back-button {
|
||||
margin: 0;
|
||||
min-height: 3.2rem;
|
||||
line-height: 1;
|
||||
order: map-get($toolbar-order-ios, 'back-button');
|
||||
order: map-get($toolbar-order-ios, back-button);
|
||||
overflow: visible;
|
||||
transform: translateZ(0px);
|
||||
}
|
||||
@ -93,16 +159,17 @@ ion-navbar-section {
|
||||
}
|
||||
|
||||
|
||||
// iOS Menu Toggle
|
||||
// iOS Toolbar Menu Toggle
|
||||
// --------------------------------------------------
|
||||
|
||||
[menu-toggle] {
|
||||
order: map-get($toolbar-order-ios, menu-toggle-primary);
|
||||
order: map-get($toolbar-order-ios, menu-toggle-start);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
[menu-toggle][secondary] {
|
||||
order: map-get($toolbar-order-ios, menu-toggle-secondary);
|
||||
[menu-toggle][end],
|
||||
[menu-toggle][right] {
|
||||
order: map-get($toolbar-order-ios, menu-toggle-end);
|
||||
}
|
||||
|
||||
ion-segment-button[button] {
|
||||
@ -112,55 +179,6 @@ ion-segment-button[button] {
|
||||
}
|
||||
|
||||
|
||||
// iOS Toolbar Background
|
||||
// --------------------------------------------------
|
||||
|
||||
.toolbar-background {
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-style: solid;
|
||||
border-color: $toolbar-ios-border-color;
|
||||
background-color: $toolbar-ios-background-color;
|
||||
}
|
||||
|
||||
&.hairlines .toolbar-background {
|
||||
border-bottom-width: 0.55px;
|
||||
}
|
||||
|
||||
|
||||
// iOS Toolbar Content
|
||||
// --------------------------------------------------
|
||||
|
||||
ion-title {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0px 90px 1px 90px;
|
||||
pointer-events: none;
|
||||
transform: translateZ(0px);
|
||||
}
|
||||
|
||||
.toolbar-title {
|
||||
font-size: $toolbar-ios-title-font-size;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
pointer-events: auto;
|
||||
color: $toolbar-ios-text-color;
|
||||
}
|
||||
|
||||
ion-nav-items {
|
||||
flex: 1;
|
||||
order: map-get($toolbar-order-ios, primary);
|
||||
transform: translateZ(0px);
|
||||
}
|
||||
|
||||
ion-nav-items[secondary] {
|
||||
text-align: right;
|
||||
order: map-get($toolbar-order-ios, secondary);
|
||||
}
|
||||
|
||||
|
||||
// iOS Toolbar Color Generation
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
@ -5,41 +5,111 @@
|
||||
// Material Design Toolbar
|
||||
// --------------------------------------------------
|
||||
|
||||
$toolbar-order-md: (
|
||||
back-button: 0,
|
||||
menu-toggle-start: 1,
|
||||
buttons-left: 2,
|
||||
content: 3,
|
||||
buttons-start: 4,
|
||||
buttons-end: 5,
|
||||
buttons-right: 6,
|
||||
menu-toggle-end: 7,
|
||||
);
|
||||
|
||||
$toolbar-md-padding: 4px !default;
|
||||
$toolbar-md-height: 5.6rem !default;
|
||||
$toolbar-md-title-font-size: 2rem !default;
|
||||
$toolbar-md-button-font-size: 1.4rem !default;
|
||||
$navbar-md-height: $toolbar-md-height !default;
|
||||
|
||||
|
||||
.toolbar {
|
||||
padding: $toolbar-md-padding;
|
||||
min-height: $toolbar-md-height;
|
||||
}
|
||||
|
||||
button,
|
||||
[button],
|
||||
button.activated,
|
||||
[button].activated {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding: 0 5px;
|
||||
min-height: 32px;
|
||||
ion-navbar-section {
|
||||
min-height: $navbar-md-height;
|
||||
}
|
||||
|
||||
|
||||
// Material Design Toolbar Background
|
||||
// --------------------------------------------------
|
||||
|
||||
.toolbar-background {
|
||||
border-color: $toolbar-md-border-color;
|
||||
background-color: $toolbar-md-background-color;
|
||||
}
|
||||
|
||||
|
||||
// Material Design Toolbar Content
|
||||
// --------------------------------------------------
|
||||
|
||||
.toolbar-content {
|
||||
flex: 1;
|
||||
order: map-get($toolbar-order-md, content);
|
||||
}
|
||||
|
||||
.toolbar-title {
|
||||
color: $toolbar-md-text-color;
|
||||
}
|
||||
|
||||
ion-title {
|
||||
padding: 0 12px;
|
||||
font-size: $toolbar-md-title-font-size;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
|
||||
// Material Design Toolbar Buttons
|
||||
// --------------------------------------------------
|
||||
|
||||
ion-buttons {
|
||||
flex: 1;
|
||||
order: map-get($toolbar-order-md, buttons-start);
|
||||
transform: translateZ(0px);
|
||||
}
|
||||
|
||||
ion-buttons[left] {
|
||||
order: map-get($toolbar-order-md, buttons-left);
|
||||
}
|
||||
|
||||
ion-buttons[left] .bar-button:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
ion-buttons[end] {
|
||||
text-align: right;
|
||||
order: map-get($toolbar-order-md, buttons-end);
|
||||
}
|
||||
|
||||
ion-buttons[right] {
|
||||
text-align: right;
|
||||
order: map-get($toolbar-order-md, buttons-right);
|
||||
}
|
||||
|
||||
|
||||
// Material Design Toolbar Back Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.back-button {
|
||||
margin: 0 0 0 12px;
|
||||
box-shadow: none;
|
||||
overflow: visible;
|
||||
color: $toolbar-md-active-color;
|
||||
}
|
||||
|
||||
button.icon-only,
|
||||
[button].icon-only {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
.back-button-icon {
|
||||
margin: 0;
|
||||
min-width: 44px;
|
||||
font-size: 2.4rem;
|
||||
font-weight: normal;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
button icon,
|
||||
[button] icon {
|
||||
padding: 0;
|
||||
min-width: 28px;
|
||||
}
|
||||
|
||||
// Material Design Toolbar Menu Toggle
|
||||
// --------------------------------------------------
|
||||
|
||||
.toolbar {
|
||||
[menu-toggle],
|
||||
[menu-toggle].activated {
|
||||
padding: 0 2px;
|
||||
@ -55,34 +125,6 @@ $toolbar-md-button-font-size: 1.4rem !default;
|
||||
margin: 0 2px;
|
||||
min-width: 28px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.toolbar button:hover:not(.disable-hover),
|
||||
.toolbar [button]:hover:not(.disable-hover),
|
||||
.toolbar button.activated,
|
||||
.toolbar [button].activated {
|
||||
color: $toolbar-md-active-color;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.toolbar-background {
|
||||
border-color: $toolbar-md-border-color;
|
||||
background-color: $toolbar-md-background-color;
|
||||
}
|
||||
|
||||
ion-title {
|
||||
padding: 0 12px;
|
||||
font-size: $toolbar-md-title-font-size;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.toolbar-title {
|
||||
color: $toolbar-md-text-color;
|
||||
}
|
||||
|
||||
ion-nav-items[primary] button:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
|
||||
@ -96,20 +138,6 @@ ion-navbar-section {
|
||||
min-height: $navbar-md-height;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
margin: 0 0 0 12px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.back-button-icon {
|
||||
margin: 0;
|
||||
min-width: 44px;
|
||||
font-size: 2.4rem;
|
||||
font-weight: normal;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Material Design Toolbar Color Generation
|
||||
// --------------------------------------------------
|
||||
|
||||
@ -5,43 +5,43 @@
|
||||
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-nav-items primary>
|
||||
<ion-buttons start>
|
||||
<button>
|
||||
<icon ios=contact></icon>
|
||||
</button>
|
||||
<button>
|
||||
<icon search></icon>
|
||||
</button>
|
||||
</ion-nav-items>
|
||||
<ion-nav-items secondary>
|
||||
</ion-buttons>
|
||||
<ion-buttons end>
|
||||
<button>
|
||||
<icon more></icon>
|
||||
</button>
|
||||
</ion-nav-items>
|
||||
</ion-buttons>
|
||||
<ion-title>Defaults</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-nav-items primary>
|
||||
<ion-buttons start>
|
||||
<button class="activated">
|
||||
<icon ios="contact"></icon>
|
||||
</button>
|
||||
<button class="activated">
|
||||
<icon search></icon>
|
||||
</button>
|
||||
</ion-nav-items>
|
||||
<ion-nav-items secondary>
|
||||
</ion-buttons>
|
||||
<ion-buttons end>
|
||||
<button class="activated">
|
||||
<icon more></icon>
|
||||
</button>
|
||||
</ion-nav-items>
|
||||
</ion-buttons>
|
||||
<ion-title>Defaults.activated</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-nav-items primary>
|
||||
<ion-buttons start>
|
||||
<button clear>
|
||||
<icon contact></icon>
|
||||
</button>
|
||||
@ -49,19 +49,19 @@
|
||||
<icon contact></icon>
|
||||
Clear
|
||||
</button>
|
||||
</ion-nav-items>
|
||||
</ion-buttons>
|
||||
<ion-title>Clear</ion-title>
|
||||
<ion-nav-items secondary>
|
||||
<ion-buttons end>
|
||||
<button clear secondary>
|
||||
Help
|
||||
<icon help-circle></icon>
|
||||
</button>
|
||||
</ion-nav-items>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-nav-items primary>
|
||||
<ion-buttons start>
|
||||
<button clear class="activated">
|
||||
<icon contact></icon>
|
||||
</button>
|
||||
@ -69,19 +69,19 @@
|
||||
<icon contact></icon>
|
||||
Clear
|
||||
</button>
|
||||
</ion-nav-items>
|
||||
</ion-buttons>
|
||||
<ion-title>Clear</ion-title>
|
||||
<ion-nav-items secondary>
|
||||
<ion-buttons end>
|
||||
<button clear secondary class="activated">
|
||||
Help
|
||||
<icon help-circle></icon>
|
||||
</button>
|
||||
</ion-nav-items>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-nav-items primary>
|
||||
<ion-buttons start>
|
||||
<button outline>
|
||||
<icon contact></icon>
|
||||
</button>
|
||||
@ -89,18 +89,18 @@
|
||||
<icon star></icon>
|
||||
Star
|
||||
</button>
|
||||
</ion-nav-items>
|
||||
<ion-nav-items secondary>
|
||||
</ion-buttons>
|
||||
<ion-buttons end>
|
||||
<button secondary outline>
|
||||
<icon contact></icon>
|
||||
</button>
|
||||
</ion-nav-items>
|
||||
</ion-buttons>
|
||||
<ion-title>Outline</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-nav-items primary>
|
||||
<ion-buttons start>
|
||||
<button outline class="activated">
|
||||
<icon contact></icon>
|
||||
</button>
|
||||
@ -108,94 +108,94 @@
|
||||
<icon star></icon>
|
||||
Star
|
||||
</button>
|
||||
</ion-nav-items>
|
||||
<ion-nav-items secondary>
|
||||
</ion-buttons>
|
||||
<ion-buttons end>
|
||||
<button secondary outline class="activated">
|
||||
<icon contact></icon>
|
||||
</button>
|
||||
</ion-nav-items>
|
||||
</ion-buttons>
|
||||
<ion-title>Outline.activated</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-nav-items primary>
|
||||
<ion-buttons start>
|
||||
<button>
|
||||
Btn
|
||||
</button>
|
||||
</ion-nav-items>
|
||||
<ion-nav-items secondary>
|
||||
</ion-buttons>
|
||||
<ion-buttons end>
|
||||
<button secondary>
|
||||
Btn
|
||||
</button>
|
||||
</ion-nav-items>
|
||||
</ion-buttons>
|
||||
<ion-title>ColorAttr</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-nav-items primary>
|
||||
<ion-buttons start>
|
||||
<button class="activated">
|
||||
Btn
|
||||
</button>
|
||||
</ion-nav-items>
|
||||
<ion-nav-items secondary>
|
||||
</ion-buttons>
|
||||
<ion-buttons end>
|
||||
<button secondary class="activated">
|
||||
Btn
|
||||
</button>
|
||||
</ion-nav-items>
|
||||
</ion-buttons>
|
||||
<ion-title>ColorAttr.activated</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-nav-items primary>
|
||||
<ion-buttons start>
|
||||
<button>
|
||||
<icon contact></icon>
|
||||
Clear
|
||||
</button>
|
||||
</ion-nav-items>
|
||||
<ion-nav-items secondary>
|
||||
</ion-buttons>
|
||||
<ion-buttons end>
|
||||
<button>
|
||||
Edit
|
||||
<icon create></icon>
|
||||
</button>
|
||||
</ion-nav-items>
|
||||
</ion-buttons>
|
||||
<ion-title>Icon/Color Attr</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
|
||||
<ion-toolbar>
|
||||
<a menu-toggle>
|
||||
<button menu-toggle>
|
||||
<icon menu></icon>
|
||||
</a>
|
||||
<ion-nav-items primary>
|
||||
</button>
|
||||
<ion-buttons start>
|
||||
<button>
|
||||
<icon star></icon>
|
||||
</button>
|
||||
</ion-nav-items>
|
||||
</ion-buttons>
|
||||
<ion-title>Left side menu toggle</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-nav-items secondary>
|
||||
<ion-buttons end>
|
||||
<button #button1 (click)="buttonClick(button1)">
|
||||
<icon star></icon>
|
||||
</button>
|
||||
</ion-nav-items>
|
||||
</ion-buttons>
|
||||
<ion-title>Right side menu toggle</ion-title>
|
||||
<a menu-toggle secondary>
|
||||
<button menu-toggle right>
|
||||
<icon menu></icon>
|
||||
</a>
|
||||
</button>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-nav-items secondary>
|
||||
<ion-buttons end>
|
||||
<button #button2 (click)="buttonClick(button2)">
|
||||
<icon search></icon>
|
||||
</button>
|
||||
</ion-nav-items>
|
||||
</ion-buttons>
|
||||
<ion-segment secondary>
|
||||
<ion-segment-button>
|
||||
Something
|
||||
|
||||
@ -39,14 +39,9 @@
|
||||
margin: 0 6px;
|
||||
padding: 0;
|
||||
min-width: 36px;
|
||||
order: map-get($toolbar-order, menu-toggle-primary);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.toolbar [menu-toggle][secondary] {
|
||||
order: map-get($toolbar-order, menu-toggle-secondary);
|
||||
}
|
||||
|
||||
.toolbar [menu-toggle] icon {
|
||||
padding: 0 6px;
|
||||
font-size: 2.8rem;
|
||||
@ -57,8 +52,6 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
.back-button {
|
||||
order: map-get($toolbar-order, backButton);
|
||||
|
||||
display: none;
|
||||
&.show-back-button {
|
||||
display: flex;
|
||||
|
||||
@ -3,15 +3,6 @@
|
||||
// Toolbar
|
||||
// --------------------------------------------------
|
||||
|
||||
$toolbar-order: (
|
||||
backButton: 10,
|
||||
menu-toggle-left: 20,
|
||||
content: 30,
|
||||
left: 40,
|
||||
right: 50,
|
||||
menu-toggle-right: 60,
|
||||
);
|
||||
|
||||
|
||||
.toolbar {
|
||||
position: relative;
|
||||
@ -40,12 +31,6 @@ $toolbar-order: (
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.toolbar-content {
|
||||
display: block;
|
||||
flex: 1;
|
||||
order: map-get($toolbar-order, content);
|
||||
}
|
||||
|
||||
.toolbar[position=bottom] {
|
||||
order: $flex-order-toolbar-bottom;
|
||||
}
|
||||
@ -64,27 +49,22 @@ ion-title {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
ion-nav-items {
|
||||
ion-buttons {
|
||||
display: block;
|
||||
margin: 0 0.2rem;
|
||||
pointer-events: none;
|
||||
order: map-get($toolbar-order, left);
|
||||
}
|
||||
|
||||
ion-nav-items[secondary] {
|
||||
order: map-get($toolbar-order, right);
|
||||
}
|
||||
|
||||
ion-nav-items button,
|
||||
ion-nav-items a,
|
||||
ion-nav-items input,
|
||||
ion-nav-items textarea,
|
||||
ion-nav-items div {
|
||||
ion-buttons button,
|
||||
ion-buttons a,
|
||||
ion-buttons input,
|
||||
ion-buttons textarea,
|
||||
ion-buttons div {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
// TODO this is a temp hack to fix segment overlapping ion-nav-item
|
||||
ion-nav-items,
|
||||
ion-buttons,
|
||||
[menu-toggle] {
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
@ -44,7 +44,7 @@ export class ToolbarBase extends Ion {
|
||||
|
||||
/**
|
||||
* @private
|
||||
* A toolbar items include the left and right side `ion-nav-items`,
|
||||
* A toolbar items include the left and right side `ion-buttons`,
|
||||
* and every `menu-toggle`. It does not include the `ion-title`.
|
||||
* @returns {TODO} Array of this toolbar's item ElementRefs.
|
||||
*/
|
||||
@ -79,9 +79,9 @@ export class ToolbarBase extends Ion {
|
||||
selector: 'ion-toolbar',
|
||||
template:
|
||||
'<div class="toolbar-background"></div>' +
|
||||
'<ng-content select="[menu-toggle]"></ng-content>' +
|
||||
'<ng-content select="ion-nav-items[primary]"></ng-content>' +
|
||||
'<ng-content select="ion-nav-items[secondary]"></ng-content>' +
|
||||
'<ng-content select="[menu-toggle],ion-buttons[left]"></ng-content>' +
|
||||
'<ng-content select="ion-buttons[start]"></ng-content>' +
|
||||
'<ng-content select="ion-buttons[end],ion-buttons[right]"></ng-content>' +
|
||||
'<div class="toolbar-content">' +
|
||||
'<ng-content></ng-content>' +
|
||||
'</div>',
|
||||
@ -149,7 +149,7 @@ export class ToolbarTitle extends Ion {
|
||||
* @private
|
||||
*/
|
||||
@Directive({
|
||||
selector: 'ion-nav-items,[menu-toggle]'
|
||||
selector: 'ion-buttons,[menu-toggle]'
|
||||
})
|
||||
export class ToolbarItem extends Ion {
|
||||
constructor(
|
||||
|
||||
Reference in New Issue
Block a user