fix(slides): set height to 100% for vertical slides (#20603)

fixes #17341
This commit is contained in:
Brandy Carney
2020-02-26 12:06:37 -05:00
committed by GitHub
parent e3e5c69681
commit 20af652a1b
3 changed files with 63 additions and 0 deletions

View File

@ -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;

View 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();
});

View 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>