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

fix(title): inherit padding for iOS title in a toolbar (#23343)

Browse Source 
resolves #23072
This commit is contained in:
Brandy Carney
2021-06-03 11:28:57 -04:00
committed by GitHub
parent ae96563fb3
commit 82cfa55653
2 changed files with 39 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
core/src/components/modal/test/custom/index.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Modal - Basic</title> <title>Modal - Custom</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet"> <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet"> <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
@ -11,22 +11,27 @@
<script nomodule src="../../../../../dist/ionic/ionic.js"></script> <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script> <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
<style> <style>
.custom-modal {
--height: 70%;
--border-style: solid;
--border-width: 7px 0 0 0;
--border-color: #0d51aa;
--border-radius: 20px 20px 0 0;
align-items: flex-end;
}
@media (max-width: 400px) {
.custom-modal { .custom-modal {
--max-width: 98%; --height: 70%;
--height: 98%; --border-style: solid;
--border-width: 7px 0 0 0;
--border-color: #0d51aa;
--border-radius: 20px 20px 0 0;
align-items: flex-end;
}
.custom-modal ion-toolbar {
--padding-top: 46px;
--padding-bottom: 10px;
}
@media (max-width: 400px) {
.custom-modal {
--max-width: 98%;
--height: 98%;
}
} }
}
</style> </style>
</head> </head>
@ -35,7 +40,7 @@
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Modal - Basic</ion-title> <ion-title>Modal - Custom</ion-title>
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>
@ -55,13 +60,23 @@
element.innerHTML = ` element.innerHTML = `
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="start">
<ion-button>
<ion-icon slot="icon-only" name="add-circle-outline"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Super Modal</ion-title> <ion-title>Super Modal</ion-title>
<ion-buttons slot="end">
<ion-button class="dismiss">
Close
</ion-button>
</ion-buttons>
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>
<ion-content> <ion-content>
<h1>Content of doom</h1> <h1>Content of doom</h1>
<div>Here's some more content</div> <div>Here's some more content</div>
<ion-button class="dismiss">Dismiss Modal</ion-button> <ion-button class="dismiss" class="dismiss">Dismiss Modal</ion-button>
</ion-content> </ion-content>
`; `;
@ -72,10 +87,12 @@
}); });
// listen for close event // listen for close event
const button = element.querySelector('ion-button'); const buttons = element.querySelectorAll('.dismiss');
button.addEventListener('click', () => { for (var button of buttons) {
modalElement.dismiss(); button.addEventListener('click', () => {
}); modalElement.dismiss();
});
}
document.body.appendChild(modalElement); document.body.appendChild(modalElement);
return modalElement; return modalElement;
} }

2
core/src/components/title/title.ios.scss
View File

@ -5,7 +5,7 @@
:host { :host {
@include position(0, null, null, 0); @include position(0, null, null, 0);
@include padding(0, 90px, 0); @include padding(var(--padding-top), 90px, var(--padding-bottom));
position: absolute; position: absolute;