mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-23 14:01:20 +08:00
chore(slides): move slide to separate directory
This commit is contained in:
@ -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
|
||||
|
||||
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
|
@ -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%;
|
||||
}
|
@ -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>;
|
||||
}
|
||||
}
|
@ -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',
|
||||
|
Reference in New Issue
Block a user