mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 11:41:20 +08:00
fix(toolbar): get translucency working with header, footer and toolbar
This commit is contained in:
Brandy Carney
16
core/src/components.d.ts
vendored
16
core/src/components.d.ts
vendored
@ -2180,6 +2180,10 @@ declare global {
|
||||
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
|
||||
*/
|
||||
'mode': Mode;
|
||||
/**
|
||||
* If true, the footer will be translucent. Note: In order to scroll content behind the footer, the `fullscreen` attribute needs to be set on the content. Defaults to `false`.
|
||||
*/
|
||||
'translucent': boolean;
|
||||
}
|
||||
}
|
||||
|
||||
@ -2206,6 +2210,10 @@ declare global {
|
||||
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
|
||||
*/
|
||||
'mode'?: Mode;
|
||||
/**
|
||||
* If true, the footer will be translucent. Note: In order to scroll content behind the footer, the `fullscreen` attribute needs to be set on the content. Defaults to `false`.
|
||||
*/
|
||||
'translucent'?: boolean;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -2452,6 +2460,10 @@ declare global {
|
||||
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
|
||||
*/
|
||||
'mode': Mode;
|
||||
/**
|
||||
* If true, the header will be translucent. Note: In order to scroll content behind the header, the `fullscreen` attribute needs to be set on the content. Defaults to `false`.
|
||||
*/
|
||||
'translucent': boolean;
|
||||
}
|
||||
}
|
||||
|
||||
@ -2478,6 +2490,10 @@ declare global {
|
||||
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
|
||||
*/
|
||||
'mode'?: Mode;
|
||||
/**
|
||||
* If true, the header will be translucent. Note: In order to scroll content behind the header, the `fullscreen` attribute needs to be set on the content. Defaults to `false`.
|
||||
*/
|
||||
'translucent'?: boolean;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
@import "./footer";
|
||||
@import "./footer.ios.vars";
|
||||
|
||||
// iOS Borders
|
||||
// iOS Footer
|
||||
// --------------------------------------------------
|
||||
|
||||
.footer-ios ion-toolbar:first-child {
|
||||
@ -10,3 +11,13 @@
|
||||
.footer-ios[no-border] ion-toolbar:first-child {
|
||||
--border-width: 0;
|
||||
}
|
||||
|
||||
.footer-translucent-ios {
|
||||
backdrop-filter: $footer-ios-translucent-filter;
|
||||
}
|
||||
|
||||
.footer-translucent-ios ion-toolbar {
|
||||
--border-color: transparent;
|
||||
--opacity: 0.8;
|
||||
--backdrop-filter: #{$footer-ios-translucent-filter};
|
||||
}
|
||||
|
||||
7
core/src/components/footer/footer.ios.vars.scss
Normal file
7
core/src/components/footer/footer.ios.vars.scss
Normal file
@ -0,0 +1,7 @@
|
||||
@import "../../themes/ionic.globals.ios";
|
||||
|
||||
// iOS Footer
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Filter of the translucent footer
|
||||
$footer-ios-translucent-filter: saturate(180%) blur(20px) !default;
|
||||
@ -1,5 +1,8 @@
|
||||
@import "./footer";
|
||||
|
||||
// Material Design Footer
|
||||
// --------------------------------------------------
|
||||
|
||||
.footer-md::before {
|
||||
// using datauri png background image for improved scroll performance
|
||||
// rather than using `box-shadow: 0 2px 5px rgba(0,0,0,0.26);`
|
||||
|
||||
@ -17,9 +17,23 @@ export class Footer {
|
||||
*/
|
||||
@Prop() mode!: Mode;
|
||||
|
||||
/**
|
||||
* If true, the footer will be translucent.
|
||||
* Note: In order to scroll content behind the footer, the `fullscreen`
|
||||
* attribute needs to be set on the content.
|
||||
* Defaults to `false`.
|
||||
*/
|
||||
@Prop() translucent = false;
|
||||
|
||||
hostData() {
|
||||
const themedClasses = createThemedClasses(this.mode, 'footer');
|
||||
const translucentClasses = this.translucent ? createThemedClasses(this.mode, 'footer-translucent') : null;
|
||||
|
||||
return {
|
||||
class: createThemedClasses(this.mode, 'footer')
|
||||
class: {
|
||||
...themedClasses,
|
||||
...translucentClasses
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
166
core/src/components/footer/test/translucent/index.html
Normal file
166
core/src/components/footer/test/translucent/index.html
Normal file
@ -0,0 +1,166 @@
|
||||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Header - Translucent</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<script src="/dist/ionic.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="/css/ionic.min.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
<ion-content fullscreen>
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
<ion-col size="6">
|
||||
<f class="red"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="green"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="blue"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="yellow"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="pink"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="purple"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="black"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="orange"></f>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae lobortis felis, eu sodales enim. Nam risus nibh, placerat
|
||||
at rutrum ac, vehicula vel velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis elementum
|
||||
ligula, ac aliquet nulla. Mauris non placerat mauris. Aenean dignissim lacinia porttitor. Praesent fringilla at est
|
||||
et ullamcorper. In ac ante ac massa porta venenatis ut id nibh. Fusce felis neque, aliquet in velit vitae, venenatis
|
||||
euismod libero. Donec vulputate, urna sed sagittis tempor, mi arcu tristique lacus, eget fringilla urna sem eget
|
||||
felis. Fusce dignissim lacus a scelerisque vehicula. Nulla nec enim nunc. Quisque nec dui eu nibh pulvinar bibendum
|
||||
quis ut nunc. Duis ex odio, sollicitudin ac mollis nec, fringilla non lacus. Maecenas sed tincidunt urna. Nunc feugiat
|
||||
maximus venenatis. Donec porttitor, felis eget porttitor tempor, quam nulla dapibus nisl, sit amet posuere sapien
|
||||
sapien malesuada tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
|
||||
Quisque luctus, sapien nec tincidunt efficitur, nibh turpis faucibus felis, in sodales massa augue nec erat. Morbi
|
||||
sollicitudin nisi ex, et gravida nisi euismod eu. Suspendisse hendrerit dapibus orci, non viverra neque vestibulum
|
||||
id. Quisque vitae interdum ligula, quis consectetur nibh. Phasellus in mi at erat ultrices semper. Fusce sollicitudin
|
||||
at dolor ac lobortis. Morbi sit amet sem quis nulla pellentesque imperdiet. Nullam eu sem a enim maximus eleifend
|
||||
non vulputate leo. Proin quis congue lacus. Pellentesque placerat, quam at tempus pulvinar, nisl ligula tempor risus,
|
||||
quis pretium arcu odio et nulla. Nullam mollis consequat pharetra. Phasellus dictum velit sed purus mattis maximus.
|
||||
In molestie eget massa ut dignissim. In a interdum elit. In finibus nibh a mauris lobortis aliquet. Proin rutrum
|
||||
varius consequat. In mollis dapibus nisl, eu finibus urna viverra ac. Quisque scelerisque nisl eu suscipit consectetur.
|
||||
</p>
|
||||
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
<ion-col size="6">
|
||||
<f class="red"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="green"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="blue"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="yellow"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="pink"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="purple"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="black"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="orange"></f>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
</ion-content>
|
||||
|
||||
<ion-footer translucent>
|
||||
<ion-toolbar>
|
||||
<ion-title>Footer - Translucent</ion-title>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar color="primary">
|
||||
<ion-title>Primary - Translucent</ion-title>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar color="secondary">
|
||||
<ion-title>Secondary - Translucent</ion-title>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar color="tertiary">
|
||||
<ion-title>Tertiary - Translucent</ion-title>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar color="success">
|
||||
<ion-title>Success - Translucent</ion-title>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar color="warning">
|
||||
<ion-title>Warning - Translucent</ion-title>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar color="danger">
|
||||
<ion-title>Danger - Translucent</ion-title>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar color="light">
|
||||
<ion-title>Light - Translucent</ion-title>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar color="medium">
|
||||
<ion-title>Medium - Translucent</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-footer>
|
||||
</ion-app>
|
||||
|
||||
<style>
|
||||
f {
|
||||
display: block;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.red {
|
||||
background-color: #ea445a;
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: #76d672;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #3478f6;
|
||||
}
|
||||
|
||||
.yellow {
|
||||
background-color: #ffff80;
|
||||
}
|
||||
|
||||
.pink {
|
||||
background-color: #ff6b86;
|
||||
}
|
||||
|
||||
.purple {
|
||||
background-color: #7e34f6;
|
||||
}
|
||||
|
||||
.black {
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.orange {
|
||||
background-color: #f69234;
|
||||
}
|
||||
|
||||
</style>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,6 +1,7 @@
|
||||
@import "./header";
|
||||
@import "./header.ios.vars";
|
||||
|
||||
// iOS Borders
|
||||
// iOS Header
|
||||
// --------------------------------------------------
|
||||
|
||||
.header-ios ion-toolbar:last-child {
|
||||
@ -10,3 +11,13 @@
|
||||
.header-ios[no-border] ion-toolbar:last-child {
|
||||
--border-width: 0;
|
||||
}
|
||||
|
||||
.header-translucent-ios {
|
||||
backdrop-filter: $header-ios-translucent-filter;
|
||||
}
|
||||
|
||||
.header-translucent-ios ion-toolbar {
|
||||
--border-color: transparent;
|
||||
--opacity: 0.8;
|
||||
--backdrop-filter: #{$header-ios-translucent-filter};
|
||||
}
|
||||
|
||||
7
core/src/components/header/header.ios.vars.scss
Normal file
7
core/src/components/header/header.ios.vars.scss
Normal file
@ -0,0 +1,7 @@
|
||||
@import "../../themes/ionic.globals.ios";
|
||||
|
||||
// iOS Header
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Filter of the translucent header
|
||||
$header-ios-translucent-filter: saturate(180%) blur(20px) !default;
|
||||
@ -1,6 +1,6 @@
|
||||
@import "./header";
|
||||
|
||||
// Material Design Header / Footer / Tabs Box Shadow
|
||||
// Material Design Header
|
||||
// --------------------------------------------------
|
||||
|
||||
.header-md::after {
|
||||
|
||||
@ -17,9 +17,23 @@ export class Header {
|
||||
*/
|
||||
@Prop() mode!: Mode;
|
||||
|
||||
/**
|
||||
* If true, the header will be translucent.
|
||||
* Note: In order to scroll content behind the header, the `fullscreen`
|
||||
* attribute needs to be set on the content.
|
||||
* Defaults to `false`.
|
||||
*/
|
||||
@Prop() translucent = false;
|
||||
|
||||
hostData() {
|
||||
const themedClasses = createThemedClasses(this.mode, 'header');
|
||||
const translucentClasses = this.translucent ? createThemedClasses(this.mode, 'header-translucent') : null;
|
||||
|
||||
return {
|
||||
class: createThemedClasses(this.mode, 'header')
|
||||
class: {
|
||||
...themedClasses,
|
||||
...translucentClasses
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
165
core/src/components/header/test/translucent/index.html
Normal file
165
core/src/components/header/test/translucent/index.html
Normal file
@ -0,0 +1,165 @@
|
||||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Header - Translucent</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<script src="/dist/ionic.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="/css/ionic.min.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
<ion-header translucent>
|
||||
<ion-toolbar>
|
||||
<ion-title>Header - Translucent</ion-title>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar color="primary">
|
||||
<ion-title>Primary - Translucent</ion-title>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar color="secondary">
|
||||
<ion-title>Secondary - Translucent</ion-title>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar color="tertiary">
|
||||
<ion-title>Tertiary - Translucent</ion-title>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar color="success">
|
||||
<ion-title>Success - Translucent</ion-title>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar color="warning">
|
||||
<ion-title>Warning - Translucent</ion-title>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar color="danger">
|
||||
<ion-title>Danger - Translucent</ion-title>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar color="light">
|
||||
<ion-title>Light - Translucent</ion-title>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar color="medium">
|
||||
<ion-title>Medium - Translucent</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content fullscreen>
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
<ion-col size="6">
|
||||
<f class="red"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="green"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="blue"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="yellow"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="pink"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="purple"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="black"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="orange"></f>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae lobortis felis, eu sodales enim. Nam risus nibh, placerat
|
||||
at rutrum ac, vehicula vel velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis elementum
|
||||
ligula, ac aliquet nulla. Mauris non placerat mauris. Aenean dignissim lacinia porttitor. Praesent fringilla at est
|
||||
et ullamcorper. In ac ante ac massa porta venenatis ut id nibh. Fusce felis neque, aliquet in velit vitae, venenatis
|
||||
euismod libero. Donec vulputate, urna sed sagittis tempor, mi arcu tristique lacus, eget fringilla urna sem eget
|
||||
felis. Fusce dignissim lacus a scelerisque vehicula. Nulla nec enim nunc. Quisque nec dui eu nibh pulvinar bibendum
|
||||
quis ut nunc. Duis ex odio, sollicitudin ac mollis nec, fringilla non lacus. Maecenas sed tincidunt urna. Nunc feugiat
|
||||
maximus venenatis. Donec porttitor, felis eget porttitor tempor, quam nulla dapibus nisl, sit amet posuere sapien
|
||||
sapien malesuada tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
|
||||
Quisque luctus, sapien nec tincidunt efficitur, nibh turpis faucibus felis, in sodales massa augue nec erat. Morbi
|
||||
sollicitudin nisi ex, et gravida nisi euismod eu. Suspendisse hendrerit dapibus orci, non viverra neque vestibulum
|
||||
id. Quisque vitae interdum ligula, quis consectetur nibh. Phasellus in mi at erat ultrices semper. Fusce sollicitudin
|
||||
at dolor ac lobortis. Morbi sit amet sem quis nulla pellentesque imperdiet. Nullam eu sem a enim maximus eleifend
|
||||
non vulputate leo. Proin quis congue lacus. Pellentesque placerat, quam at tempus pulvinar, nisl ligula tempor risus,
|
||||
quis pretium arcu odio et nulla. Nullam mollis consequat pharetra. Phasellus dictum velit sed purus mattis maximus.
|
||||
In molestie eget massa ut dignissim. In a interdum elit. In finibus nibh a mauris lobortis aliquet. Proin rutrum
|
||||
varius consequat. In mollis dapibus nisl, eu finibus urna viverra ac. Quisque scelerisque nisl eu suscipit consectetur.
|
||||
</p>
|
||||
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
<ion-col size="6">
|
||||
<f class="red"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="green"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="blue"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="yellow"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="pink"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="purple"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="black"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="orange"></f>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
</ion-content>
|
||||
</ion-app>
|
||||
|
||||
<style>
|
||||
f {
|
||||
display: block;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.red {
|
||||
background-color: #ea445a;
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: #76d672;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #3478f6;
|
||||
}
|
||||
|
||||
.yellow {
|
||||
background-color: #ffff80;
|
||||
}
|
||||
|
||||
.pink {
|
||||
background-color: #ff6b86;
|
||||
}
|
||||
|
||||
.purple {
|
||||
background-color: #7e34f6;
|
||||
}
|
||||
|
||||
.black {
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.orange {
|
||||
background-color: #f69234;
|
||||
}
|
||||
|
||||
</style>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -12,86 +12,102 @@
|
||||
<body>
|
||||
<ion-app>
|
||||
|
||||
<ion-header translucent>
|
||||
<ion-toolbar>
|
||||
<ion-header>
|
||||
<ion-toolbar translucent>
|
||||
<ion-title>Toolbar - Translucent</ion-title>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar color="primary">
|
||||
<ion-title>Primary - Translucent</ion-title>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar color="secondary">
|
||||
<ion-title>Secondary - Translucent</ion-title>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar color="tertiary">
|
||||
<ion-title>Tertiary - Translucent</ion-title>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar color="success">
|
||||
<ion-title>Success - Translucent</ion-title>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar color="warning">
|
||||
<ion-title>Warning - Translucent</ion-title>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar color="danger">
|
||||
<ion-title>Danger - Translucent</ion-title>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar color="light">
|
||||
<ion-title>Light - Translucent</ion-title>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar color="medium">
|
||||
<ion-title>Medium - Translucent</ion-title>
|
||||
</ion-toolbar>
|
||||
<ion-content fullscreen>
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
<ion-col size="6"><f class="red"></f></ion-col>
|
||||
<ion-col size="6"><f class="green"></f></ion-col>
|
||||
<ion-col size="6"><f class="blue"></f></ion-col>
|
||||
<ion-col size="6"><f class="yellow"></f></ion-col>
|
||||
<ion-col size="6"><f class="pink"></f></ion-col>
|
||||
<ion-col size="6"><f class="purple"></f></ion-col>
|
||||
<ion-col size="6"><f class="black"></f></ion-col>
|
||||
<ion-col size="6"><f class="orange"></f></ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
</ion-header>
|
||||
<ion-content fullscreen>
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
<ion-col size="6">
|
||||
<f class="red"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="green"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="blue"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="yellow"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="pink"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="purple"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="black"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="orange"></f>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae lobortis felis, eu sodales enim. Nam risus nibh, placerat at rutrum ac, vehicula vel velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis elementum ligula, ac aliquet nulla. Mauris non placerat mauris. Aenean dignissim lacinia porttitor. Praesent fringilla at est et ullamcorper. In ac ante ac massa porta venenatis ut id nibh. Fusce felis neque, aliquet in velit vitae, venenatis euismod libero. Donec vulputate, urna sed sagittis tempor, mi arcu tristique lacus, eget fringilla urna sem eget felis. Fusce dignissim lacus a scelerisque vehicula. Nulla nec enim nunc.
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae lobortis felis, eu sodales enim. Nam risus nibh, placerat
|
||||
at rutrum ac, vehicula vel velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis elementum
|
||||
ligula, ac aliquet nulla. Mauris non placerat mauris. Aenean dignissim lacinia porttitor. Praesent fringilla at est
|
||||
et ullamcorper. In ac ante ac massa porta venenatis ut id nibh. Fusce felis neque, aliquet in velit vitae, venenatis
|
||||
euismod libero. Donec vulputate, urna sed sagittis tempor, mi arcu tristique lacus, eget fringilla urna sem eget
|
||||
felis. Fusce dignissim lacus a scelerisque vehicula. Nulla nec enim nunc. Quisque nec dui eu nibh pulvinar bibendum
|
||||
quis ut nunc. Duis ex odio, sollicitudin ac mollis nec, fringilla non lacus. Maecenas sed tincidunt urna. Nunc feugiat
|
||||
maximus venenatis. Donec porttitor, felis eget porttitor tempor, quam nulla dapibus nisl, sit amet posuere sapien
|
||||
sapien malesuada tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
|
||||
Quisque luctus, sapien nec tincidunt efficitur, nibh turpis faucibus felis, in sodales massa augue nec erat. Morbi
|
||||
sollicitudin nisi ex, et gravida nisi euismod eu. Suspendisse hendrerit dapibus orci, non viverra neque vestibulum
|
||||
id. Quisque vitae interdum ligula, quis consectetur nibh. Phasellus in mi at erat ultrices semper. Fusce sollicitudin
|
||||
at dolor ac lobortis. Morbi sit amet sem quis nulla pellentesque imperdiet. Nullam eu sem a enim maximus eleifend
|
||||
non vulputate leo. Proin quis congue lacus. Pellentesque placerat, quam at tempus pulvinar, nisl ligula tempor risus,
|
||||
quis pretium arcu odio et nulla. Nullam mollis consequat pharetra. Phasellus dictum velit sed purus mattis maximus.
|
||||
In molestie eget massa ut dignissim. In a interdum elit. In finibus nibh a mauris lobortis aliquet. Proin rutrum
|
||||
varius consequat. In mollis dapibus nisl, eu finibus urna viverra ac. Quisque scelerisque nisl eu suscipit consectetur.
|
||||
</p>
|
||||
|
||||
Quisque nec dui eu nibh pulvinar bibendum quis ut nunc. Duis ex odio, sollicitudin ac mollis nec, fringilla non lacus. Maecenas sed tincidunt urna. Nunc feugiat maximus venenatis. Donec porttitor, felis eget porttitor tempor, quam nulla dapibus nisl, sit amet posuere sapien sapien malesuada tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque luctus, sapien nec tincidunt efficitur, nibh turpis faucibus felis, in sodales massa augue nec erat. Morbi sollicitudin nisi ex, et gravida nisi euismod eu. Suspendisse hendrerit dapibus orci, non viverra neque vestibulum id. Quisque vitae interdum ligula, quis consectetur nibh.
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
<ion-col size="6">
|
||||
<f class="red"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="green"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="blue"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="yellow"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="pink"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="purple"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="black"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="orange"></f>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
</ion-content>
|
||||
|
||||
Phasellus in mi at erat ultrices semper. Fusce sollicitudin at dolor ac lobortis. Morbi sit amet sem quis nulla pellentesque imperdiet. Nullam eu sem a enim maximus eleifend non vulputate leo. Proin quis congue lacus. Pellentesque placerat, quam at tempus pulvinar, nisl ligula tempor risus, quis pretium arcu odio et nulla. Nullam mollis consequat pharetra. Phasellus dictum velit sed purus mattis maximus. In molestie eget massa ut dignissim. In a interdum elit. In finibus nibh a mauris lobortis aliquet. Proin rutrum varius consequat. In mollis dapibus nisl, eu finibus urna viverra ac. Quisque scelerisque nisl eu suscipit consectetur.
|
||||
</p>
|
||||
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
<ion-col size="6"><f class="red"></f></ion-col>
|
||||
<ion-col size="6"><f class="green"></f></ion-col>
|
||||
<ion-col size="6"><f class="blue"></f></ion-col>
|
||||
<ion-col size="6"><f class="yellow"></f></ion-col>
|
||||
<ion-col size="6"><f class="pink"></f></ion-col>
|
||||
<ion-col size="6"><f class="purple"></f></ion-col>
|
||||
<ion-col size="6"><f class="black"></f></ion-col>
|
||||
<ion-col size="6"><f class="orange"></f></ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
</ion-content>
|
||||
|
||||
<ion-footer translucent>
|
||||
<ion-toolbar color="danger">
|
||||
<ion-title>Footer Toolbar - Danger</ion-title>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar color="primary">
|
||||
<ion-title>Footer Toolbar - Primary</ion-title>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar>
|
||||
<ion-title>Footer Toolbar - Translucent</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-footer>
|
||||
<ion-footer>
|
||||
<ion-toolbar translucent>
|
||||
<ion-title>Toolbar - Translucent</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-footer>
|
||||
|
||||
</ion-app>
|
||||
|
||||
<style>
|
||||
f {
|
||||
display: block;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
|
||||
@ -5,19 +5,18 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
:host {
|
||||
@include padding($toolbar-ios-padding);
|
||||
|
||||
min-height: $toolbar-ios-height;
|
||||
|
||||
font-family: $toolbar-ios-font-family;
|
||||
|
||||
// default color / background
|
||||
--ion-color-base: #{$toolbar-ios-background-color};
|
||||
--ion-color-contrast: #{$toolbar-ios-text-color};
|
||||
|
||||
--border-color: #{$toolbar-ios-border-color};
|
||||
--translucent-filter: #{$toolbar-ios-translucent-filter};
|
||||
--translucent-background: #{$toolbar-ios-translucent-background-color};
|
||||
|
||||
@include padding($toolbar-ios-padding);
|
||||
|
||||
min-height: $toolbar-ios-height;
|
||||
|
||||
font-family: $toolbar-ios-font-family;
|
||||
}
|
||||
|
||||
// iOS Toolbar Content
|
||||
|
||||
@ -4,6 +4,11 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
:host {
|
||||
--border-width: 0;
|
||||
--border-style: solid;
|
||||
--background: #{current-color(base)};
|
||||
--opacity: 1;
|
||||
|
||||
@include font-smoothing();
|
||||
|
||||
box-sizing: border-box;
|
||||
@ -23,9 +28,7 @@
|
||||
|
||||
contain: content;
|
||||
|
||||
--border-width: 0;
|
||||
--border-style: solid;
|
||||
--background: #{current-color(base)};
|
||||
backdrop-filter: var(--backdrop-filter);
|
||||
}
|
||||
|
||||
// Transparent Toolbar
|
||||
@ -33,15 +36,10 @@
|
||||
|
||||
:host(.toolbar-translucent) {
|
||||
--border-color: transparent;
|
||||
|
||||
.toolbar-background {
|
||||
background: var(--translucent-background);
|
||||
|
||||
backdrop-filter: var(--translucent-filter);
|
||||
}
|
||||
--backdrop-filter: var(--translucent-filter);
|
||||
--opacity: 0.8;
|
||||
}
|
||||
|
||||
|
||||
.toolbar-background {
|
||||
@include position(0, 0, 0, 0);
|
||||
|
||||
@ -54,6 +52,8 @@
|
||||
background: var(--background);
|
||||
transform: translateZ(0);
|
||||
|
||||
opacity: var(--opacity);
|
||||
|
||||
pointer-events: none;
|
||||
|
||||
contain: strict;
|
||||
|
||||
Reference in New Issue
Block a user