javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 03:32:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(components): apply translucent if backdrop-filter is supported (#18832)

Browse Source 
This updates the components and the docs so that translucent is only applied when backdrop filter is supported, this prevents it from being applied when viewing iOS in Chrome, for example.

closes ionic-team/ionic-docs#666
This commit is contained in:
Brandy Carney
2019-07-19 11:16:10 -04:00
committed by GitHub
parent fbfc07688e
commit 6b5a59dc43
29 changed files with 156 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
core/src/components.d.ts vendored
View File

@ -135,7 +135,7 @@ export namespace Components {
*/ */
'subHeader'?: string; 'subHeader'?: string;
/** /**
* If `true`, the action sheet will be translucent. Only applies when the mode is `"ios"` and the device supports backdrop-filter. * If `true`, the action sheet will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
*/ */
'translucent': boolean; 'translucent': boolean;
} }
@ -220,7 +220,7 @@ export namespace Components {
*/ */
'subHeader'?: string; 'subHeader'?: string;
/** /**
* If `true`, the alert will be translucent. * If `true`, the alert will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
*/ */
'translucent': boolean; 'translucent': boolean;
} }
@ -433,7 +433,7 @@ export namespace Components {
*/ */
'mode'?: "ios" | "md"; 'mode'?: "ios" | "md";
/** /**
* If `true`, the card header will be translucent. * If `true`, the card header will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
*/ */
'translucent': boolean; 'translucent': boolean;
} }
@ -807,7 +807,7 @@ export namespace Components {
*/ */
'target': string | undefined; 'target': string | undefined;
/** /**
* If `true`, the fab button will be translucent. Only applies to `ios` mode on devices that support [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). * If `true`, the fab button will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
*/ */
'translucent': boolean; 'translucent': boolean;
/** /**
@ -831,7 +831,7 @@ export namespace Components {
*/ */
'mode'?: "ios" | "md"; 'mode'?: "ios" | "md";
/** /**
* If `true`, the footer will be translucent. Only applies to `ios` mode. Note: In order to scroll content behind the footer, the `fullscreen` attribute needs to be set on the content. * If `true`, the footer will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). Note: In order to scroll content behind the footer, the `fullscreen` attribute needs to be set on the content.
*/ */
'translucent': boolean; 'translucent': boolean;
} }
@ -847,7 +847,7 @@ export namespace Components {
*/ */
'mode'?: "ios" | "md"; 'mode'?: "ios" | "md";
/** /**
* If `true`, the header will be translucent. Only applies to `ios` mode. Note: In order to scroll content behind the header, the `fullscreen` attribute needs to be set on the content. * If `true`, the header will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). Note: In order to scroll content behind the header, the `fullscreen` attribute needs to be set on the content.
*/ */
'translucent': boolean; 'translucent': boolean;
} }
@ -1252,7 +1252,7 @@ export namespace Components {
*/ */
'spinner'?: SpinnerTypes | null; 'spinner'?: SpinnerTypes | null;
/** /**
* If `true`, the loading indicator will be translucent. * If `true`, the loading indicator will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
*/ */
'translucent': boolean; 'translucent': boolean;
} }
@ -1740,7 +1740,7 @@ export namespace Components {
*/ */
'showBackdrop': boolean; 'showBackdrop': boolean;
/** /**
* If `true`, the popover will be translucent. * If `true`, the popover will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
*/ */
'translucent': boolean; 'translucent': boolean;
} }
@ -2397,7 +2397,7 @@ export namespace Components {
*/ */
'selectedTab'?: string; 'selectedTab'?: string;
/** /**
* If `true`, the tab bar will be translucent. * If `true`, the tab bar will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
*/ */
'translucent': boolean; 'translucent': boolean;
} }
@ -2634,7 +2634,7 @@ export namespace Components {
*/ */
'showCloseButton': boolean; 'showCloseButton': boolean;
/** /**
* If `true`, the toast will be translucent. * If `true`, the toast will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
*/ */
'translucent': boolean; 'translucent': boolean;
} }
@ -3500,7 +3500,7 @@ declare namespace LocalJSX {
*/ */
'subHeader'?: string; 'subHeader'?: string;
/** /**
* If `true`, the action sheet will be translucent. Only applies when the mode is `"ios"` and the device supports backdrop-filter. * If `true`, the action sheet will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
*/ */
'translucent'?: boolean; 'translucent'?: boolean;
} }
@ -3571,7 +3571,7 @@ declare namespace LocalJSX {
*/ */
'subHeader'?: string; 'subHeader'?: string;
/** /**
* If `true`, the alert will be translucent. * If `true`, the alert will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
*/ */
'translucent'?: boolean; 'translucent'?: boolean;
} }
@ -3783,7 +3783,7 @@ declare namespace LocalJSX {
*/ */
'mode'?: "ios" | "md"; 'mode'?: "ios" | "md";
/** /**
* If `true`, the card header will be translucent. * If `true`, the card header will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
*/ */
'translucent'?: boolean; 'translucent'?: boolean;
} }
@ -4177,7 +4177,7 @@ declare namespace LocalJSX {
*/ */
'target'?: string | undefined; 'target'?: string | undefined;
/** /**
* If `true`, the fab button will be translucent. Only applies to `ios` mode on devices that support [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). * If `true`, the fab button will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
*/ */
'translucent'?: boolean; 'translucent'?: boolean;
/** /**
@ -4201,7 +4201,7 @@ declare namespace LocalJSX {
*/ */
'mode'?: "ios" | "md"; 'mode'?: "ios" | "md";
/** /**
* If `true`, the footer will be translucent. Only applies to `ios` mode. Note: In order to scroll content behind the footer, the `fullscreen` attribute needs to be set on the content. * If `true`, the footer will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). Note: In order to scroll content behind the footer, the `fullscreen` attribute needs to be set on the content.
*/ */
'translucent'?: boolean; 'translucent'?: boolean;
} }
@ -4217,7 +4217,7 @@ declare namespace LocalJSX {
*/ */
'mode'?: "ios" | "md"; 'mode'?: "ios" | "md";
/** /**
* If `true`, the header will be translucent. Only applies to `ios` mode. Note: In order to scroll content behind the header, the `fullscreen` attribute needs to be set on the content. * If `true`, the header will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). Note: In order to scroll content behind the header, the `fullscreen` attribute needs to be set on the content.
*/ */
'translucent'?: boolean; 'translucent'?: boolean;
} }
@ -4624,7 +4624,7 @@ declare namespace LocalJSX {
*/ */
'spinner'?: SpinnerTypes | null; 'spinner'?: SpinnerTypes | null;
/** /**
* If `true`, the loading indicator will be translucent. * If `true`, the loading indicator will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
*/ */
'translucent'?: boolean; 'translucent'?: boolean;
} }
@ -4959,7 +4959,7 @@ declare namespace LocalJSX {
*/ */
'showBackdrop'?: boolean; 'showBackdrop'?: boolean;
/** /**
* If `true`, the popover will be translucent. * If `true`, the popover will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
*/ */
'translucent'?: boolean; 'translucent'?: boolean;
} }
@ -5670,7 +5670,7 @@ declare namespace LocalJSX {
*/ */
'selectedTab'?: string; 'selectedTab'?: string;
/** /**
* If `true`, the tab bar will be translucent. * If `true`, the tab bar will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
*/ */
'translucent'?: boolean; 'translucent'?: boolean;
} }
@ -5907,7 +5907,7 @@ declare namespace LocalJSX {
*/ */
'showCloseButton'?: boolean; 'showCloseButton'?: boolean;
/** /**
* If `true`, the toast will be translucent. * If `true`, the toast will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
*/ */
'translucent'?: boolean; 'translucent'?: boolean;
} }

