From daa2a453daa05eb8592e5dd7022f372fbe713e53 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Tue, 28 Nov 2017 18:19:58 -0600 Subject: [PATCH] chore(slides): move slide to separate directory --- packages/core/src/components.d.ts | 2 +- packages/core/src/components/slide/readme.md | 16 ++ .../components/{slides => slide}/slide.scss | 0 packages/core/src/components/slide/slide.tsx | 22 ++ packages/core/src/components/slides/readme.md | 204 +++++++++++++++++- packages/core/src/components/slides/slide.tsx | 34 --- .../core/src/components/slides/slides.tsx | 21 -- packages/core/src/index.d.ts | 2 +- 8 files changed, 243 insertions(+), 58 deletions(-) create mode 100644 packages/core/src/components/slide/readme.md rename packages/core/src/components/{slides => slide}/slide.scss (100%) create mode 100644 packages/core/src/components/slide/slide.tsx delete mode 100644 packages/core/src/components/slides/slide.tsx diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts index aef6c76549..e6e9c64de6 100644 --- a/packages/core/src/components.d.ts +++ b/packages/core/src/components.d.ts @@ -2785,7 +2785,7 @@ declare global { import { Slide as IonSlide -} from './components/slides/slide'; +} from './components/slide/slide'; declare global { interface HTMLIonSlideElement extends IonSlide, HTMLElement { diff --git a/packages/core/src/components/slide/readme.md b/packages/core/src/components/slide/readme.md new file mode 100644 index 0000000000..a690cf0066 --- /dev/null +++ b/packages/core/src/components/slide/readme.md @@ -0,0 +1,16 @@ +# ion-slide + +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. + + + + + + +---------------------------------------------- + +*Built by [StencilJS](https://stenciljs.com/)* diff --git a/packages/core/src/components/slides/slide.scss b/packages/core/src/components/slide/slide.scss similarity index 100% rename from packages/core/src/components/slides/slide.scss rename to packages/core/src/components/slide/slide.scss diff --git a/packages/core/src/components/slide/slide.tsx b/packages/core/src/components/slide/slide.tsx new file mode 100644 index 0000000000..85b62e33e4 --- /dev/null +++ b/packages/core/src/components/slide/slide.tsx @@ -0,0 +1,22 @@ +import { Component } from '@stencil/core'; + + +@Component({ + tag: 'ion-slide', + styleUrl: 'slide.scss' +}) +export class Slide { + + hostData() { + return { + class: { + 'slide-zoom': true, + 'swiper-slide': true + } + }; + } + + render() { + return ; + } +} diff --git a/packages/core/src/components/slides/readme.md b/packages/core/src/components/slides/readme.md index b6db5f74cf..39d05df961 100644 --- a/packages/core/src/components/slides/readme.md +++ b/packages/core/src/components/slides/readme.md @@ -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 +``` +## 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 + + ---------------------------------------------- diff --git a/packages/core/src/components/slides/slide.tsx b/packages/core/src/components/slides/slide.tsx deleted file mode 100644 index 5448a2f378..0000000000 --- a/packages/core/src/components/slides/slide.tsx +++ /dev/null @@ -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 ; - } -} diff --git a/packages/core/src/components/slides/slides.tsx b/packages/core/src/components/slides/slides.tsx index 3c7799c835..97fcfa87c1 100644 --- a/packages/core/src/components/slides/slides.tsx +++ b/packages/core/src/components/slides/slides.tsx @@ -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', diff --git a/packages/core/src/index.d.ts b/packages/core/src/index.d.ts index 88b78f7cf0..3819052b20 100644 --- a/packages/core/src/index.d.ts +++ b/packages/core/src/index.d.ts @@ -129,7 +129,7 @@ export { SelectPopoverOption, SelectPopover } from './components/select/select-p export { Select } from './components/select/select'; export { SelectOption } from './components/select-option/select-option'; export { SkeletonText } from './components/skeleton-text/skeleton-text'; -export { Slide } from './components/slides/slide'; +export { Slide } from './components/slide/slide'; export { Slides } from './components/slides/slides'; export * from './components/spinner/spinner-configs'; export { Spinner } from './components/spinner/spinner';