javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-10 00:27:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(overlays): add global backdrop opacity variable for animations (#19533)

Browse Source 
adds `--backdrop-opacity` to all overlays and `--ion-backdrop-opacity` for global control

closes #16446
This commit is contained in:
Brandy Carney
2019-10-08 16:42:37 -04:00
parent 3dd5f05760
commit bd22926c49
49 changed files with 136 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
core/src/components/action-sheet/action-sheet.ios.scss
View File

@ -8,6 +8,7 @@
--background: #{$action-sheet-ios-background-color};
--background-selected: #{$action-sheet-ios-button-background-selected};
--background-activated: #{$action-sheet-ios-button-background-activated};
--backdrop-opacity: var(--ion-backdrop-opacity, 0.4);
text-align: $action-sheet-ios-text-align;
}

1
core/src/components/action-sheet/action-sheet.md.scss
View File

@ -8,6 +8,7 @@
--background: #{$action-sheet-md-background-color};
--background-selected: #{var(--background, $action-sheet-md-button-background-selected)};
--background-activated: var(--background);
--backdrop-opacity: var(--ion-backdrop-opacity, 0.32);
}
.action-sheet-title {

2
core/src/components/action-sheet/action-sheet.scss
View File

@ -18,6 +18,8 @@
* @prop --min-height: Minimum height of the action sheet
* @prop --height: height of the action sheet
* @prop --max-height: Maximum height of the action sheet
*
* @prop --backdrop-opacity: Opacity of the backdrop
*/
--color: initial;
--min-width: auto;

2
core/src/components/action-sheet/animations/ios.enter.ts
View File

@ -11,7 +11,7 @@ export const iosEnterAnimation = (baseEl: HTMLElement): IonicAnimation => {
backdropAnimation
.addElement(baseEl.querySelector('ion-backdrop')!)
.fromTo('opacity', 0.01, 0.4);
.fromTo('opacity', 0.01, 'var(--backdrop-opacity)');
wrapperAnimation
.addElement(baseEl.querySelector('.action-sheet-wrapper')!)

2
core/src/components/action-sheet/animations/ios.leave.ts
View File

@ -11,7 +11,7 @@ export const iosLeaveAnimation = (baseEl: HTMLElement): IonicAnimation => {
backdropAnimation
.addElement(baseEl.querySelector('ion-backdrop')!)
.fromTo('opacity', 0.4, 0);
.fromTo('opacity', 'var(--backdrop-opacity)', 0);
wrapperAnimation
.addElement(baseEl.querySelector('.action-sheet-wrapper')!)

2
core/src/components/action-sheet/animations/md.enter.ts
View File

@ -11,7 +11,7 @@ export const mdEnterAnimation = (baseEl: HTMLElement): IonicAnimation => {
backdropAnimation
.addElement(baseEl.querySelector('ion-backdrop')!)
.fromTo('opacity', 0.01, 0.32);
.fromTo('opacity', 0.01, 'var(--backdrop-opacity)');
wrapperAnimation
.addElement(baseEl.querySelector('.action-sheet-wrapper')!)

2
core/src/components/action-sheet/animations/md.leave.ts
View File

@ -11,7 +11,7 @@ export const mdLeaveAnimation = (baseEl: HTMLElement): IonicAnimation => {
backdropAnimation
.addElement(baseEl.querySelector('ion-backdrop')!)
.fromTo('opacity', 0.32, 0);
.fromTo('opacity', 'var(--backdrop-opacity)', 0);
wrapperAnimation
.addElement(baseEl.querySelector('.action-sheet-wrapper')!)

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

@ -321,6 +321,7 @@ Type: `Promise<void>`
| Name | Description |
| ------------------------ | -------------------------------------------------- |
| `--backdrop-opacity` | Opacity of the backdrop |
| `--background` | Background of the action sheet group |
| `--background-activated` | Background of the action sheet button when pressed |
| `--background-selected` | Background of the selected action sheet button |

8
core/src/components/action-sheet/test/basic/e2e.ts
View File

@ -34,6 +34,10 @@ test('action-sheet: basic, scroll without cancel', async () => {
await testActionSheet(DIRECTORY, '#scrollWithoutCancel');
});
test('action-sheet: basic, custom backdrop', async () => {
await testActionSheet(DIRECTORY, '#customBackdrop');
});
/**
* RTL Tests
*/
@ -69,3 +73,7 @@ test('action-sheet:rtl: basic, scrollable options', async () => {
test('action-sheet:rtl: basic, scroll without cancel', async () => {
await testActionSheet(DIRECTORY, '#scrollWithoutCancel', true);
});
test('action-sheet:rtl: basic, custom backdrop', async () => {
await testActionSheet(DIRECTORY, '#customBackdrop', true);
});

11
core/src/components/action-sheet/test/basic/index.html
View File

@ -28,6 +28,7 @@
<ion-button expand="block" id="noBackdropDismiss" onclick="presentNoBackdropDismiss()">No Backdrop Dismiss</ion-button>
<ion-button expand="block" id="scrollableOptions" onclick="presentScroll()">Scrollable Options</ion-button>
<ion-button expand="block" id="scrollWithoutCancel" onclick="presentScrollNoCancel()">Scroll Without Cancel</ion-button>
<ion-button expand="block" id="customBackdrop" onclick="presentWithCssClass('custom-backdrop')">Custom Backdrop Opacity</ion-button>
</ion-content>
</ion-app>
@ -49,6 +50,10 @@
--height: 325px;
}
.custom-backdrop {
--ion-backdrop-opacity: 1;
}
</style>
<script>
window.addEventListener('ionActionSheetDidDismiss', function (e) { console.log('didDismiss', e) })
@ -146,10 +151,12 @@
await actionSheetElement.present();
}
async function presentWithCssClass() {
async function presentWithCssClass(classList) {
const addClass = classList ? classList : "my-color-class my-custom-class";
const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
header: "Custom Css Class",
cssClass: "my-color-class my-custom-class",
cssClass: addClass,
buttons: [
{
text: 'Add to Favorites',