mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-24 14:58:36 +08:00
feat(ios): add ios 11 layout support (#13473)
* feat(): support ios11 layout * style(): update ios11 layout mixins * style(): ios layout updates * style(): adjust tabs vars * refactor(app): add statusbar for md mode and move sass vars adds cordova test for app and renames sass vars to remove cordova * test(app): update app cordova test for button * test(app): add page three
This commit is contained in:
Mike Hartington
committed by
Brandy Carney
Brandy Carney
parent
c73ba6b3b0
commit
aff9b516ac
18
BREAKING.md
18
BREAKING.md
@ -6,6 +6,7 @@ A list of the breaking changes introduced in Ionic Angular v4.
|
||||
- [Dynamic Mode](#dynamic-mode)
|
||||
- [Button](#button)
|
||||
- [Chip](#chip)
|
||||
- [Cordova](#cordova)
|
||||
- [Datetime](#datetime)
|
||||
- [FAB](#fab)
|
||||
- [Fixed Content](#fixed-content)
|
||||
@ -148,6 +149,23 @@ import { DateTime } from 'ionic-angular';
|
||||
import { Datetime } from 'ionic-angular';
|
||||
```
|
||||
|
||||
## Cordova
|
||||
|
||||
Sass variables for changing the cordova statusbar have been renamed to app:
|
||||
|
||||
**Old Usage Example:**
|
||||
|
||||
```css
|
||||
$cordova-ios-statusbar-padding: 20px;
|
||||
$cordova-md-statusbar-padding: 20px;
|
||||
```
|
||||
|
||||
**New Usage Example:**
|
||||
|
||||
```css
|
||||
$app-ios-statusbar-padding: 20px;
|
||||
$app-md-statusbar-padding: 20px;
|
||||
```
|
||||
|
||||
## FAB
|
||||
|
||||
|
||||
120
packages/core/src/components.d.ts
vendored
120
packages/core/src/components.d.ts
vendored
@ -242,6 +242,126 @@ declare global {
|
||||
}
|
||||
|
||||
|
||||
import {
|
||||
AppCordovaPageOne as AppCordovaPageOne
|
||||
} from './components/app/test/cordova/page-one';
|
||||
|
||||
declare global {
|
||||
interface HTMLAppCordovaPageOneElement extends AppCordovaPageOne, HTMLElement {
|
||||
}
|
||||
var HTMLAppCordovaPageOneElement: {
|
||||
prototype: HTMLAppCordovaPageOneElement;
|
||||
new (): HTMLAppCordovaPageOneElement;
|
||||
};
|
||||
interface HTMLElementTagNameMap {
|
||||
"app-cordova-page-one": HTMLAppCordovaPageOneElement;
|
||||
}
|
||||
interface ElementTagNameMap {
|
||||
"app-cordova-page-one": HTMLAppCordovaPageOneElement;
|
||||
}
|
||||
namespace JSX {
|
||||
interface IntrinsicElements {
|
||||
"app-cordova-page-one": JSXElements.AppCordovaPageOneAttributes;
|
||||
}
|
||||
}
|
||||
namespace JSXElements {
|
||||
export interface AppCordovaPageOneAttributes extends HTMLAttributes {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
import {
|
||||
AppCordovaPageTabs as AppCordovaPageTabs
|
||||
} from './components/app/test/cordova/page-tabs';
|
||||
|
||||
declare global {
|
||||
interface HTMLAppCordovaPageTabsElement extends AppCordovaPageTabs, HTMLElement {
|
||||
}
|
||||
var HTMLAppCordovaPageTabsElement: {
|
||||
prototype: HTMLAppCordovaPageTabsElement;
|
||||
new (): HTMLAppCordovaPageTabsElement;
|
||||
};
|
||||
interface HTMLElementTagNameMap {
|
||||
"app-cordova-page-tabs": HTMLAppCordovaPageTabsElement;
|
||||
}
|
||||
interface ElementTagNameMap {
|
||||
"app-cordova-page-tabs": HTMLAppCordovaPageTabsElement;
|
||||
}
|
||||
namespace JSX {
|
||||
interface IntrinsicElements {
|
||||
"app-cordova-page-tabs": JSXElements.AppCordovaPageTabsAttributes;
|
||||
}
|
||||
}
|
||||
namespace JSXElements {
|
||||
export interface AppCordovaPageTabsAttributes extends HTMLAttributes {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
import {
|
||||
AppCordovaPageThree as AppCordovaPageThree
|
||||
} from './components/app/test/cordova/page-three';
|
||||
|
||||
declare global {
|
||||
interface HTMLAppCordovaPageThreeElement extends AppCordovaPageThree, HTMLElement {
|
||||
}
|
||||
var HTMLAppCordovaPageThreeElement: {
|
||||
prototype: HTMLAppCordovaPageThreeElement;
|
||||
new (): HTMLAppCordovaPageThreeElement;
|
||||
};
|
||||
interface HTMLElementTagNameMap {
|
||||
"app-cordova-page-three": HTMLAppCordovaPageThreeElement;
|
||||
}
|
||||
interface ElementTagNameMap {
|
||||
"app-cordova-page-three": HTMLAppCordovaPageThreeElement;
|
||||
}
|
||||
namespace JSX {
|
||||
interface IntrinsicElements {
|
||||
"app-cordova-page-three": JSXElements.AppCordovaPageThreeAttributes;
|
||||
}
|
||||
}
|
||||
namespace JSXElements {
|
||||
export interface AppCordovaPageThreeAttributes extends HTMLAttributes {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
import {
|
||||
AppCordovaPageTwo as AppCordovaPageTwo
|
||||
} from './components/app/test/cordova/page-two';
|
||||
|
||||
declare global {
|
||||
interface HTMLAppCordovaPageTwoElement extends AppCordovaPageTwo, HTMLElement {
|
||||
}
|
||||
var HTMLAppCordovaPageTwoElement: {
|
||||
prototype: HTMLAppCordovaPageTwoElement;
|
||||
new (): HTMLAppCordovaPageTwoElement;
|
||||
};
|
||||
interface HTMLElementTagNameMap {
|
||||
"app-cordova-page-two": HTMLAppCordovaPageTwoElement;
|
||||
}
|
||||
interface ElementTagNameMap {
|
||||
"app-cordova-page-two": HTMLAppCordovaPageTwoElement;
|
||||
}
|
||||
namespace JSX {
|
||||
interface IntrinsicElements {
|
||||
"app-cordova-page-two": JSXElements.AppCordovaPageTwoAttributes;
|
||||
}
|
||||
}
|
||||
namespace JSXElements {
|
||||
export interface AppCordovaPageTwoAttributes extends HTMLAttributes {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
import {
|
||||
Avatar as IonAvatar
|
||||
} from './components/avatar/avatar';
|
||||
|
||||
@ -1,14 +1,30 @@
|
||||
@import "../../themes/ionic.globals.ios";
|
||||
@import "./app";
|
||||
|
||||
@import "../tabs/tabs.ios.vars";
|
||||
|
||||
// iOS App
|
||||
// --------------------------------------------------
|
||||
|
||||
$app-ios-statusbar-padding: 20px !default;
|
||||
|
||||
.app-ios {
|
||||
|
||||
@include footer-safe-area($toolbar-ios-height, $toolbar-ios-padding, $tabs-ios-tab-height);
|
||||
|
||||
font-family: $font-family-ios-base;
|
||||
font-size: $font-size-ios-base;
|
||||
background-color: $background-ios-color;
|
||||
|
||||
// TODO this can be simplified
|
||||
.ion-page,
|
||||
.ion-page > ion-header,
|
||||
ion-tabs ion-tab ion-nav .ion-page > ion-header,
|
||||
ion-menu > .menu-inner,
|
||||
ion-menu > .menu-inner > ion-header {
|
||||
@include toolbar-statusbar-padding($toolbar-ios-height, $toolbar-ios-padding, $content-ios-padding, $app-ios-statusbar-padding);
|
||||
@include toolbar-title-statusbar-padding($toolbar-ios-height, $toolbar-ios-padding, $content-ios-padding, $app-ios-statusbar-padding);
|
||||
}
|
||||
}
|
||||
|
||||
@import "../icon/icon.ios";
|
||||
|
||||
@ -1,14 +1,30 @@
|
||||
@import "../../themes/ionic.globals.md";
|
||||
@import "./app";
|
||||
|
||||
@import "../tabs/tabs.md.vars";
|
||||
|
||||
|
||||
// Material Design App
|
||||
// --------------------------------------------------
|
||||
|
||||
$app-md-statusbar-padding: 20px !default;
|
||||
|
||||
.app-md {
|
||||
|
||||
@include footer-safe-area($toolbar-md-height, $toolbar-md-padding, $tabs-md-tab-height);
|
||||
|
||||
font-family: $font-family-md-base;
|
||||
font-size: $font-size-md-base;
|
||||
background-color: $background-md-color;
|
||||
|
||||
// TODO this can be simplified
|
||||
.ion-page,
|
||||
.ion-page > ion-header,
|
||||
ion-tabs ion-tab ion-nav .ion-page > ion-header,
|
||||
ion-menu > .menu-inner,
|
||||
ion-menu > .menu-inner > ion-header {
|
||||
@include toolbar-statusbar-padding($toolbar-md-height, $toolbar-md-padding, $content-md-padding, $app-md-statusbar-padding);
|
||||
}
|
||||
}
|
||||
|
||||
@import "../icon/icon.md";
|
||||
|
||||
67
packages/core/src/components/app/test/cordova/index.html
Normal file
67
packages/core/src/components/app/test/cordova/index.html
Normal file
@ -0,0 +1,67 @@
|
||||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>App - Cordova</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
|
||||
<script src="/dist/ionic.js"></script>
|
||||
<script type="text/javascript">
|
||||
window.Ionic.config = { statusbarPadding: true };
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<ion-app>
|
||||
<ion-menu side="left">
|
||||
|
||||
<ion-header>
|
||||
<ion-toolbar color="secondary">
|
||||
<ion-title>Left Menu</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content>
|
||||
|
||||
<ion-list>
|
||||
<ion-list-header>
|
||||
Settings
|
||||
</ion-list-header>
|
||||
|
||||
<ion-item menuClose detail-none>
|
||||
Close Menu
|
||||
</ion-item>
|
||||
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
|
||||
</ion-menu>
|
||||
|
||||
<ion-menu side="right">
|
||||
|
||||
<ion-content>
|
||||
|
||||
<ion-list>
|
||||
<ion-list-header>
|
||||
No toolbar
|
||||
</ion-list-header>
|
||||
|
||||
<ion-item menuClose="right" detail-none>
|
||||
Close Menu
|
||||
</ion-item>
|
||||
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
|
||||
</ion-menu>
|
||||
|
||||
<ion-nav main root="app-cordova-page-one"></ion-nav>
|
||||
|
||||
<ion-nav-controller></ion-nav-controller>
|
||||
</ion-app>
|
||||
<ion-menu-controller></ion-menu-controller>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
59
packages/core/src/components/app/test/cordova/page-one.tsx
Normal file
59
packages/core/src/components/app/test/cordova/page-one.tsx
Normal file
@ -0,0 +1,59 @@
|
||||
import { Component, Element } from '@stencil/core';
|
||||
|
||||
@Component({
|
||||
tag: 'app-cordova-page-one'
|
||||
})
|
||||
export class AppCordovaPageOne {
|
||||
|
||||
@Element() element: HTMLElement;
|
||||
|
||||
componentDidEnter() {
|
||||
console.log('page one did enter');
|
||||
}
|
||||
|
||||
nextPage() {
|
||||
const nav = this.element.closest('ion-nav') as any;
|
||||
nav.push('app-cordova-page-two');
|
||||
}
|
||||
|
||||
goToTabs() {
|
||||
const nav = this.element.closest('ion-nav') as any;
|
||||
nav.setRoot('app-cordova-page-tabs');
|
||||
}
|
||||
|
||||
render() {
|
||||
return [
|
||||
<ion-header>
|
||||
<ion-toolbar color='primary'>
|
||||
<ion-buttons slot='start'>
|
||||
<ion-button><ion-icon slot='icon-only' name='menu'></ion-icon></ion-button>
|
||||
</ion-buttons>
|
||||
<ion-segment color='light'>
|
||||
<ion-segment-button checked>All</ion-segment-button>
|
||||
<ion-segment-button>Favorites</ion-segment-button>
|
||||
</ion-segment>
|
||||
<ion-buttons slot='end'>
|
||||
<ion-button><ion-icon slot='icon-only' name='search'></ion-icon></ion-button>
|
||||
<ion-button><ion-icon slot='icon-only' name='menu'></ion-icon></ion-button>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar>
|
||||
<ion-title>I'm a toolbar</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>,
|
||||
<ion-content>
|
||||
<div padding-bottom>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque dolor lacus, ut vehicula arcu dapibus id. Morbi iaculis fermentum blandit. Curabitur tempus, ante et vehicula tempor, urna velit rutrum massa, quis suscipit purus lacus eget est. Sed nisi nulla, tempus id dictum a, cursus ut felis. Aliquam orci magna, rutrum nec tempor ac, fermentum quis eros. Sed ullamcorper felis sit amet tristique sagittis. Nullam sed tempus mi. Morbi sit amet lacinia leo. Nunc facilisis orci id consectetur dignissim. Integer dictum consectetur enim. Vivamus auctor, turpis ut eleifend pharetra, purus magna mattis arcu, vel pharetra tellus orci eget ex. Integer blandit posuere vehicula. Ut ipsum lorem, efficitur vitae eleifend tincidunt, fermentum nec lacus. Ut nec fermentum dui.</div>
|
||||
|
||||
<ion-button onClick={() => this.nextPage()} expand='block' class='e2eCordovaPage2'>Go to Page Two</ion-button>
|
||||
<ion-button onClick={() => this.goToTabs()} color='secondary' expand='block' class='e2eCordovaPage2'>Go to Tabs</ion-button>
|
||||
|
||||
<div padding-bottom>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque dolor lacus, ut vehicula arcu dapibus id. Morbi iaculis fermentum blandit. Curabitur tempus, ante et vehicula tempor, urna velit rutrum massa, quis suscipit purus lacus eget est. Sed nisi nulla, tempus id dictum a, cursus ut felis. Aliquam orci magna, rutrum nec tempor ac, fermentum quis eros. Sed ullamcorper felis sit amet tristique sagittis. Nullam sed tempus mi. Morbi sit amet lacinia leo. Nunc facilisis orci id consectetur dignissim. Integer dictum consectetur enim. Vivamus auctor, turpis ut eleifend pharetra, purus magna mattis arcu, vel pharetra tellus orci eget ex. Integer blandit posuere vehicula. Ut ipsum lorem, efficitur vitae eleifend tincidunt, fermentum nec lacus. Ut nec fermentum dui.</div>
|
||||
|
||||
<div padding-bottom>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque dolor lacus, ut vehicula arcu dapibus id. Morbi iaculis fermentum blandit. Curabitur tempus, ante et vehicula tempor, urna velit rutrum massa, quis suscipit purus lacus eget est. Sed nisi nulla, tempus id dictum a, cursus ut felis. Aliquam orci magna, rutrum nec tempor ac, fermentum quis eros. Sed ullamcorper felis sit amet tristique sagittis. Nullam sed tempus mi. Morbi sit amet lacinia leo. Nunc facilisis orci id consectetur dignissim. Integer dictum consectetur enim. Vivamus auctor, turpis ut eleifend pharetra, purus magna mattis arcu, vel pharetra tellus orci eget ex. Integer blandit posuere vehicula. Ut ipsum lorem, efficitur vitae eleifend tincidunt, fermentum nec lacus. Ut nec fermentum dui.</div>
|
||||
|
||||
<div padding-bottom>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque dolor lacus, ut vehicula arcu dapibus id. Morbi iaculis fermentum blandit. Curabitur tempus, ante et vehicula tempor, urna velit rutrum massa, quis suscipit purus lacus eget est. Sed nisi nulla, tempus id dictum a, cursus ut felis. Aliquam orci magna, rutrum nec tempor ac, fermentum quis eros. Sed ullamcorper felis sit amet tristique sagittis. Nullam sed tempus mi. Morbi sit amet lacinia leo. Nunc facilisis orci id consectetur dignissim. Integer dictum consectetur enim. Vivamus auctor, turpis ut eleifend pharetra, purus magna mattis arcu, vel pharetra tellus orci eget ex. Integer blandit posuere vehicula. Ut ipsum lorem, efficitur vitae eleifend tincidunt, fermentum nec lacus. Ut nec fermentum dui.</div>
|
||||
|
||||
</ion-content>
|
||||
];
|
||||
}
|
||||
}
|
||||
31
packages/core/src/components/app/test/cordova/page-tabs.tsx
Normal file
31
packages/core/src/components/app/test/cordova/page-tabs.tsx
Normal file
@ -0,0 +1,31 @@
|
||||
import { Component, Element } from '@stencil/core';
|
||||
|
||||
@Component({
|
||||
tag: 'app-cordova-page-tabs'
|
||||
})
|
||||
export class AppCordovaPageTabs {
|
||||
|
||||
@Element() element: HTMLElement;
|
||||
|
||||
componentDidEnter() {
|
||||
console.log('page two did enter');
|
||||
}
|
||||
|
||||
render() {
|
||||
return [
|
||||
<ion-tabs>
|
||||
<ion-tab title='Page 1' icon='chatboxes'>
|
||||
<ion-nav root='app-cordova-page-one'></ion-nav>
|
||||
</ion-tab>
|
||||
|
||||
<ion-tab title='Page 2' icon='map'>
|
||||
<ion-nav root='app-cordova-page-two'></ion-nav>
|
||||
</ion-tab>
|
||||
|
||||
<ion-tab title='Page 3' icon='person'>
|
||||
<ion-nav root='app-cordova-page-three'></ion-nav>
|
||||
</ion-tab>
|
||||
</ion-tabs>
|
||||
];
|
||||
}
|
||||
}
|
||||
39
packages/core/src/components/app/test/cordova/page-three.tsx
Normal file
39
packages/core/src/components/app/test/cordova/page-three.tsx
Normal file
@ -0,0 +1,39 @@
|
||||
import { Component, Element } from '@stencil/core';
|
||||
|
||||
@Component({
|
||||
tag: 'app-cordova-page-three'
|
||||
})
|
||||
export class AppCordovaPageThree {
|
||||
|
||||
@Element() element: HTMLElement;
|
||||
|
||||
componentDidEnter() {
|
||||
console.log('page one did enter');
|
||||
}
|
||||
|
||||
nextPage() {
|
||||
const nav = this.element.closest('ion-nav') as any;
|
||||
nav.push('app-cordova-page-one');
|
||||
}
|
||||
|
||||
prevPage() {
|
||||
const nav = this.element.closest('ion-nav') as any;
|
||||
nav.push('app-cordova-page-two');
|
||||
}
|
||||
|
||||
render() {
|
||||
return [
|
||||
<ion-content>
|
||||
<h2>Page 3</h2>
|
||||
<div padding-bottom>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque dolor lacus, ut vehicula arcu dapibus id. Morbi iaculis fermentum blandit. Curabitur tempus, ante et vehicula tempor, urna velit rutrum massa, quis suscipit purus lacus eget est. Sed nisi nulla, tempus id dictum a, cursus ut felis. Aliquam orci magna, rutrum nec tempor ac, fermentum quis eros. Sed ullamcorper felis sit amet tristique sagittis. Nullam sed tempus mi. Morbi sit amet lacinia leo. Nunc facilisis orci id consectetur dignissim. Integer dictum consectetur enim. Vivamus auctor, turpis ut eleifend pharetra, purus magna mattis arcu, vel pharetra tellus orci eget ex. Integer blandit posuere vehicula. Ut ipsum lorem, efficitur vitae eleifend tincidunt, fermentum nec lacus. Ut nec fermentum dui.</div>
|
||||
<ion-button onClick={() => this.prevPage()} expand='block' class='e2eCordovaGoBack'>Go Back</ion-button>
|
||||
</ion-content>,
|
||||
|
||||
<ion-footer>
|
||||
<ion-toolbar>
|
||||
<ion-title>I'm a bottom toolbar</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-footer>
|
||||
];
|
||||
}
|
||||
}
|
||||
51
packages/core/src/components/app/test/cordova/page-two.tsx
Normal file
51
packages/core/src/components/app/test/cordova/page-two.tsx
Normal file
@ -0,0 +1,51 @@
|
||||
import { Component, Element } from '@stencil/core';
|
||||
|
||||
@Component({
|
||||
tag: 'app-cordova-page-two'
|
||||
})
|
||||
export class AppCordovaPageTwo {
|
||||
|
||||
@Element() element: HTMLElement;
|
||||
|
||||
componentDidEnter() {
|
||||
console.log('page two did enter');
|
||||
}
|
||||
|
||||
prevPage() {
|
||||
const nav = this.element.closest('ion-nav') as any;
|
||||
nav.push('app-cordova-page-one');
|
||||
}
|
||||
|
||||
nextPage() {
|
||||
const nav = this.element.closest('ion-nav') as any;
|
||||
nav.push('app-cordova-page-three');
|
||||
}
|
||||
|
||||
openModal() {
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
return [
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Page Two</ion-title>
|
||||
<ion-buttons slot='end'>
|
||||
<ion-button><ion-icon slot='icon-only' name='filter'></ion-icon></ion-button>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar>
|
||||
Hello I am a sub header, with no border on top
|
||||
</ion-toolbar>
|
||||
</ion-header>,
|
||||
<ion-content>
|
||||
<div padding-bottom>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque dolor lacus, ut vehicula arcu dapibus id. Morbi iaculis fermentum blandit. Curabitur tempus, ante et vehicula tempor, urna velit rutrum massa, quis suscipit purus lacus eget est. Sed nisi nulla, tempus id dictum a, cursus ut felis. Aliquam orci magna, rutrum nec tempor ac, fermentum quis eros. Sed ullamcorper felis sit amet tristique sagittis. Nullam sed tempus mi. Morbi sit amet lacinia leo. Nunc facilisis orci id consectetur dignissim. Integer dictum consectetur enim. Vivamus auctor, turpis ut eleifend pharetra, purus magna mattis arcu, vel pharetra tellus orci eget ex. Integer blandit posuere vehicula. Ut ipsum lorem, efficitur vitae eleifend tincidunt, fermentum nec lacus. Ut nec fermentum dui.</div>
|
||||
|
||||
<ion-button expand='block' onClick={() => this.prevPage()}>Go to Page One</ion-button>
|
||||
<ion-button expand='block' onClick={() => this.nextPage()} class='e2eCordovaPage3'>Go to Page Three</ion-button>
|
||||
<ion-button expand='block' color='secondary' onClick={() => this.openModal()} class='e2eCordovaOpenModal'>Open Modal</ion-button>
|
||||
|
||||
</ion-content>
|
||||
];
|
||||
}
|
||||
}
|
||||
@ -60,6 +60,14 @@ export class Content {
|
||||
this.scrollEl = null;
|
||||
}
|
||||
|
||||
hostData() {
|
||||
return {
|
||||
class: {
|
||||
'statusbar-padding': this.config.getBoolean('statusbarPadding')
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
@Method()
|
||||
enableJsScroll() {
|
||||
this.scrollEl.jsScroll = true;
|
||||
|
||||
@ -34,6 +34,15 @@ export class ItemOptions {
|
||||
this.ionSwipe.emit(value);
|
||||
}
|
||||
|
||||
hostData(){
|
||||
return {
|
||||
class:{
|
||||
'item-options-left': !this.isRightSide(),
|
||||
'item-options-right': this.isRightSide()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return <slot></slot>;
|
||||
}
|
||||
|
||||
@ -27,18 +27,17 @@ $item-ios-sliding-button-icon-color: color-contrast($colors-ios, $item-i
|
||||
|
||||
.list-ios ion-item-options {
|
||||
border-bottom: $hairlines-width solid $list-ios-border-color;
|
||||
|
||||
ion-item-option:last-child,
|
||||
&[side="right"] ion-item-option:last-child {
|
||||
@include safe-area-padding-horizontal(null, .7em);
|
||||
}
|
||||
|
||||
&[side="left"] ion-item-option:first-child {
|
||||
@include safe-area-padding-horizontal(.7em, null);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.list-ios .item-options-right ion-item-option:last-child {
|
||||
@include safe-area-padding-horizontal(null, .7em);
|
||||
}
|
||||
|
||||
.list-ios .item-options-left ion-item-option:first-child {
|
||||
@include safe-area-padding-horizontal(.7em, null);
|
||||
}
|
||||
|
||||
|
||||
.item-option-ios {
|
||||
font-size: $item-ios-sliding-button-font-size;
|
||||
color: $item-ios-sliding-button-text-color;
|
||||
|
||||
@ -113,7 +113,10 @@ $item-ios-detail-push-svg: "<svg xmlns='http://www.w3.org/2000/sv
|
||||
|
||||
.item-ios.item-block .item-inner {
|
||||
@include padding-horizontal(null, $item-ios-padding-end / 2);
|
||||
|
||||
@media screen and (orientation: landscape) {
|
||||
@include safe-area-padding-horizontal(null, $item-ios-padding-end / 2);
|
||||
}
|
||||
|
||||
border-bottom: $hairlines-width solid $list-ios-border-color;
|
||||
}
|
||||
|
||||
@ -91,6 +91,12 @@
|
||||
</ion-item>
|
||||
</ion-item-group>
|
||||
</ion-content>
|
||||
|
||||
<ion-footer>
|
||||
<ion-toolbar>
|
||||
<ion-title>Footer</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-footer>
|
||||
</ion-page>
|
||||
</ion-app>
|
||||
</body>
|
||||
|
||||
@ -117,5 +117,6 @@ ion-menu.menu-type-overlay {
|
||||
|
||||
ion-menu.menu-type-overlay .show-backdrop {
|
||||
display: block;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Menu - Basic</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
|
||||
<script src="/dist/ionic.js"></script>
|
||||
</head>
|
||||
|
||||
|
||||
@ -1,55 +1,9 @@
|
||||
@import "../../themes/ionic.globals.ios";
|
||||
@import "./tabs";
|
||||
@import "./tabs.ios.vars";
|
||||
|
||||
// iOS Tabs
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Border on the tabbar (border-top when [tabsPlacement=bottom] and border-bottom when [tabsPlacement=top])
|
||||
$tabs-ios-border: $hairlines-width solid $tabs-ios-border-color !default;
|
||||
|
||||
/// @prop - Padding top on the tab button
|
||||
$tabs-ios-tab-padding-top: 0 !default;
|
||||
|
||||
/// @prop - Padding end on the tab button
|
||||
$tabs-ios-tab-padding-end: 2px !default;
|
||||
|
||||
/// @prop - Padding bottom on the tab button
|
||||
$tabs-ios-tab-padding-bottom: $tabs-ios-tab-padding-top !default;
|
||||
|
||||
/// @prop - Padding start on the tab button
|
||||
$tabs-ios-tab-padding-start: $tabs-ios-tab-padding-end !default;
|
||||
|
||||
/// @prop - Max width of the tab button
|
||||
$tabs-ios-tab-max-width: 240px !default;
|
||||
|
||||
/// @prop - Minimum height of the tab button
|
||||
$tabs-ios-tab-height: 50px !default;
|
||||
|
||||
/// @prop - Text color of the inactive tab button
|
||||
$tabs-ios-tab-text-color: $tabs-ios-tab-color-inactive !default;
|
||||
|
||||
/// @prop - Text color of the active tab button
|
||||
$tabs-ios-tab-text-color-active: $tabs-ios-tab-color-active !default;
|
||||
|
||||
/// @prop - Icon color of the inactive tab button
|
||||
$tabs-ios-tab-icon-color: $tabs-ios-tab-color-inactive !default;
|
||||
|
||||
/// @prop - Icon color of the active tab button
|
||||
$tabs-ios-tab-icon-color-active: $tabs-ios-tab-color-active !default;
|
||||
|
||||
/// @prop - Font size of the tab button text
|
||||
$tabs-ios-tab-font-size: 10px !default;
|
||||
|
||||
/// @prop - Size of the tab button icon
|
||||
$tabs-ios-tab-icon-size: 30px !default;
|
||||
|
||||
/// @prop - Filter of the translucent tabbar
|
||||
$tabbar-ios-translucent-filter: saturate(210%) blur(20px) !default;
|
||||
|
||||
/// @prop - Opacity of the translucent tabbar
|
||||
$tabbar-ios-translucent-opacity: .8 !default;
|
||||
|
||||
|
||||
.tabbar-ios {
|
||||
justify-content: center;
|
||||
|
||||
|
||||
50
packages/core/src/components/tabs/tabs.ios.vars.scss
Normal file
50
packages/core/src/components/tabs/tabs.ios.vars.scss
Normal file
@ -0,0 +1,50 @@
|
||||
@import "../../themes/ionic.globals.ios";
|
||||
|
||||
// iOS Tabs
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Border on the tabbar (border-top when [tabsPlacement=bottom] and border-bottom when [tabsPlacement=top])
|
||||
$tabs-ios-border: $hairlines-width solid $tabs-ios-border-color !default;
|
||||
|
||||
/// @prop - Padding top on the tab button
|
||||
$tabs-ios-tab-padding-top: 0 !default;
|
||||
|
||||
/// @prop - Padding end on the tab button
|
||||
$tabs-ios-tab-padding-end: 2px !default;
|
||||
|
||||
/// @prop - Padding bottom on the tab button
|
||||
$tabs-ios-tab-padding-bottom: $tabs-ios-tab-padding-top !default;
|
||||
|
||||
/// @prop - Padding start on the tab button
|
||||
$tabs-ios-tab-padding-start: $tabs-ios-tab-padding-end !default;
|
||||
|
||||
/// @prop - Max width of the tab button
|
||||
$tabs-ios-tab-max-width: 240px !default;
|
||||
|
||||
/// @prop - Minimum height of the tab button
|
||||
$tabs-ios-tab-height: 50px !default;
|
||||
|
||||
/// @prop - Text color of the inactive tab button
|
||||
$tabs-ios-tab-text-color: $tabs-ios-tab-color-inactive !default;
|
||||
|
||||
/// @prop - Text color of the active tab button
|
||||
$tabs-ios-tab-text-color-active: $tabs-ios-tab-color-active !default;
|
||||
|
||||
/// @prop - Icon color of the inactive tab button
|
||||
$tabs-ios-tab-icon-color: $tabs-ios-tab-color-inactive !default;
|
||||
|
||||
/// @prop - Icon color of the active tab button
|
||||
$tabs-ios-tab-icon-color-active: $tabs-ios-tab-color-active !default;
|
||||
|
||||
/// @prop - Font size of the tab button text
|
||||
$tabs-ios-tab-font-size: 10px !default;
|
||||
|
||||
/// @prop - Size of the tab button icon
|
||||
$tabs-ios-tab-icon-size: 30px !default;
|
||||
|
||||
/// @prop - Filter of the translucent tabbar
|
||||
$tabbar-ios-translucent-filter: saturate(210%) blur(20px) !default;
|
||||
|
||||
/// @prop - Opacity of the translucent tabbar
|
||||
$tabbar-ios-translucent-opacity: .8 !default;
|
||||
|
||||
@ -1,112 +1,7 @@
|
||||
@import "../../themes/ionic.globals.md";
|
||||
@import "./tabs";
|
||||
@import "./tabs.md.vars";
|
||||
|
||||
|
||||
// Material Design Tabs
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Padding top on the tab button
|
||||
$tabs-md-tab-padding-top: .8rem !default;
|
||||
|
||||
/// @prop - Padding end on the tab button
|
||||
$tabs-md-tab-padding-end: 1.2rem !default;
|
||||
|
||||
/// @prop - Padding bottom on the tab button
|
||||
$tabs-md-tab-padding-bottom: 1rem !default;
|
||||
|
||||
/// @prop - Padding start on the tab button
|
||||
$tabs-md-tab-padding-start: 1.2rem, !default;
|
||||
|
||||
/// @prop - Minimum height of the tab button
|
||||
$tabs-md-tab-height: 5.6rem !default;
|
||||
|
||||
/// @prop - Font size of the inactive tab button text
|
||||
$tabs-md-tab-font-size: 1.2rem !default;
|
||||
|
||||
/// @prop - Font weight of the tab button text
|
||||
$tabs-md-tab-font-weight: normal !default;
|
||||
|
||||
/// @prop - Opacity of the inactive tab button
|
||||
$tabs-md-tab-opacity: .7 !default;
|
||||
|
||||
/// @prop - Text color of the inactive tab button
|
||||
$tabs-md-tab-text-color: rgba($tabs-md-tab-color-inactive, $tabs-md-tab-opacity) !default;
|
||||
|
||||
/// @prop - Text color of the active tab button
|
||||
$tabs-md-tab-text-color-active: $tabs-md-tab-color-active !default;
|
||||
|
||||
/// @prop - Icon color of the inactive tab button
|
||||
$tabs-md-tab-icon-color: rgba($tabs-md-tab-color-inactive, $tabs-md-tab-opacity) !default;
|
||||
|
||||
/// @prop - Icon color of the active tab button
|
||||
$tabs-md-tab-icon-color-active: $tabs-md-tab-color-active !default;
|
||||
|
||||
/// @prop - Font size of the active tab button text
|
||||
$tabs-md-tab-font-size-active: 1.4rem !default;
|
||||
|
||||
/// @prop - Margin top on the tab button text
|
||||
$tabs-md-tab-text-margin-top: 0 !default;
|
||||
|
||||
/// @prop - Margin end on the tab button text
|
||||
$tabs-md-tab-text-margin-end: $tabs-md-tab-text-margin-top !default;
|
||||
|
||||
/// @prop - Margin bottom on the tab button text
|
||||
$tabs-md-tab-text-margin-bottom: $tabs-md-tab-text-margin-top !default;
|
||||
|
||||
/// @prop - Margin start on the tab button text
|
||||
$tabs-md-tab-text-margin-start: $tabs-md-tab-text-margin-end !default;
|
||||
|
||||
/// @prop - Capitalization of the tab button text
|
||||
$tabs-md-tab-text-capitalization: none !default;
|
||||
|
||||
/// @prop - Transform for the active tab button text
|
||||
$tabs-md-tab-text-transform-active: scale3d($tabs-md-tab-font-size-active / $tabs-md-tab-font-size, $tabs-md-tab-font-size-active / $tabs-md-tab-font-size, 1) !default;
|
||||
|
||||
/// @prop - Text transition for the tab button text
|
||||
$tabs-md-tab-text-transition: transform .3s ease-in-out !default;
|
||||
|
||||
/// @prop - Transform x for the active tab button icon when the layout is icon-top, icon-only, or title-only
|
||||
$tabs-md-tab-icon-transform-x-active: 0 !default;
|
||||
|
||||
/// @prop - Transform y for the active tab button icon when the layout is icon-top, icon-only, or title-only
|
||||
$tabs-md-tab-icon-transform-y-active: -2px !default;
|
||||
|
||||
/// @prop - Transform z for the active tab button icon when the layout is icon-top, icon-only, or title-only
|
||||
$tabs-md-tab-icon-transform-z-active: 0 !default;
|
||||
|
||||
/// @prop - Transform x for the active tab button icon when the layout is icon-right
|
||||
$tabs-md-tab-icon-right-transform-x-active: 2px !default;
|
||||
|
||||
/// @prop - Transform y for the active tab button icon when the layout is icon-right
|
||||
$tabs-md-tab-icon-right-transform-y-active: 0 !default;
|
||||
|
||||
/// @prop - Transform z for the active tab button icon when the layout is icon-right
|
||||
$tabs-md-tab-icon-right-transform-z-active: 0 !default;
|
||||
|
||||
/// @prop - Transform x for the active tab button icon when the layout is icon-bottom
|
||||
$tabs-md-tab-icon-bottom-transform-x-active: 0 !default;
|
||||
|
||||
/// @prop - Transform y for the active tab button icon when the layout is icon-bottom
|
||||
$tabs-md-tab-icon-bottom-transform-y-active: 0.2rem !default;
|
||||
|
||||
/// @prop - Transform z for the active tab button icon when the layout is icon-bottom
|
||||
$tabs-md-tab-icon-bottom-transform-z-active: 0 !default;
|
||||
|
||||
/// @prop - Transform x for the active tab button icon when the layout is icon-left
|
||||
$tabs-md-tab-icon-left-transform-x-active: -0.2rem !default;
|
||||
|
||||
/// @prop - Transform y for the active tab button icon when the layout is icon-left
|
||||
$tabs-md-tab-icon-left-transform-y-active: 0 !default;
|
||||
|
||||
/// @prop - Transform z for the active tab button icon when the layout is icon-left
|
||||
$tabs-md-tab-icon-left-transform-z-active: 0 !default;
|
||||
|
||||
/// @prop - Text transition for the tab button icon
|
||||
$tabs-md-tab-icon-transition: transform .3s ease-in-out !default;
|
||||
|
||||
/// @prop - Size of the tab button icon
|
||||
$tabs-md-tab-icon-size: 2.4rem !default;
|
||||
|
||||
.tabbar-md {
|
||||
height: $tabs-md-tab-height;
|
||||
|
||||
|
||||
106
packages/core/src/components/tabs/tabs.md.vars.scss
Normal file
106
packages/core/src/components/tabs/tabs.md.vars.scss
Normal file
@ -0,0 +1,106 @@
|
||||
@import "../../themes/ionic.globals.md";
|
||||
|
||||
// Material Design Tabs
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Padding top on the tab button
|
||||
$tabs-md-tab-padding-top: .8rem !default;
|
||||
|
||||
/// @prop - Padding end on the tab button
|
||||
$tabs-md-tab-padding-end: 1.2rem !default;
|
||||
|
||||
/// @prop - Padding bottom on the tab button
|
||||
$tabs-md-tab-padding-bottom: 1rem !default;
|
||||
|
||||
/// @prop - Padding start on the tab button
|
||||
$tabs-md-tab-padding-start: 1.2rem, !default;
|
||||
|
||||
/// @prop - Minimum height of the tab button
|
||||
$tabs-md-tab-height: 5.6rem !default;
|
||||
|
||||
/// @prop - Font size of the inactive tab button text
|
||||
$tabs-md-tab-font-size: 1.2rem !default;
|
||||
|
||||
/// @prop - Font weight of the tab button text
|
||||
$tabs-md-tab-font-weight: normal !default;
|
||||
|
||||
/// @prop - Opacity of the inactive tab button
|
||||
$tabs-md-tab-opacity: .7 !default;
|
||||
|
||||
/// @prop - Text color of the inactive tab button
|
||||
$tabs-md-tab-text-color: rgba($tabs-md-tab-color-inactive, $tabs-md-tab-opacity) !default;
|
||||
|
||||
/// @prop - Text color of the active tab button
|
||||
$tabs-md-tab-text-color-active: $tabs-md-tab-color-active !default;
|
||||
|
||||
/// @prop - Icon color of the inactive tab button
|
||||
$tabs-md-tab-icon-color: rgba($tabs-md-tab-color-inactive, $tabs-md-tab-opacity) !default;
|
||||
|
||||
/// @prop - Icon color of the active tab button
|
||||
$tabs-md-tab-icon-color-active: $tabs-md-tab-color-active !default;
|
||||
|
||||
/// @prop - Font size of the active tab button text
|
||||
$tabs-md-tab-font-size-active: 1.4rem !default;
|
||||
|
||||
/// @prop - Margin top on the tab button text
|
||||
$tabs-md-tab-text-margin-top: 0 !default;
|
||||
|
||||
/// @prop - Margin end on the tab button text
|
||||
$tabs-md-tab-text-margin-end: $tabs-md-tab-text-margin-top !default;
|
||||
|
||||
/// @prop - Margin bottom on the tab button text
|
||||
$tabs-md-tab-text-margin-bottom: $tabs-md-tab-text-margin-top !default;
|
||||
|
||||
/// @prop - Margin start on the tab button text
|
||||
$tabs-md-tab-text-margin-start: $tabs-md-tab-text-margin-end !default;
|
||||
|
||||
/// @prop - Capitalization of the tab button text
|
||||
$tabs-md-tab-text-capitalization: none !default;
|
||||
|
||||
/// @prop - Transform for the active tab button text
|
||||
$tabs-md-tab-text-transform-active: scale3d($tabs-md-tab-font-size-active / $tabs-md-tab-font-size, $tabs-md-tab-font-size-active / $tabs-md-tab-font-size, 1) !default;
|
||||
|
||||
/// @prop - Text transition for the tab button text
|
||||
$tabs-md-tab-text-transition: transform .3s ease-in-out !default;
|
||||
|
||||
/// @prop - Transform x for the active tab button icon when the layout is icon-top, icon-only, or title-only
|
||||
$tabs-md-tab-icon-transform-x-active: 0 !default;
|
||||
|
||||
/// @prop - Transform y for the active tab button icon when the layout is icon-top, icon-only, or title-only
|
||||
$tabs-md-tab-icon-transform-y-active: -2px !default;
|
||||
|
||||
/// @prop - Transform z for the active tab button icon when the layout is icon-top, icon-only, or title-only
|
||||
$tabs-md-tab-icon-transform-z-active: 0 !default;
|
||||
|
||||
/// @prop - Transform x for the active tab button icon when the layout is icon-right
|
||||
$tabs-md-tab-icon-right-transform-x-active: 2px !default;
|
||||
|
||||
/// @prop - Transform y for the active tab button icon when the layout is icon-right
|
||||
$tabs-md-tab-icon-right-transform-y-active: 0 !default;
|
||||
|
||||
/// @prop - Transform z for the active tab button icon when the layout is icon-right
|
||||
$tabs-md-tab-icon-right-transform-z-active: 0 !default;
|
||||
|
||||
/// @prop - Transform x for the active tab button icon when the layout is icon-bottom
|
||||
$tabs-md-tab-icon-bottom-transform-x-active: 0 !default;
|
||||
|
||||
/// @prop - Transform y for the active tab button icon when the layout is icon-bottom
|
||||
$tabs-md-tab-icon-bottom-transform-y-active: 0.2rem !default;
|
||||
|
||||
/// @prop - Transform z for the active tab button icon when the layout is icon-bottom
|
||||
$tabs-md-tab-icon-bottom-transform-z-active: 0 !default;
|
||||
|
||||
/// @prop - Transform x for the active tab button icon when the layout is icon-left
|
||||
$tabs-md-tab-icon-left-transform-x-active: -0.2rem !default;
|
||||
|
||||
/// @prop - Transform y for the active tab button icon when the layout is icon-left
|
||||
$tabs-md-tab-icon-left-transform-y-active: 0 !default;
|
||||
|
||||
/// @prop - Transform z for the active tab button icon when the layout is icon-left
|
||||
$tabs-md-tab-icon-left-transform-z-active: 0 !default;
|
||||
|
||||
/// @prop - Text transition for the tab button icon
|
||||
$tabs-md-tab-icon-transition: transform .3s ease-in-out !default;
|
||||
|
||||
/// @prop - Size of the tab button icon
|
||||
$tabs-md-tab-icon-size: 2.4rem !default;
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Tab - Basic</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
|
||||
<script src="/dist/ionic.js"></script>
|
||||
<script type="text/javascript">
|
||||
window.Ionic.config = {useRouter: true};
|
||||
|
||||
@ -42,9 +42,12 @@ $toolbar-ios-translucent-opacity: .88 !default;
|
||||
|
||||
.toolbar-ios {
|
||||
@include padding($toolbar-ios-padding);
|
||||
@include safe-area-padding($toolbar-ios-padding);
|
||||
|
||||
min-height: $toolbar-ios-height;
|
||||
|
||||
@media screen and (orientation: landscape) {
|
||||
@include safe-area-padding-horizontal($toolbar-ios-padding);
|
||||
}
|
||||
}
|
||||
|
||||
.header-ios {
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import { isCordova } from './platform-utils';
|
||||
|
||||
const IPAD = 'ipad';
|
||||
const IPHONE = 'iphone';
|
||||
@ -23,6 +24,7 @@ export const PLATFORM_CONFIGS: PlatformConfig[] = [
|
||||
settings: {
|
||||
mode: IOS,
|
||||
tabsHighlight: false,
|
||||
statusbarPadding: isCordova,
|
||||
},
|
||||
isMatch: (url, userAgent) => isPlatformMatch(url, userAgent, IOS, [IPHONE, IPAD, 'ipod'], WINDOWS_PHONE)
|
||||
},
|
||||
|
||||
4
packages/core/src/global/platform-utils.ts
Normal file
4
packages/core/src/global/platform-utils.ts
Normal file
@ -0,0 +1,4 @@
|
||||
|
||||
export function isCordova(): boolean {
|
||||
return !!(window['cordova'] || window['PhoneGap'] || window['phonegap']);
|
||||
}
|
||||
@ -199,15 +199,6 @@
|
||||
@import
|
||||
"../components/virtual-scroll/virtual-scroll";
|
||||
|
||||
|
||||
// Platforms
|
||||
// --------------------------------------------------
|
||||
@import
|
||||
"../platform/cordova",
|
||||
"../platform/cordova.ios",
|
||||
"../platform/cordova.md";
|
||||
|
||||
|
||||
// Fonts
|
||||
// --------------------------------------------------
|
||||
@import
|
||||
|
||||
@ -549,9 +549,15 @@
|
||||
// @param {string} $start
|
||||
// ----------------------------------------------------------
|
||||
@mixin safe-area-padding($top, $end: $top, $bottom: $top, $start: $end) {
|
||||
// two groups for older constant and newer env
|
||||
$safe-area-top: null;
|
||||
$safe-area-start: null;
|
||||
$safe-area-bottom: null;
|
||||
$safe-area-end: null;
|
||||
|
||||
$safe-area-top-env: null;
|
||||
$safe-area-start-env: null;
|
||||
$safe-area-bottom-env: null;
|
||||
$safe-area-end-env: null;
|
||||
|
||||
@if ($start) {
|
||||
@ -559,18 +565,22 @@
|
||||
$safe-area-start-env: calc(env(safe-area-inset-left) + #{$start});
|
||||
}
|
||||
@if ($end) {
|
||||
$safe-area-end-env: calc(constant(safe-area-inset-right) + #{$end});
|
||||
$safe-area-end: calc(constant(safe-area-inset-right) + #{$end});
|
||||
$safe-area-end-env: calc(env(safe-area-inset-right) + #{$end});
|
||||
}
|
||||
|
||||
@include padding($top, $end, $bottom, $start);
|
||||
|
||||
@media screen and (orientation: landscape) {
|
||||
@include padding($top, $safe-area-end, $bottom, $safe-area-start);
|
||||
@include padding($top, $safe-area-end-env, $bottom, $safe-area-start-env);
|
||||
@if ($top){
|
||||
$safe-area-top: calc(constant(safe-area-inset-top) + #{$top});
|
||||
$safe-area-top-env: calc(env(safe-area-inset-top) + #{$top});
|
||||
}
|
||||
@if ($bottom){
|
||||
$safe-area-bottom: calc(constant(safe-area-inset-bottom) + #{$bottom});
|
||||
$safe-area-bottom-env: calc(env(safe-area-inset-bottom) + #{$bottom});
|
||||
}
|
||||
}
|
||||
|
||||
@include padding($safe-area-top, $safe-area-end, $safe-area-bottom, $safe-area-start);
|
||||
@include padding($safe-area-top-env, $safe-area-end-env, $safe-area-bottom-env, $safe-area-start-env);
|
||||
|
||||
}
|
||||
|
||||
// Add safe area padding horizontal
|
||||
// @param {string} $start
|
||||
@ -591,12 +601,8 @@
|
||||
$safe-area-start-env: calc(env(safe-area-inset-left) + #{$start});
|
||||
}
|
||||
|
||||
@include padding-horizontal($start, $end);
|
||||
|
||||
@media screen and (orientation: landscape) {
|
||||
@include padding-horizontal($safe-area-start, $safe-area-end);
|
||||
@include padding-horizontal($safe-area-start-env, $safe-area-end-env);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -647,3 +653,91 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Add generic safe area sizing
|
||||
// @param {string} $prop - css property you want to set
|
||||
// @param {string} $safe-area-position - short safe-area-inset value you want to modify
|
||||
// @param {string} $value - additional value you want to modify, if none, pass 0px
|
||||
// ----------------------------------------------------------
|
||||
@mixin safe-area-sizing($prop, $safe-area-position, $value){
|
||||
#{$prop}: calc(#{$value} + constant(#{$safe-area-position}));
|
||||
#{$prop}: calc(#{$value} + env(#{$safe-area-position}));
|
||||
}
|
||||
|
||||
|
||||
// Add safe area padding and sizing to the footer area
|
||||
// @param {string} $toolbar-height - height of the toolbar
|
||||
// @param {string} $toolbar-padding - padding of the toolbar
|
||||
// @param {string} $tabs-height - height of the tabs
|
||||
// ----------------------------------------------------------
|
||||
@mixin footer-safe-area($toolbar-height, $toolbar-padding, $tabs-height) {
|
||||
ion-tabs ion-tabbar:not(.placement-top) {
|
||||
@include safe-area-padding(null, null, 0px, null);
|
||||
@include safe-area-sizing(height, safe-area-inset-bottom, $tabs-height)
|
||||
}
|
||||
|
||||
ion-footer .toolbar:last-child {
|
||||
@include safe-area-padding(null, null, $toolbar-padding, null);
|
||||
@include safe-area-sizing(min-height, safe-area-inset-bottom, $toolbar-height)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Add padding to the toolbar to account for the statusbar
|
||||
// @param {string} $toolbar-height - height of the toolbar
|
||||
// @param {string} $toolbar-padding - padding of the toolbar
|
||||
// @param {string} $content-padding - padding of the content
|
||||
// @param {string} $statusbar-padding - padding of the statusbar
|
||||
// --------------------------------------------------------------------------------
|
||||
@mixin toolbar-statusbar-padding($toolbar-height, $toolbar-padding, $content-padding, $statusbar-padding) {
|
||||
|
||||
> .toolbar.statusbar-padding:first-child {
|
||||
@include padding(calc(#{$statusbar-padding} + #{$toolbar-padding}), null, null, null);
|
||||
@include safe-area-padding($toolbar-padding, null, null, null);
|
||||
|
||||
min-height: calc(#{$toolbar-height} + #{$statusbar-padding});
|
||||
@include safe-area-sizing(min-height, safe-area-inset-top, $toolbar-height);
|
||||
}
|
||||
|
||||
> ion-content.statusbar-padding:first-child .scroll-content {
|
||||
@include padding($statusbar-padding, null, null, null);
|
||||
@include safe-area-padding(0px, null, null, null);
|
||||
}
|
||||
|
||||
> ion-content.statusbar-padding:first-child[padding] .scroll-content,
|
||||
> ion-content.statusbar-padding:first-child[padding-top] .scroll-content {
|
||||
@include padding(calc(#{$content-padding} + #{$statusbar-padding}), null, null, null);
|
||||
@include safe-area-padding(0px, null, null, null);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Add padding to the toolbar to account for the statusbar
|
||||
// @param {string} $toolbar-height - height of the toolbar
|
||||
// @param {string} $toolbar-padding - padding of the toolbar
|
||||
// @param {string} $content-padding - padding of the content
|
||||
// @param {string} $statusbar-padding - padding of the statusbar
|
||||
//
|
||||
// iOS is the only mode that uses this mixin and it should be removed with #5036
|
||||
// --------------------------------------------------------------------------------
|
||||
@mixin toolbar-title-statusbar-padding($toolbar-height, $toolbar-padding, $content-padding, $statusbar-padding) {
|
||||
|
||||
> .toolbar.statusbar-padding:first-child ion-segment,
|
||||
> .toolbar.statusbar-padding:first-child ion-title {
|
||||
@include padding($statusbar-padding, null, null, null);
|
||||
@include safe-area-padding(0px, null, null, null);
|
||||
|
||||
height: calc(#{$toolbar-height} + #{$statusbar-padding});
|
||||
@include safe-area-sizing(height, safe-area-inset-top, $toolbar-height)
|
||||
|
||||
min-height: calc(#{$toolbar-height} + #{$statusbar-padding});
|
||||
@include safe-area-sizing(min-height, safe-area-inset-top, $toolbar-height)
|
||||
}
|
||||
|
||||
> ion-content.statusbar-padding:first-child ion-scroll {
|
||||
@include padding($statusbar-padding, null, null, null);
|
||||
@include safe-area-padding(0px, null, null, null);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user