javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-23 22:17:40 +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;
/**
* 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;
}
@ -220,7 +220,7 @@ export namespace Components {
*/
'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;
}
@ -433,7 +433,7 @@ export namespace Components {
*/
'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;
}
@ -807,7 +807,7 @@ export namespace Components {
*/
'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;
/**
@ -831,7 +831,7 @@ export namespace Components {
*/
'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;
}
@ -847,7 +847,7 @@ export namespace Components {
*/
'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;
}
@ -1252,7 +1252,7 @@ export namespace Components {
*/
'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;
}
@ -1740,7 +1740,7 @@ export namespace Components {
*/
'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;
}
@ -2397,7 +2397,7 @@ export namespace Components {
*/
'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;
}
@ -2634,7 +2634,7 @@ export namespace Components {
*/
'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;
}
@ -3500,7 +3500,7 @@ declare namespace LocalJSX {
*/
'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;
}
@ -3571,7 +3571,7 @@ declare namespace LocalJSX {
*/
'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;
}
@ -3783,7 +3783,7 @@ declare namespace LocalJSX {
*/
'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;
}
@ -4177,7 +4177,7 @@ declare namespace LocalJSX {
*/
'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;
/**
@ -4201,7 +4201,7 @@ declare namespace LocalJSX {
*/
'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;
}
@ -4217,7 +4217,7 @@ declare namespace LocalJSX {
*/
'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;
}
@ -4624,7 +4624,7 @@ declare namespace LocalJSX {
*/
'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;
}
@ -4959,7 +4959,7 @@ declare namespace LocalJSX {
*/
'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;
}
@ -5670,7 +5670,7 @@ declare namespace LocalJSX {
*/
'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;
}
@ -5907,7 +5907,7 @@ declare namespace LocalJSX {
*/
'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;
}