javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

Cleaner slides

Browse Source
This commit is contained in:
Max Lynch
2015-07-14 16:07:02 -05:00
parent e231579c6e
commit 915358f151
2 changed files with 20 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
ionic/components/app/test/sink/pages/slides.ts
View File

@@ -16,12 +16,12 @@ import {SinkPage} from '../sink-page';
Slides are perfect for making image slideshows,
swipe tutorials, or document viewers.
</p>
<ion-slides style="left: -15px; right: -15px; height: 100px">
<ion-slide style="background-color: blue">
<h2>Page 1</h2>
<ion-slides style="height: 300px">
<ion-slide style="background-color: #387ef5">
<h2 style="color: #fff">Page 1</h2>
</ion-slide>
<ion-slide style="background-color: yellow">
<h2>Page 2</h2>
<ion-slide style="background-color: rgb(245, 255, 96)">
<h2 style="color: #222;"">Page 2</h2>
</ion-slide>
<ion-slide style="background-color: pink">
<h2>Page 3</h2>
@@ -29,13 +29,26 @@ import {SinkPage} from '../sink-page';
<ion-slide style="background-color: red">
<h2>Page 4</h2>
</ion-slide>
<ion-slide style="background-color: cyan">
<ion-slide style="background-color: rgb(1, 157, 157)">
<h2>Page 5</h2>
</ion-slide>
<ion-pager>
</ion-pager>
</ion-slides>
</ion-content>
<style>
.slide {
display: flex !important;
align-items: center;
justify-content: center;
}
.slide h2 {
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 16px;
}
</style>
`
})
export class SlidePage extends SinkPage {

1
ionic/components/slides/slides.scss
View File

@@ -1,6 +1,7 @@
$z-index-slider-pager: 1 !default;
.slides {
display: block;
width: 100%;
height: 100%;
position: relative;