mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 04:14:21 +08:00
fix(slides): set height to 100% for vertical slides (#20603)
fixes #17341
This commit is contained in:
@ -21,6 +21,9 @@
|
|||||||
.swiper-container-no-flexbox .swiper-slide {
|
.swiper-container-no-flexbox .swiper-slide {
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
|
.swiper-container-vertical {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
.swiper-container-vertical > .swiper-wrapper {
|
.swiper-container-vertical > .swiper-wrapper {
|
||||||
-webkit-box-orient: vertical;
|
-webkit-box-orient: vertical;
|
||||||
-webkit-box-direction: normal;
|
-webkit-box-direction: normal;
|
||||||
|
10
core/src/components/slides/test/vertical/e2e.ts
Normal file
10
core/src/components/slides/test/vertical/e2e.ts
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
import { newE2EPage } from '@stencil/core/testing';
|
||||||
|
|
||||||
|
test('slides: vertical', async () => {
|
||||||
|
const page = await newE2EPage({
|
||||||
|
url: '/src/components/slides/test/vertical?ionic:_testing=true'
|
||||||
|
});
|
||||||
|
|
||||||
|
const compare = await page.compareScreenshot();
|
||||||
|
expect(compare).toMatchScreenshot();
|
||||||
|
});
|
50
core/src/components/slides/test/vertical/index.html
Normal file
50
core/src/components/slides/test/vertical/index.html
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html dir="ltr">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Slides - Vertical</title>
|
||||||
|
|
||||||
|
<meta name="viewport" content="viewport-fit=cover, 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-content id="content">
|
||||||
|
<ion-slides pager>
|
||||||
|
<ion-slide style="background: #24a5a3; color: white;">
|
||||||
|
<h1>Slide 1</h1>
|
||||||
|
</ion-slide>
|
||||||
|
<ion-slide style="background: #a52466; color: white;">
|
||||||
|
<h1>Slide 2</h1>
|
||||||
|
</ion-slide>
|
||||||
|
<ion-slide style="background: #24a562; color: white;">
|
||||||
|
<h1>Slide 3</h1>
|
||||||
|
</ion-slide>
|
||||||
|
</ion-slides>
|
||||||
|
</ion-content>
|
||||||
|
|
||||||
|
</ion-app>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const slides = document.querySelector('ion-slides');
|
||||||
|
|
||||||
|
slides.options = {
|
||||||
|
direction: 'vertical'
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* Important is required due to slides being scoped */
|
||||||
|
ion-slides {
|
||||||
|
--bullet-background-active: white !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
Reference in New Issue
Block a user