mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 19:21:34 +08:00
toolbar/navbar/button updates
This commit is contained in:
Adam Bradley
@ -125,25 +125,25 @@ export class IonicApp {
|
||||
});
|
||||
}
|
||||
|
||||
applyBodyCss(bodyClassList, platform, config) {
|
||||
applyBodyCss(bodyEle, platform, config) {
|
||||
let versions = platform.versions();
|
||||
platform.platforms().forEach(platformName => {
|
||||
// platform-ios
|
||||
let platformClass = 'platform-' + platformName;
|
||||
bodyClassList.add(platformClass);
|
||||
bodyEle.classList.add(platformClass);
|
||||
|
||||
let platformVersion = versions[platformName];
|
||||
if (platformVersion) {
|
||||
// platform-ios_8
|
||||
platformClass += '_' + platformVersion.major;
|
||||
bodyClassList.add(platformClass);
|
||||
bodyEle.classList.add(platformClass);
|
||||
|
||||
// platform-ios_8_3
|
||||
bodyClassList.add(platformClass + '_' + platformVersion.minor);
|
||||
bodyEle.classList.add(platformClass + '_' + platformVersion.minor);
|
||||
}
|
||||
});
|
||||
|
||||
bodyClassList.add('mode-' + config.setting('mode'));
|
||||
bodyEle.setAttribute('mode', config.setting('mode'));
|
||||
}
|
||||
|
||||
isRTL(val) {
|
||||
@ -188,7 +188,7 @@ export function ionicBootstrap(component, config, router) {
|
||||
|
||||
// config and platform settings have been figured out
|
||||
// apply the correct CSS to the app
|
||||
app.applyBodyCss(document.body.classList, Platform, config);
|
||||
app.applyBodyCss(document.body, Platform, config);
|
||||
|
||||
// prepare the ready promise to fire....when ready
|
||||
Platform.prepareReady(config);
|
||||
|
||||
@ -1,16 +1,22 @@
|
||||
|
||||
// Z-Index
|
||||
// --------------------------------------------------
|
||||
// Grouped by elements which would be siblings
|
||||
|
||||
$z-index-content-container: 5 !default;
|
||||
$z-index-navbar-container: 10 !default;
|
||||
|
||||
$z-index-content: 1 !default;
|
||||
$z-index-swipe-handle: 5 !default;
|
||||
|
||||
$z-index-toolbar-border: 20 !default;
|
||||
$z-index-list-border: 50 !default;
|
||||
|
||||
$z-index-aside-overlay: 80 !default;
|
||||
$z-index-overlay: 1000 !default;
|
||||
$z-index-click-block: 9999 !default;
|
||||
|
||||
|
||||
$z-index-content-container: 5 !default;
|
||||
$z-index-navbar-container: 10 !default;
|
||||
|
||||
|
||||
$z-index-content: 5 !default;
|
||||
$z-index-toolbar: 10 !default;
|
||||
$z-index-swipe-handle: 15 !default;
|
||||
|
||||
|
||||
$z-index-toolbar-border: 20 !default;
|
||||
$z-index-list-border: 50 !default;
|
||||
|
||||
@ -10,7 +10,8 @@ $button-material-box-shadow-active: 0 4px 5px 0 rgba(0, 0, 0, 0.14),0 1px
|
||||
$button-material-border-radius: 3px !default;
|
||||
|
||||
|
||||
.mode-md button, .mode-md [button] {
|
||||
[mode="md"] button,
|
||||
[mode="md"] [button] {
|
||||
border: 0;
|
||||
border-radius: $button-material-border-radius;
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@ $card-md-font-size: 1.4rem !default;
|
||||
$card-md-item-content-padding: 15px !default;
|
||||
|
||||
|
||||
.mode-md .card {
|
||||
[mode="md"] .card {
|
||||
background: $card-md-background-color;
|
||||
box-shadow: $card-md-box-shadow;
|
||||
border-radius: $card-md-border-radius;
|
||||
|
||||
@ -2,27 +2,12 @@
|
||||
// iOS Navbar
|
||||
// --------------------------------------------------
|
||||
|
||||
$navbar-order-ios: (
|
||||
back-button: 10,
|
||||
primary: 20,
|
||||
title: 30,
|
||||
secondary: 40
|
||||
);
|
||||
|
||||
$navbar-ios-height: 4.4rem !default;
|
||||
$navbar-ios-background: #f7f7f8 !default;
|
||||
$navbar-ios-border-color: #c4c4c4 !default;
|
||||
|
||||
$navbar-ios-title-font-size: 1.7rem !default;
|
||||
$navbar-ios-button-font-size: 1.7rem !default;
|
||||
$navbar-ios-button-text-color: #007aff !default;
|
||||
$navbar-ios-button-background-color: transparent !default;
|
||||
|
||||
|
||||
.nav[mode="ios"] .navbar-container {
|
||||
|
||||
min-height: $navbar-ios-height;
|
||||
background: $navbar-ios-background;
|
||||
|
||||
// navbar on top, border on bottom (default)
|
||||
@include hairline(bottom, $navbar-ios-border-color);
|
||||
@ -32,49 +17,26 @@ $navbar-ios-button-background-color: transparent !default;
|
||||
top: 0;
|
||||
bottom: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-title {
|
||||
order: map-get($navbar-order-ios, 'title');
|
||||
}
|
||||
|
||||
.toolbar-primary-item {
|
||||
order: map-get($navbar-order-ios, 'primary');
|
||||
}
|
||||
|
||||
.toolbar-secondary-item {
|
||||
order: map-get($navbar-order-ios, 'secondary');
|
||||
}
|
||||
|
||||
ion-title {
|
||||
order: map-get($navbar-order-ios, 'title');
|
||||
font-size: $navbar-ios-title-font-size;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
order: map-get($navbar-order-ios, 'back-button');
|
||||
overflow: inherit;
|
||||
}
|
||||
.navbar[mode="ios"] {
|
||||
|
||||
button,
|
||||
[button] {
|
||||
font-size: $navbar-ios-button-font-size;
|
||||
color: $navbar-ios-button-text-color;
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin: 0 10px;
|
||||
margin: 0 1rem;
|
||||
|
||||
min-height: $navbar-ios-height;
|
||||
min-width: 0;
|
||||
background: $navbar-ios-button-background-color;
|
||||
}
|
||||
|
||||
[icon] {
|
||||
font-size: 2.5rem;
|
||||
.back-button {
|
||||
order: map-get($toolbar-order-ios, 'back-button');
|
||||
overflow: inherit;
|
||||
}
|
||||
|
||||
.back-button-icon {
|
||||
padding-right: 6px;
|
||||
padding-right: 0.6rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -2,67 +2,14 @@
|
||||
// Material Design Navbar
|
||||
// --------------------------------------------------
|
||||
|
||||
$navbar-order-material: (
|
||||
back-button: 10,
|
||||
primary: 20,
|
||||
title: 30,
|
||||
secondary: 40
|
||||
);
|
||||
|
||||
$navbar-material-height: 5.6rem !default;
|
||||
$navbar-material-background: get-color(primary, base) !default;
|
||||
|
||||
$navbar-material-title-font-size: 2rem !default;
|
||||
$navbar-material-button-font-size: 24px !default;
|
||||
$navbar-material-button-text-color: #fff !default; //#007aff !default;
|
||||
|
||||
|
||||
.nav[mode="md"] .navbar-container {
|
||||
height: $navbar-material-height;
|
||||
background: $navbar-material-background;
|
||||
min-height: $navbar-material-height;
|
||||
}
|
||||
|
||||
.toolbar-inner-title {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.toolbar-inner {
|
||||
padding: 0px 16px;
|
||||
}
|
||||
|
||||
.toolbar-title {
|
||||
order: map-get($navbar-order-ios, 'title');
|
||||
}
|
||||
|
||||
.toolbar-primary-item {
|
||||
order: map-get($navbar-order-ios, 'primary');
|
||||
}
|
||||
|
||||
.toolbar-secondary-item {
|
||||
order: map-get($navbar-order-ios, 'secondary');
|
||||
}
|
||||
|
||||
.toolbar-primary-item ion-nav-items button:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
ion-title {
|
||||
font-size: $navbar-material-title-font-size;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
button,
|
||||
[button] {
|
||||
font-size: $navbar-material-button-font-size;
|
||||
color: $navbar-material-button-text-color;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
|
||||
padding: 0;
|
||||
margin: 0 10px;
|
||||
|
||||
min-height: $navbar-material-height;
|
||||
min-width: 0;
|
||||
}
|
||||
.navbar[mode="md"] {
|
||||
|
||||
.back-button {
|
||||
margin: 0;
|
||||
@ -71,8 +18,8 @@ $navbar-material-button-text-color: #fff !default; //#007aff !default;
|
||||
.back-button-icon {
|
||||
margin: 0;
|
||||
font-weight: normal;
|
||||
font-size: 24px;
|
||||
min-width: 56px;
|
||||
font-size: 2.4rem;
|
||||
min-width: 5.6rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
|
||||
@ -3,26 +3,20 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
.navbar {
|
||||
.navbar.toolbar {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 4.4rem;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
order: $flex-order-toolbar-top;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
transform: translate3d(100%, 0px, 0px);
|
||||
|
||||
&.show-navbar {
|
||||
transform: translate3d(0px, 0px, 0px);
|
||||
}
|
||||
}
|
||||
|
||||
.back-button {
|
||||
order: 10;
|
||||
order: map-get($toolbar-order, backButton);;
|
||||
transform: translateZ(0px);
|
||||
|
||||
display: none;
|
||||
@ -36,24 +30,6 @@
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
// Core Nav Bar Color Generation
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color, $value in $colors {
|
||||
|
||||
.navbar[#{$color}] {
|
||||
background-color: get-color($color, base);
|
||||
|
||||
ion-title,
|
||||
button,
|
||||
[button] {
|
||||
color: get-color($color, inverse);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.transparent-navbar.navbar {
|
||||
background-color: transparent;
|
||||
.transparent-navbar {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
@ -10,7 +10,10 @@ import * as dom from '../../util/dom';
|
||||
|
||||
|
||||
@IonicComponent({
|
||||
selector: 'ion-navbar'
|
||||
selector: 'ion-navbar',
|
||||
host: {
|
||||
'class': 'toolbar'
|
||||
}
|
||||
})
|
||||
@IonicView({
|
||||
template: `
|
||||
|
||||
@ -9,12 +9,8 @@ import {ThirdPage} from './third-page';
|
||||
template: '' +
|
||||
'<ion-navbar *navbar primary>' +
|
||||
'<ion-title>First Page: {{ val }}</ion-title>' +
|
||||
'<ion-nav-items primary>' +
|
||||
'<button>P1</button>' +
|
||||
'</ion-nav-items>' +
|
||||
'<ion-nav-items secondary>' +
|
||||
'<button>S1</button>' +
|
||||
'<button icon><i class="icon ion-navicon"></i></button>' +
|
||||
'</ion-nav-items>' +
|
||||
'</ion-navbar>' +
|
||||
'<ion-content class="padding">' +
|
||||
|
||||
@ -33,14 +33,14 @@ $tab-bar-ios-height: 49px !default;
|
||||
}
|
||||
|
||||
&[tab-bar-placement="bottom"] > .tab-bar-container {
|
||||
@include hairline(top, $navbar-ios-border-color);
|
||||
@include hairline(top, $toolbar-ios-border-color);
|
||||
}
|
||||
|
||||
&[tab-bar-placement="top"] > .tab-bar-container {
|
||||
@include hairline(bottom, $navbar-ios-border-color);
|
||||
@include hairline(bottom, $toolbar-ios-border-color);
|
||||
}
|
||||
|
||||
&[tab-bar-placement="top"] > .navbar-container .navbar {
|
||||
&[tab-bar-placement="top"] > .toolbar-container .toolbar {
|
||||
@include hairline(bottom, none);
|
||||
}
|
||||
|
||||
|
||||
@ -1,68 +1,76 @@
|
||||
// iOS Navbar
|
||||
|
||||
// iOS Toolbar
|
||||
// --------------------------------------------------
|
||||
|
||||
$toolbar-order-ios: (
|
||||
back-button: 10,
|
||||
primary: 20,
|
||||
title: 30,
|
||||
secondary: 40
|
||||
);
|
||||
|
||||
$toolbar-ios-height: 4.4rem !default;
|
||||
$toolbar-ios-background: #f7f7f8 !default;
|
||||
$toolbar-ios-border-color: #c4c4c4 !default;
|
||||
|
||||
$toolbar-ios-title-font-size: 1.7rem !default;
|
||||
$toolbar-ios-button-font-size: 1.7rem !default;
|
||||
$toolbar-ios-button-text-color: #007aff !default;
|
||||
$toolbar-ios-button-background-color: transparent !default;
|
||||
|
||||
$toolbar-ios-padding: 0px 15px;
|
||||
$toolbar-ios-title-font-size: 1.7rem !default;
|
||||
|
||||
|
||||
.toolbar[mode="ios"] {
|
||||
|
||||
padding: $toolbar-ios-padding;
|
||||
|
||||
height: $toolbar-ios-height;
|
||||
background: $toolbar-ios-background;
|
||||
.nav[mode="ios"] .toolbar-container {
|
||||
min-height: $toolbar-ios-height;
|
||||
|
||||
// toolbar on top, border on bottom (default)
|
||||
@include hairline(bottom, $toolbar-ios-border-color);
|
||||
|
||||
|
||||
// toolbar on bottom, border on top
|
||||
&[position="bottom"]:after {
|
||||
&.toolbar-bottom:after {
|
||||
top: 0;
|
||||
bottom: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar[mode="ios"] {
|
||||
|
||||
.toolbar-title {
|
||||
order: map-get($toolbar-order-ios, 'title');
|
||||
order: map-get($toolbar-order-ios, title);
|
||||
}
|
||||
|
||||
.toolbar-primary-item {
|
||||
order: map-get($toolbar-order-ios, 'primary');
|
||||
order: map-get($toolbar-order-ios, primary);
|
||||
}
|
||||
|
||||
.toolbar-secondary-item {
|
||||
order: map-get($toolbar-order-ios, 'secondary');
|
||||
order: map-get($toolbar-order-ios, secondary);
|
||||
}
|
||||
|
||||
ion-title {
|
||||
order: map-get($toolbar-order-ios, 'title');
|
||||
text-align: center;
|
||||
font-size: $toolbar-ios-title-font-size;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
order: map-get($toolbar-order-ios, 'back-button');
|
||||
overflow: inherit;
|
||||
}
|
||||
|
||||
button,
|
||||
[button] {
|
||||
font-size: $toolbar-ios-button-font-size;
|
||||
color: $toolbar-ios-button-text-color;
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin: 0 10px;
|
||||
min-height: $toolbar-ios-height;
|
||||
margin: 0 1rem;
|
||||
|
||||
min-width: 0;
|
||||
background: $toolbar-ios-button-background-color;
|
||||
min-height: $toolbar-ios-height;
|
||||
|
||||
font-size: $toolbar-ios-button-font-size;
|
||||
}
|
||||
|
||||
[icon] {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.back-button-icon {
|
||||
padding-right: 0.6rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -1,14 +1,16 @@
|
||||
$toolbar-material-height: 6.4rem !default;
|
||||
$toolbar-material-background: get-color(primary, base) !default;//#f7f7f8 !default;
|
||||
|
||||
// Material Design Toolbar
|
||||
// --------------------------------------------------
|
||||
|
||||
$toolbar-material-title-font-size: 2rem !default;
|
||||
$toolbar-material-button-font-size: 2rem !default;
|
||||
$toolbar-material-button-text-color: #007aff !default;
|
||||
$toolbar-material-button-font-size: 24px !default;
|
||||
|
||||
|
||||
.toolbar[mode="md"] {
|
||||
padding: 0px 16px;
|
||||
height: $toolbar-material-height;
|
||||
background: $toolbar-material-background;
|
||||
|
||||
.toolbar-inner {
|
||||
padding: 0px 16px;
|
||||
}
|
||||
|
||||
.toolbar-inner-title {
|
||||
padding: 0;
|
||||
@ -19,17 +21,19 @@ $toolbar-material-button-text-color: #007aff !default;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.toolbar-primary-item ion-nav-items button:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
button,
|
||||
[button] {
|
||||
font-size: $toolbar-material-button-font-size;
|
||||
color: $toolbar-material-button-text-color;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
|
||||
padding: 0;
|
||||
margin: 0 10px;
|
||||
margin: 0 1rem;
|
||||
|
||||
min-height: $toolbar-material-height;
|
||||
min-width: 0;
|
||||
|
||||
box-shadow: none;
|
||||
font-size: $toolbar-material-button-font-size;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -3,17 +3,22 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
$toolbar-order: (
|
||||
backButton: 10,
|
||||
title: 20,
|
||||
primary: 30,
|
||||
secondary: 40
|
||||
);
|
||||
|
||||
$toolbar-zindex: 2;
|
||||
|
||||
$toolbar-background: #f4f4f4 !default;
|
||||
$toolbar-button-text-color: #007aff !default;
|
||||
$toolbar-title-text-color: #000 !default;
|
||||
|
||||
|
||||
ion-toolbar {
|
||||
z-index: $toolbar-zindex;
|
||||
.toolbar {
|
||||
position: relative;
|
||||
z-index: $z-index-toolbar;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 4.4rem;
|
||||
@ -23,9 +28,17 @@ ion-toolbar {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
order: $flex-order-toolbar-top;
|
||||
|
||||
background-color: $toolbar-background;
|
||||
|
||||
button,
|
||||
[button] {
|
||||
color: $toolbar-button-text-color;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
ion-toolbar[position="bottom"] {
|
||||
.toolbar[position="bottom"] {
|
||||
order: $flex-order-toolbar-bottom;
|
||||
}
|
||||
|
||||
@ -36,7 +49,7 @@ ion-toolbar[position="bottom"] {
|
||||
|
||||
.toolbar-title {
|
||||
flex: 1;
|
||||
order: map-get($toolbar-order, 'title');
|
||||
order: map-get($toolbar-order, title);
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -46,7 +59,7 @@ ion-toolbar[position="bottom"] {
|
||||
|
||||
.toolbar-inner-title {
|
||||
width: 100%;
|
||||
padding: 0 15px;
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
|
||||
ion-title {
|
||||
@ -61,15 +74,27 @@ ion-title {
|
||||
}
|
||||
|
||||
.toolbar-primary-item {
|
||||
order: map-get($toolbar-order, 'primary');
|
||||
order: map-get($toolbar-order, primary);
|
||||
}
|
||||
|
||||
.toolbar-secondary-item {
|
||||
order: map-get($toolbar-order, 'secondary');
|
||||
order: map-get($toolbar-order, secondary);
|
||||
}
|
||||
|
||||
.toolbar button,
|
||||
.toolbar [button] {
|
||||
background: transparent;
|
||||
border: none;
|
||||
|
||||
// Toolbar Color Generation
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color, $value in $colors {
|
||||
|
||||
.toolbar[#{$color}] {
|
||||
background-color: get-color($color, base);
|
||||
|
||||
ion-title,
|
||||
button,
|
||||
[button] {
|
||||
color: get-color($color, inverse);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -142,7 +142,7 @@ function appendConfig(cls, config) {
|
||||
cls.delegates = config.delegates;
|
||||
|
||||
let componentId = config.classId || (config.selector && config.selector.replace('ion-', ''));
|
||||
config.host['class'] = componentId;
|
||||
config.host['class'] = ((config.host['class'] || '') + ' ' + componentId).trim();
|
||||
|
||||
// the mode will get figured out when the component is constructed
|
||||
config.host['[attr.mode]'] = 'clsMode';
|
||||
|
||||
@ -23,6 +23,7 @@
|
||||
|
||||
// Core Components
|
||||
@import
|
||||
"components/toolbar/toolbar",
|
||||
"components/action-menu/action-menu",
|
||||
"components/alert/alert",
|
||||
"components/aside/aside",
|
||||
@ -48,13 +49,12 @@
|
||||
"components/segment/segment",
|
||||
"components/switch/switch",
|
||||
"components/tabs/tabs",
|
||||
"components/toolbar/toolbar",
|
||||
"components/view/view";
|
||||
|
||||
|
||||
// iOS Components
|
||||
@import
|
||||
"components/nav-bar/extensions/ios",
|
||||
"components/toolbar/extensions/ios",
|
||||
"components/action-menu/extensions/ios",
|
||||
"components/alert/extensions/ios",
|
||||
"components/button/extensions/ios",
|
||||
@ -63,12 +63,12 @@
|
||||
"components/content/extensions/ios",
|
||||
"components/list/extensions/ios",
|
||||
"components/item/extensions/ios",
|
||||
"components/nav-bar/extensions/ios",
|
||||
"components/radio/extensions/ios",
|
||||
"components/search-bar/extensions/ios",
|
||||
"components/segment/extensions/ios",
|
||||
"components/switch/extensions/ios",
|
||||
"components/tabs/extensions/ios",
|
||||
"components/toolbar/extensions/ios";
|
||||
"components/tabs/extensions/ios";
|
||||
|
||||
|
||||
// Material Design Components
|
||||
@ -76,6 +76,7 @@
|
||||
"components/material/variables",
|
||||
"components/material/ripple",
|
||||
|
||||
"components/toolbar/extensions/material",
|
||||
"components/app/extensions/material",
|
||||
"components/action-menu/extensions/material",
|
||||
"components/alert/extensions/material",
|
||||
@ -85,8 +86,7 @@
|
||||
"components/item/extensions/material",
|
||||
"components/list/extensions/material",
|
||||
"components/nav-bar/extensions/material",
|
||||
"components/tabs/extensions/material",
|
||||
"components/toolbar/extensions/material";
|
||||
"components/tabs/extensions/material";
|
||||
|
||||
|
||||
// Icons
|
||||
|
||||
Reference in New Issue
Block a user