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

fix(content): set fixed content to position absolute (#19867)

Browse Source 
Adds absolute position to fixed slot in order to display text that is inside of the slot.

Fixes #17754

Co-authored-by: Matthew de Nobrega matthew@caro.health
This commit is contained in:
Brandy Carney
2019-11-08 10:31:33 -05:00
committed by GitHub
parent be0ab5c2ff
commit fce3e24600
3 changed files with 63 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
core/src/components/content/content.scss
View File

@ -130,7 +130,7 @@
height: 100%;
opacity: 0;
pointer-events: none;
}
@ -164,3 +164,11 @@
background-repeat: repeat-y;
background-size: 10px 16px;
}
// Content: Fixed
// --------------------------------------------------
::slotted([slot="fixed"]) {
position: absolute;
}

10
core/src/components/content/test/fixed/e2e.ts Normal file
View File

@ -0,0 +1,10 @@
import { newE2EPage } from '@stencil/core/testing';
test('content: fixed', async () => {
const page = await newE2EPage({
url: '/src/components/content/test/fixed?ionic:_testing=true'
});
const compare = await page.compareScreenshot();
expect(compare).toMatchScreenshot();
});

44
core/src/components/content/test/fixed/index.html Normal file
View File

@ -0,0 +1,44 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Content - Fixed</title>
<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="../../../../../scripts/testing/styles.css" rel="stylesheet">
<script src="../../../../../scripts/testing/scripts.js"></script>
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
<body>
<ion-app>
<ion-header id="header">
<ion-toolbar>
<ion-title>Content - Fixed</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<h1>Regular Content</h1>
<div slot="fixed">
<h1>Fixed content</h1>
<p>Fixed paragraph</p>
<ion-button>Button</ion-button>
</div>
<ion-fab vertical="top" horizontal="end" slot="fixed">
<ion-fab-button>
<ion-icon name="add"></ion-icon>
</ion-fab-button>
</ion-fab>
<ion-fab vertical="bottom" horizontal="start" slot="fixed">
<ion-fab-button color="tertiary">
<ion-icon name="star"></ion-icon>
</ion-fab-button>
</ion-fab>
</ion-content>
</ion-app>
</body>
</html>