chore(slides): move slide to separate directory

This commit is contained in:
Adam Bradley
2017-11-28 18:19:58 -06:00
parent 459f610f0b
commit daa2a453da
8 changed files with 243 additions and 58 deletions

View File

@ -1,10 +1,212 @@
# ion-slide
# ion-slides
The Slides component is a multi-section container. Each section can be swiped
or dragged between. It contains any number of [Slide](../Slide) components.
```
Adopted from Swiper.js:
The most modern mobile touch slider and framework with
hardware accelerated transitions.
http://www.idangero.us/swiper/
Copyright 2016, Vladimir Kharlampidi
The iDangero.us
http://www.idangero.us/
Licensed under MIT
```
<!-- Auto Generated Below -->
## Properties
#### autoplay
number
#### control
any
#### direction
any
#### effect
string
#### initialSlide
number
#### keyboardControl
boolean
#### loop
boolean
#### pager
boolean
#### paginationType
string
#### parallax
boolean
#### slidesPerView
any
#### spaceBetween
number
#### speed
number
#### zoom
boolean
## Attributes
#### autoplay
number
#### control
any
#### direction
any
#### effect
string
#### initialSlide
number
#### keyboardControl
boolean
#### loop
boolean
#### pager
boolean
#### paginationType
string
#### parallax
boolean
#### slidesPerView
any
#### spaceBetween
number
#### speed
number
#### zoom
boolean
## Events
#### ionSlideDidChange
#### ionSlideDrag
#### ionSlideNextEnd
#### ionSlideNextStart
#### ionSlidePrevEnd
#### ionSlidePrevStart
#### ionSlideReachEnd
#### ionSlideReachStart
#### ionSlideTouchEnd
#### ionSlideTouchStart
#### ionSlideTransitionEnd
#### ionSlideTransitionStart
#### ionSlideWillChange
----------------------------------------------

View File

@ -1,48 +0,0 @@
@import "../../themes/ionic.globals";
// Slide
// --------------------------------------------------
ion-slide {
display: block;
width: 100%;
height: 100%;
}
.slide-zoom {
@include text-align(center);
display: block;
width: 100%;
}
.swiper-slide {
@include text-align(center);
position: relative;
// Center slide text vertically
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-size: 18px;
box-sizing: border-box;
}
.swiper-slide img {
width: auto;
max-width: 100%;
height: auto;
max-height: 100%;
}

View File

@ -1,34 +0,0 @@
import { Component } from '@stencil/core';
/**
* @name Slide
* @description
* The Slide component is a child component of [Slides](../Slides). The template
* should be written as `ion-slide`. Any slide content should be written
* in this component and it should be used in conjunction with [Slides](../Slides).
*
* See the [Slides API Docs](../Slides) for more usage information.
*
* @demo /docs/demos/src/slides/
* @see {@link /docs/api/components/slides/Slides/ Slides API Docs}
*/
@Component({
tag: 'ion-slide',
styleUrl: 'slide.scss'
})
export class Slide {
hostData() {
return {
class: {
'slide-zoom': true,
'swiper-slide': true
}
};
}
render() {
return <slot></slot>;
}
}

View File

@ -2,27 +2,6 @@ import { Component, Element, Event, EventEmitter, Prop } from '@stencil/core';
import { Swiper } from './vendor/swiper';
/**
* @name Slides
* @description
* The Slides component is a multi-section container. Each section can be swiped
* or dragged between. It contains any number of [Slide](../Slide) components.
*
*
* Adopted from Swiper.js:
* The most modern mobile touch slider and framework with
* hardware accelerated transitions.
*
* http://www.idangero.us/swiper/
*
* Copyright 2016, Vladimir Kharlampidi
* The iDangero.us
* http://www.idangero.us/
*
* Licensed under MIT
*/
@Component({
tag: 'ion-slides',
styleUrl: 'slides.scss',