4
core/src/components/action-sheet/action-sheet.tsx
View File

@ -74,7 +74,9 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
@Prop() subHeader?: string; @Prop() subHeader?: string;
/** /**
* If `true`, the action sheet will be translucent. Only applies when the mode is `"ios"` and the device supports backdrop-filter. * If `true`, the action sheet will be translucent.
* Only applies when the mode is `"ios"` and the device supports
* [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
*/ */
@Prop() translucent = false; @Prop() translucent = false;

4
core/src/components/action-sheet/readme.md
View File

@ -251,7 +251,7 @@ export default {
## Properties ## Properties
| Property | Attribute | Description | Type | Default | | Property | Attribute | Description | Type | Default |
| ----------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ----------- | | ----------------- | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ----------- |
| `animated` | `animated` | If `true`, the action sheet will animate. | `boolean` | `true` | | `animated` | `animated` | If `true`, the action sheet will animate. | `boolean` | `true` |
| `backdropDismiss` | `backdrop-dismiss` | If `true`, the action sheet will be dismissed when the backdrop is clicked. | `boolean` | `true` | | `backdropDismiss` | `backdrop-dismiss` | If `true`, the action sheet will be dismissed when the backdrop is clicked. | `boolean` | `true` |
| `buttons` | -- | An array of buttons for the action sheet. | `(string \| ActionSheetButton)[]` | `[]` | | `buttons` | -- | An array of buttons for the action sheet. | `(string \| ActionSheetButton)[]` | `[]` |
@ -262,7 +262,7 @@ export default {
| `leaveAnimation` | -- | Animation to use when the action sheet is dismissed. | `((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) \| undefined` | `undefined` | | `leaveAnimation` | -- | Animation to use when the action sheet is dismissed. | `((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | | `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `subHeader` | `sub-header` | Subtitle for the action sheet. | `string \| undefined` | `undefined` | | `subHeader` | `sub-header` | Subtitle for the action sheet. | `string \| undefined` | `undefined` |
| `translucent` | `translucent` | If `true`, the action sheet will be translucent. Only applies when the mode is `"ios"` and the device supports backdrop-filter. | `boolean` | `false` | | `translucent` | `translucent` | If `true`, the action sheet will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | `boolean` | `false` |
## Events ## Events

5
core/src/components/alert/alert.ios.scss
View File

@ -22,12 +22,13 @@
// iOS Translucent Alert // iOS Translucent Alert
// ----------------------------------------- // -----------------------------------------
:host(.alert-translucent) .alert-wrapper { @supports (backdrop-filter: blur(0)) {
:host(.alert-translucent) .alert-wrapper {
background: $alert-ios-translucent-background-color; background: $alert-ios-translucent-background-color;
backdrop-filter: $alert-ios-translucent-filter; backdrop-filter: $alert-ios-translucent-filter;
}
} }
// iOS Alert Header // iOS Alert Header
// -------------------------------------------------- // --------------------------------------------------

2
core/src/components/alert/alert.tsx
View File

@ -97,6 +97,8 @@ export class Alert implements ComponentInterface, OverlayInterface {
/** /**
* If `true`, the alert will be translucent. * If `true`, the alert will be translucent.
* Only applies when the mode is `"ios"` and the device supports
* [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
*/ */
@Prop() translucent = false; @Prop() translucent = false;

2
core/src/components/alert/readme.md
View File

@ -1052,7 +1052,7 @@ export default {
| `message` | `message` | The main message to be displayed in the alert. `message` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;` For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) | `string \| undefined` | `undefined` | | `message` | `message` | The main message to be displayed in the alert. `message` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;` For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) | `string \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | | `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `subHeader` | `sub-header` | The subtitle in the heading of the alert. Displayed under the title. | `string \| undefined` | `undefined` | | `subHeader` | `sub-header` | The subtitle in the heading of the alert. Displayed under the title. | `string \| undefined` | `undefined` |
| `translucent` | `translucent` | If `true`, the alert will be translucent. | `boolean` | `false` | | `translucent` | `translucent` | If `true`, the alert will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | `boolean` | `false` |
## Events ## Events

4
core/src/components/card-header/card-header.ios.scss
View File

@ -8,7 +8,9 @@
@include padding($card-ios-header-padding-top, $card-ios-header-padding-end, $card-ios-header-padding-bottom, $card-ios-header-padding-start); @include padding($card-ios-header-padding-top, $card-ios-header-padding-end, $card-ios-header-padding-bottom, $card-ios-header-padding-start);
} }
:host(.card-header-translucent) { @supports (backdrop-filter: blur(0)) {
:host(.card-header-translucent) {
background-color: $card-ios-header-translucent-background-color; background-color: $card-ios-header-translucent-background-color;
backdrop-filter: $card-ios-header-translucent-filter; backdrop-filter: $card-ios-header-translucent-filter;
}
} }

2
core/src/components/card-header/card-header.tsx
View File

@ -25,6 +25,8 @@ export class CardHeader implements ComponentInterface {
/** /**
* If `true`, the card header will be translucent. * If `true`, the card header will be translucent.
* Only applies when the mode is `"ios"` and the device supports
* [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
*/ */
@Prop() translucent = false; @Prop() translucent = false;

2
core/src/components/card-header/readme.md
View File

@ -12,7 +12,7 @@
| ------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- | | ------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` | | `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | | `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `translucent` | `translucent` | If `true`, the card header will be translucent. | `boolean` | `false` | | `translucent` | `translucent` | If `true`, the card header will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | `boolean` | `false` |
---------------------------------------------- ----------------------------------------------

2
core/src/components/fab-button/fab-button.tsx
View File

@ -76,7 +76,7 @@ export class FabButton implements ComponentInterface, AnchorInterface, ButtonInt
/** /**
* If `true`, the fab button will be translucent. * If `true`, the fab button will be translucent.
* Only applies to `ios` mode on devices that support * Only applies when the mode is `"ios"` and the device supports
* [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
*/ */
@Prop() translucent = false; @Prop() translucent = false;

2
core/src/components/fab-button/readme.md
View File

@ -111,7 +111,7 @@ export const FabButtonExample: React.FunctionComponent = () => (
| `show` | `show` | If `true`, the fab button will show when in a fab-list. | `boolean` | `false` | | `show` | `show` | If `true`, the fab button will show when in a fab-list. | `boolean` | `false` |
| `size` | `size` | The size of the button. Set this to `small` in order to have a mini fab. | `"small" \| undefined` | `undefined` | | `size` | `size` | The size of the button. Set this to `small` in order to have a mini fab. | `"small" \| undefined` | `undefined` |
| `target` | `target` | Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. | `string \| undefined` | `undefined` | | `target` | `target` | Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. | `string \| undefined` | `undefined` |
| `translucent` | `translucent` | If `true`, the fab button will be translucent. Only applies to `ios` mode on devices that support [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | `boolean` | `false` | | `translucent` | `translucent` | If `true`, the fab button will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | `boolean` | `false` |
| `type` | `type` | The type of the button. | `"button" \| "reset" \| "submit"` | `'button'` | | `type` | `type` | The type of the button. | `"button" \| "reset" \| "submit"` | `'button'` |

8
core/src/components/footer/footer.ios.scss
View File

@ -12,11 +12,13 @@
--border-width: 0; --border-width: 0;
} }
.footer-translucent-ios { @supports (backdrop-filter: blur(0)) {
.footer-translucent-ios {
backdrop-filter: $footer-ios-translucent-filter; backdrop-filter: $footer-ios-translucent-filter;
} }
.footer-translucent-ios ion-toolbar { .footer-translucent-ios ion-toolbar {
--opacity: .8; --opacity: .8;
--backdrop-filter: #{$footer-ios-translucent-filter}; --backdrop-filter: #{$footer-ios-translucent-filter};
}
} }

5
core/src/components/footer/footer.tsx
View File

@ -15,7 +15,10 @@ import { getIonMode } from '../../global/ionic-global';
export class Footer implements ComponentInterface { export class Footer implements ComponentInterface {
/** /**
* If `true`, the footer will be translucent. Only applies to `ios` mode. * If `true`, the footer will be translucent.
* Only applies when the mode is `"ios"` and the device supports
* [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
*
* Note: In order to scroll content behind the footer, the `fullscreen` * Note: In order to scroll content behind the footer, the `fullscreen`
* attribute needs to be set on the content. * attribute needs to be set on the content.
*/ */

4
core/src/components/footer/readme.md
View File

@ -45,9 +45,9 @@ export const FooterExample: React.FunctionComponent = () => (
## Properties ## Properties
| Property | Attribute | Description | Type | Default | | Property | Attribute | Description | Type | Default |
| ------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------- | ----------- | | ------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------- | ----------- |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | | `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `translucent` | `translucent` | If `true`, the footer will be translucent. Only applies to `ios` mode. Note: In order to scroll content behind the footer, the `fullscreen` attribute needs to be set on the content. | `boolean` | `false` | | `translucent` | `translucent` | If `true`, the footer will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). Note: In order to scroll content behind the footer, the `fullscreen` attribute needs to be set on the content. | `boolean` | `false` |
---------------------------------------------- ----------------------------------------------

8
core/src/components/header/header.ios.scss
View File

@ -12,11 +12,13 @@
--border-width: 0; --border-width: 0;
} }
.header-translucent-ios { @supports (backdrop-filter: blur(0)) {
.header-translucent-ios {
backdrop-filter: $header-ios-translucent-filter; backdrop-filter: $header-ios-translucent-filter;
} }
.header-translucent-ios ion-toolbar { .header-translucent-ios ion-toolbar {
--opacity: .8; --opacity: .8;
--backdrop-filter: #{$header-ios-translucent-filter}; --backdrop-filter: #{$header-ios-translucent-filter};
}
} }

