mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-10 00:27:41 +08:00
fix(overlays): fallback to step color if overlay background variable is unset (#18709)
fixes #18658
This commit is contained in:
Brandy Carney
@ -9,7 +9,7 @@
|
||||
$backdrop-ios-color: var(--ion-backdrop-color, #000) !default;
|
||||
$border-ios-color: var(--ion-border-color, var(--ion-color-step-150, #dedede)) !default;
|
||||
$box-shadow-ios-color: var(--ion-box-shadow-color, #000) !default;
|
||||
$overlay-ios-background-color: var(--ion-overlay-background-color, var(--ion-color-step-150, #f9f9f9)) !default;
|
||||
$overlay-ios-background-color: var(--ion-overlay-background-color, var(--ion-color-step-50, #f9f9f9)) !default;
|
||||
|
||||
// iOS Tabs & Tab bar
|
||||
// --------------------------------------------------
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
$backdrop-md-color: var(--ion-backdrop-color, #000) !default;
|
||||
$border-md-color: var(--ion-border-color, var(--ion-color-step-150, #c1c4cd)) !default;
|
||||
$box-shadow-md-color: var(--ion-box-shadow-color, #000) !default;
|
||||
$overlay-md-background-color: var(--ion-overlay-background-color, #fff) !default;
|
||||
$overlay-md-background-color: var(--ion-overlay-background-color, var(--ion-background-color, #fff)) !default;
|
||||
|
||||
// Material Design Tabs & Tab bar
|
||||
// --------------------------------------------------
|
||||
|
||||
@ -62,8 +62,8 @@
|
||||
<ion-label>Colors</ion-label>
|
||||
<ion-icon name="brush"></ion-icon>
|
||||
</ion-tab-button>
|
||||
<ion-tab-button tab="other">
|
||||
<ion-label>Other</ion-label>
|
||||
<ion-tab-button tab="overlays">
|
||||
<ion-label>Overlays</ion-label>
|
||||
<ion-icon name="more"></ion-icon>
|
||||
</ion-tab-button>
|
||||
</ion-tab-bar>
|
||||
@ -700,10 +700,10 @@
|
||||
</ion-content>
|
||||
</ion-tab>
|
||||
|
||||
<ion-tab tab="other">
|
||||
<ion-tab tab="overlays">
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Other</ion-title>
|
||||
<ion-title>Overlays</ion-title>
|
||||
<div slot="end" class="right-container">
|
||||
<ion-label>Select a Theme:</ion-label>
|
||||
<ion-select interface="popover" class="theme-picker">
|
||||
@ -717,11 +717,51 @@
|
||||
</ion-header>
|
||||
<ion-content>
|
||||
<div class="wrapper">
|
||||
|
||||
<!-- <section> -->
|
||||
<ion-list>
|
||||
<ion-item button onClick="presentAlert()">
|
||||
<ion-label>Present Alert</ion-label>
|
||||
</ion-item>
|
||||
<ion-item button onClick="presentActionSheet()">
|
||||
<ion-label>Present Action Sheet</ion-label>
|
||||
</ion-item>
|
||||
<ion-item button onClick="presentLoading()">
|
||||
<ion-label>Present Loading</ion-label>
|
||||
</ion-item>
|
||||
<ion-item button onClick="presentModal()">
|
||||
<ion-label>Present Modal</ion-label>
|
||||
</ion-item>
|
||||
<ion-item button onClick="presentPopover(event)">
|
||||
<ion-label>Present Popover</ion-label>
|
||||
</ion-item>
|
||||
<ion-item button onClick="presentToast()">
|
||||
<ion-label>Present Toast</ion-label>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Datetime</ion-label>
|
||||
<ion-datetime></ion-datetime>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Select</ion-label>
|
||||
<ion-select>
|
||||
<ion-select-option>1</ion-select-option>
|
||||
<ion-select-option>2</ion-select-option>
|
||||
<ion-select-option>3</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
<!-- </section> -->
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-tab>
|
||||
</ion-tabs>
|
||||
|
||||
<ion-alert-controller></ion-alert-controller>
|
||||
<ion-action-sheet-controller></ion-action-sheet-controller>
|
||||
<ion-loading-controller></ion-loading-controller>
|
||||
<ion-modal-controller></ion-modal-controller>
|
||||
<ion-popover-controller></ion-popover-controller>
|
||||
<ion-toast-controller></ion-toast-controller>
|
||||
</ion-app>
|
||||
|
||||
<script>
|
||||
@ -752,6 +792,159 @@
|
||||
selects[i].value = theme;
|
||||
}
|
||||
}
|
||||
|
||||
async function presentAlert() {
|
||||
const alertController = document.querySelector('ion-alert-controller');
|
||||
await alertController.componentOnReady();
|
||||
|
||||
const alert = await alertController.create({
|
||||
header: 'Alert',
|
||||
subHeader: 'Subtitle',
|
||||
message: 'This is an alert message.',
|
||||
buttons: ['OK']
|
||||
});
|
||||
return await alert.present();
|
||||
}
|
||||
|
||||
async function presentActionSheet() {
|
||||
const actionSheetController = document.querySelector('ion-action-sheet-controller');
|
||||
await actionSheetController.componentOnReady();
|
||||
|
||||
const actionSheet = await actionSheetController.create({
|
||||
header: "Albums",
|
||||
buttons: [{
|
||||
text: 'Delete',
|
||||
role: 'destructive',
|
||||
icon: 'trash',
|
||||
handler: () => {
|
||||
console.log('Delete clicked');
|
||||
}
|
||||
}, {
|
||||
text: 'Share',
|
||||
icon: 'share',
|
||||
handler: () => {
|
||||
console.log('Share clicked');
|
||||
}
|
||||
}, {
|
||||
text: 'Play (open modal)',
|
||||
icon: 'arrow-dropright-circle',
|
||||
handler: () => {
|
||||
console.log('Play clicked');
|
||||
}
|
||||
}, {
|
||||
text: 'Favorite',
|
||||
icon: 'heart',
|
||||
handler: () => {
|
||||
console.log('Favorite clicked');
|
||||
}
|
||||
}, {
|
||||
text: 'Cancel',
|
||||
icon: 'close',
|
||||
role: 'cancel',
|
||||
handler: () => {
|
||||
console.log('Cancel clicked');
|
||||
}
|
||||
}]
|
||||
});
|
||||
await actionSheet.present();
|
||||
}
|
||||
|
||||
async function presentLoading() {
|
||||
const loadingController = document.querySelector('ion-loading-controller');
|
||||
await loadingController.componentOnReady();
|
||||
|
||||
const loading = await loadingController.create({
|
||||
message: 'Hellooo',
|
||||
duration: 2000
|
||||
});
|
||||
|
||||
await loading.present();
|
||||
|
||||
const { role, data } = await loading.onDidDismiss();
|
||||
|
||||
console.log('Loading dismissed!');
|
||||
}
|
||||
|
||||
async function createModal() {
|
||||
// initialize controller
|
||||
const modalController = document.querySelector('ion-modal-controller');
|
||||
await modalController.componentOnReady();
|
||||
|
||||
// create component to open
|
||||
const element = document.createElement('div');
|
||||
element.innerHTML = `
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Super Modal</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content>
|
||||
<h1>Content of doom</h1>
|
||||
<div>Here's some more content</div>
|
||||
<ion-button class="dismiss">Dismiss Modal</ion-button>
|
||||
</ion-content>
|
||||
`;
|
||||
|
||||
// listen for close event
|
||||
const button = element.querySelector('ion-button');
|
||||
button.addEventListener('click', () => {
|
||||
modalController.dismiss();
|
||||
});
|
||||
|
||||
// present the modal
|
||||
const modalElement = await modalController.create({
|
||||
component: element
|
||||
});
|
||||
return modalElement;
|
||||
}
|
||||
|
||||
async function presentModal() {
|
||||
const modal = await createModal();
|
||||
await modal.present();
|
||||
}
|
||||
|
||||
async function presentPopover(event) {
|
||||
const popoverController = document.querySelector('ion-popover-controller');
|
||||
await popoverController.componentOnReady();
|
||||
const popoverElement = await popoverController.create({
|
||||
component: 'profile-page',
|
||||
event: event
|
||||
});
|
||||
return await popoverElement.present();
|
||||
}
|
||||
|
||||
class ProfilePage extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.innerHTML = `
|
||||
<ion-content>
|
||||
<ion-list>
|
||||
<ion-list-header>Ionic</ion-list-header>
|
||||
<ion-item><ion-label>Item 0</ion-label></ion-item>
|
||||
<ion-item><ion-label>Item 1</ion-label></ion-item>
|
||||
<ion-item><ion-label>Item 2</ion-label></ion-item>
|
||||
<ion-item><ion-label>Item 3</ion-label></ion-item>
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('profile-page', ProfilePage);
|
||||
|
||||
async function presentToast() {
|
||||
const toastController = document.querySelector('ion-toast-controller');
|
||||
await toastController.componentOnReady();
|
||||
|
||||
const toast = await toastController.create({
|
||||
message: 'Your settings have been saved.',
|
||||
duration: 2000
|
||||
});
|
||||
return await toast.present();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user