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

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

View File

@ -76,7 +76,7 @@ export class FabButton implements ComponentInterface, AnchorInterface, ButtonInt
/**
* 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).
*/
@Prop() translucent = false;

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` |
| `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` |
| `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'` |