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

docs(demos): add slider demo

Browse Source
This commit is contained in:
Drew Rygh
2015-10-01 13:44:57 -05:00
parent ec480b1fd9
commit 97b3e7c269
2 changed files with 47 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
demos/component-docs/app.css
View File

@@ -26,3 +26,30 @@ section.hidden {
.components-demo h4 {
text-align: center;
}
ion-scroll {
width: 100%;
height: 100%;
}
.demo-slide {
display: block;
height: 100%;
padding: 500px 0;
width: 100%;
font-weight: bold;
font-size: 2.5em;
color: #fff;
}
.demo-slide-1 {
background-color: #32db64;
}
.demo-slide-2 {
background-color: #387ef5;
}
.demo-slide-3 {
background-color: #f53d3d;
}

22
demos/component-docs/main.html
View File

@@ -244,8 +244,26 @@
<section id="navigation" [ng-class]="{hidden: component.title !== 'Navigation' }">
TODO
</section>
<section id="slides" [ng-class]="{hidden: component.title !== 'Slides' }">
TODO
<section id="slides" [ng-class]="{hidden: component.title !== 'Slides' }">
<ion-slides id="slider" style="background-color: black" pager="true" zoom="false" index="1" loop="true">
<ion-slide>
<div class="demo-slide demo-slide-1">
Slide 1
</div>
</ion-slide>
<ion-slide>
<div class="demo-slide demo-slide-2">
Slide 2
</div>
</ion-slide>
<ion-slide>
<div class="demo-slide demo-slide-3">
Slide 3
</div>
</ion-slide>
</ion-slides>
</section>
<section id="tabs" [ng-class]="{hidden: component.title !== 'Tabs' }">