5
core/src/components/header/header.tsx
View File

@ -15,7 +15,10 @@ import { getIonMode } from '../../global/ionic-global';
export class Header implements ComponentInterface { export class Header implements ComponentInterface {
/** /**
* If `true`, the header will be translucent. Only applies to `ios` mode. * If `true`, the header will be translucent.
* Only applies when the mode is `"ios"` and the device supports
* [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
*
* Note: In order to scroll content behind the header, the `fullscreen` * Note: In order to scroll content behind the header, the `fullscreen`
* attribute needs to be set on the content. * attribute needs to be set on the content.
*/ */

4
core/src/components/header/readme.md
View File

@ -61,9 +61,9 @@ export const HeaderExample: React.FunctionComponent = () => (
## Properties ## Properties
| Property | Attribute | Description | Type | Default | | Property | Attribute | Description | Type | Default |
| ------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------- | ----------- | | ------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------- | ----------- |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | | `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `translucent` | `translucent` | If `true`, the header will be translucent. Only applies to `ios` mode. Note: In order to scroll content behind the header, the `fullscreen` attribute needs to be set on the content. | `boolean` | `false` | | `translucent` | `translucent` | If `true`, the header will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). Note: In order to scroll content behind the header, the `fullscreen` attribute needs to be set on the content. | `boolean` | `false` |
---------------------------------------------- ----------------------------------------------

4
core/src/components/loading/loading.ios.scss
View File

@ -24,9 +24,11 @@
// iOS Translucent Loading // iOS Translucent Loading
// ----------------------------------------- // -----------------------------------------
:host(.loading-translucent) .loading-wrapper { @supports (backdrop-filter: blur(0)) {
:host(.loading-translucent) .loading-wrapper {
background-color: $loading-ios-translucent-background-color; background-color: $loading-ios-translucent-background-color;
backdrop-filter: $loading-ios-translucent-filter; backdrop-filter: $loading-ios-translucent-filter;
}
} }

2
core/src/components/loading/loading.tsx
View File

@ -83,6 +83,8 @@ export class Loading implements ComponentInterface, OverlayInterface {
/** /**
* If `true`, the loading indicator will be translucent. * If `true`, the loading indicator will be translucent.
* Only applies when the mode is `"ios"` and the device supports
* [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
*/ */
@Prop() translucent = false; @Prop() translucent = false;

4
core/src/components/loading/readme.md
View File

@ -177,7 +177,7 @@ export default {
## Properties ## Properties
| Property | Attribute | Description | Type | Default | | Property | Attribute | Description | Type | Default |
| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ----------- | | ----------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ----------- |
| `animated` | `animated` | If `true`, the loading indicator will animate. | `boolean` | `true` | | `animated` | `animated` | If `true`, the loading indicator will animate. | `boolean` | `true` |
| `backdropDismiss` | `backdrop-dismiss` | If `true`, the loading indicator will be dismissed when the backdrop is clicked. | `boolean` | `false` | | `backdropDismiss` | `backdrop-dismiss` | If `true`, the loading indicator will be dismissed when the backdrop is clicked. | `boolean` | `false` |
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` | | `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` |
@ -189,7 +189,7 @@ export default {
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | | `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `showBackdrop` | `show-backdrop` | If `true`, a backdrop will be displayed behind the loading indicator. | `boolean` | `true` | | `showBackdrop` | `show-backdrop` | If `true`, a backdrop will be displayed behind the loading indicator. | `boolean` | `true` |
| `spinner` | `spinner` | The name of the spinner to display. | `"bubbles" \| "circles" \| "crescent" \| "dots" \| "lines" \| "lines-small" \| null \| undefined` | `undefined` | | `spinner` | `spinner` | The name of the spinner to display. | `"bubbles" \| "circles" \| "crescent" \| "dots" \| "lines" \| "lines-small" \| null \| undefined` | `undefined` |
| `translucent` | `translucent` | If `true`, the loading indicator will be translucent. | `boolean` | `false` | | `translucent` | `translucent` | If `true`, the loading indicator will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | `boolean` | `false` |
## Events ## Events

6
core/src/components/popover/popover.ios.scss
View File

@ -57,8 +57,10 @@
// Translucent Popover // Translucent Popover
// ----------------------------------------- // -----------------------------------------
:host(.popover-translucent) .popover-content, @supports (backdrop-filter: blur(0)) {
:host(.popover-translucent) .popover-arrow::after { :host(.popover-translucent) .popover-content,
:host(.popover-translucent) .popover-arrow::after {
background: $popover-ios-translucent-background-color; background: $popover-ios-translucent-background-color;
backdrop-filter: $popover-ios-translucent-filter; backdrop-filter: $popover-ios-translucent-filter;
}
} }

2
core/src/components/popover/popover.tsx
View File

@ -87,6 +87,8 @@ export class Popover implements ComponentInterface, OverlayInterface {
/** /**
* If `true`, the popover will be translucent. * If `true`, the popover will be translucent.
* Only applies when the mode is `"ios"` and the device supports
* [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
*/ */
@Prop() translucent = false; @Prop() translucent = false;

4
core/src/components/popover/readme.md
View File

@ -88,7 +88,7 @@ export const PopoverExample: React.FunctionComponent = () => {
## Properties ## Properties
| Property | Attribute | Description | Type | Default | | Property | Attribute | Description | Type | Default |
| ------------------------ | ------------------ | ---------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ----------- | | ------------------------ | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ----------- |
| `animated` | `animated` | If `true`, the popover will animate. | `boolean` | `true` | | `animated` | `animated` | If `true`, the popover will animate. | `boolean` | `true` |
| `backdropDismiss` | `backdrop-dismiss` | If `true`, the popover will be dismissed when the backdrop is clicked. | `boolean` | `true` | | `backdropDismiss` | `backdrop-dismiss` | If `true`, the popover will be dismissed when the backdrop is clicked. | `boolean` | `true` |
| `component` _(required)_ | `component` | The component to display inside of the popover. | `Function \| HTMLElement \| null \| string` | `undefined` | | `component` _(required)_ | `component` | The component to display inside of the popover. | `Function \| HTMLElement \| null \| string` | `undefined` |
@ -100,7 +100,7 @@ export const PopoverExample: React.FunctionComponent = () => {
| `leaveAnimation` | -- | Animation to use when the popover is dismissed. | `((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) \| undefined` | `undefined` | | `leaveAnimation` | -- | Animation to use when the popover is dismissed. | `((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | | `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `showBackdrop` | `show-backdrop` | If `true`, a backdrop will be displayed behind the popover. | `boolean` | `true` | | `showBackdrop` | `show-backdrop` | If `true`, a backdrop will be displayed behind the popover. | `boolean` | `true` |
| `translucent` | `translucent` | If `true`, the popover will be translucent. | `boolean` | `false` | | `translucent` | `translucent` | If `true`, the popover will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | `boolean` | `false` |
## Events ## Events

2
core/src/components/tab-bar/readme.md
View File

@ -110,7 +110,7 @@ export const TabBarExample: React.FunctionComponent = () => (
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` | | `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | | `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `selectedTab` | `selected-tab` | The selected tab component | `string \| undefined` | `undefined` | | `selectedTab` | `selected-tab` | The selected tab component | `string \| undefined` | `undefined` |
| `translucent` | `translucent` | If `true`, the tab bar will be translucent. | `boolean` | `false` | | `translucent` | `translucent` | If `true`, the tab bar will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | `boolean` | `false` |
## CSS Custom Properties ## CSS Custom Properties

14
core/src/components/tab-bar/tab-bar.ios.scss
View File

@ -18,16 +18,18 @@
// iOS Translucent Tab bar // iOS Translucent Tab bar
// -------------------------------------------------- // --------------------------------------------------
:host(.tab-bar-translucent) { @supports (backdrop-filter: blur(0)) {
:host(.tab-bar-translucent) {
--background: #{$tab-bar-ios-translucent-background-color}; --background: #{$tab-bar-ios-translucent-background-color};
backdrop-filter: $tab-bar-ios-translucent-filter; backdrop-filter: $tab-bar-ios-translucent-filter;
} }
// iOS Translucent Tab bar with Color // iOS Translucent Tab bar with Color
:host(.ion-color.tab-bar-translucent) { :host(.ion-color.tab-bar-translucent) {
background: #{current-color(base, $tab-bar-ios-translucent-background-color-alpha)}; background: #{current-color(base, $tab-bar-ios-translucent-background-color-alpha)};
} }
:host(.tab-bar-translucent) ::slotted(ion-tab-button.ion-focused) { :host(.tab-bar-translucent) ::slotted(ion-tab-button.ion-focused) {
background: rgba($background-color-rgb, .6); background: rgba($background-color-rgb, .6);
}
} }

2
core/src/components/tab-bar/tab-bar.tsx
View File

@ -43,6 +43,8 @@ export class TabBar implements ComponentInterface {
/** /**
* If `true`, the tab bar will be translucent. * If `true`, the tab bar will be translucent.
* Only applies when the mode is `"ios"` and the device supports
* [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
*/ */
@Prop() translucent = false; @Prop() translucent = false;

2
core/src/components/toast/readme.md
View File

@ -186,7 +186,7 @@ export const ToastExample: React.FunctionComponent = () => {
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | | `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `position` | `position` | The position of the toast on the screen. | `"bottom" \| "middle" \| "top"` | `'bottom'` | | `position` | `position` | The position of the toast on the screen. | `"bottom" \| "middle" \| "top"` | `'bottom'` |
| `showCloseButton` | `show-close-button` | If `true`, the close button will be displayed. | `boolean` | `false` | | `showCloseButton` | `show-close-button` | If `true`, the close button will be displayed. | `boolean` | `false` |
| `translucent` | `translucent` | If `true`, the toast will be translucent. | `boolean` | `false` | | `translucent` | `translucent` | If `true`, the toast will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | `boolean` | `false` |
## Events ## Events

4
core/src/components/toast/toast.ios.scss
View File

@ -25,9 +25,11 @@
z-index: $z-index-overlay-wrapper; z-index: $z-index-overlay-wrapper;
} }
:host(.toast-translucent) .toast-wrapper { @supports (backdrop-filter: blur(0)) {
:host(.toast-translucent) .toast-wrapper {
background: $toast-ios-translucent-background-color; background: $toast-ios-translucent-background-color;
backdrop-filter: $toast-ios-translucent-filter; backdrop-filter: $toast-ios-translucent-filter;
}
} }
.toast-wrapper.toast-top { .toast-wrapper.toast-top {

2
core/src/components/toast/toast.tsx
View File

@ -103,6 +103,8 @@ export class Toast implements ComponentInterface, OverlayInterface {
/** /**
* If `true`, the toast will be translucent. * If `true`, the toast will be translucent.
* Only applies when the mode is `"ios"` and the device supports
* [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
*/ */
@Prop() translucent = false; @Prop() translucent = false;