javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 04:14:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(stencil): add stencil usage to components (#21261)

Browse Source
This commit is contained in:
Brandy Carney
2020-05-12 20:35:48 -04:00
committed by GitHub
parent 703ef5c992
commit 687122127c
177 changed files with 11207 additions and 897 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
core/src/components/slides/readme.md
View File

@ -442,21 +442,24 @@ import { Component } from '@angular/core';
@Component({
selector: 'slides-example',
template: `
<ion-slides pager="true" [options]="slideOpts">
<ion-slide>
<h1>Slide 1</h1>
</ion-slide>
<ion-slide>
<h1>Slide 2</h1>
</ion-slide>
<ion-slide>
<h1>Slide 3</h1>
</ion-slide>
</ion-slides>
<ion-content>
<ion-slides pager="true" [options]="slideOpts">
<ion-slide>
<h1>Slide 1</h1>
</ion-slide>
<ion-slide>
<h1>Slide 2</h1>
</ion-slide>
<ion-slide>
<h1>Slide 3</h1>
</ion-slide>
</ion-slides>
</ion-content>
`
})
export class SlideExample {
// Optional parameters to pass to the swiper instance. See http://idangero.us/swiper/api/ for valid options.
// Optional parameters to pass to the swiper instance.
// See http://idangero.us/swiper/api/ for valid options.
slideOpts = {
initialSlide: 1,
speed: 400
@ -465,12 +468,19 @@ export class SlideExample {
}
```
```css
/* Without setting height the slides will take up the height of the slide's content */
ion-slides {
height: 100%;
}
```
### Javascript
```html
<ion-content>
<ion-slides pager="true">
<ion-slide>
<h1>Slide 1</h1>
</ion-slide>
@ -483,18 +493,27 @@ export class SlideExample {
<h1>Slide 3</h1>
</ion-slide>
</ion-slides>
</ion-content>
```
```javascript
var slides = document.querySelector('ion-slides');
// Optional parameters to pass to the swiper instance. See http://idangero.us/swiper/api/ for valid options.
// Optional parameters to pass to the swiper instance.
// See http://idangero.us/swiper/api/ for valid options.
slides.options = {
initialSlide: 1,
speed: 400
}
```
```css
/* Without setting height the slides will take up the height of the slide's content */
ion-slides {
height: 100%;
}
```
### React
@ -502,7 +521,8 @@ slides.options = {
import React from 'react';
import { IonSlides, IonSlide, IonContent } from '@ionic/react';
// Optional parameters to pass to the swiper instance. See http://idangero.us/swiper/api/ for valid options.
// Optional parameters to pass to the swiper instance.
// See http://idangero.us/swiper/api/ for valid options.
const slideOpts = {
initialSlide: 1,
speed: 400
@ -525,6 +545,60 @@ export const SlidesExample: React.FC = () => (
);
```
```css
/* Without setting height the slides will take up the height of the slide's content */
ion-slides {
height: 100%;
}
```
### Stencil
```tsx
import { Component, h } from '@stencil/core';
@Component({
tag: 'slides-example',
styleUrl: 'slides-example.css'
})
export class SlidesExample {
// Optional parameters to pass to the swiper instance.
// See http://idangero.us/swiper/api/ for valid options.
private slideOpts = {
initialSlide: 1,
speed: 400
};
render() {
return [
<ion-content>
<ion-slides pager={true} options={this.slideOpts}>
<ion-slide>
<h1>Slide 1</h1>
</ion-slide>
<ion-slide>
<h1>Slide 2</h1>
</ion-slide>
<ion-slide>
<h1>Slide 3</h1>
</ion-slide>
</ion-slides>
</ion-content>
];
}
}
```
```css
/* Without setting height the slides will take up the height of the slide's content */
ion-slides {
height: 100%;
}
```
### Vue

34
core/src/components/slides/usage/angular.md
View File

@ -4,21 +4,24 @@ import { Component } from '@angular/core';
@Component({
selector: 'slides-example',
template: `
<ion-slides pager="true" [options]="slideOpts">
<ion-slide>
<h1>Slide 1</h1>
</ion-slide>
<ion-slide>
<h1>Slide 2</h1>
</ion-slide>
<ion-slide>
<h1>Slide 3</h1>
</ion-slide>
</ion-slides>
<ion-content>
<ion-slides pager="true" [options]="slideOpts">
<ion-slide>
<h1>Slide 1</h1>
</ion-slide>
<ion-slide>
<h1>Slide 2</h1>
</ion-slide>
<ion-slide>
<h1>Slide 3</h1>
</ion-slide>
</ion-slides>
</ion-content>
`
})
export class SlideExample {
// Optional parameters to pass to the swiper instance. See http://idangero.us/swiper/api/ for valid options.
// Optional parameters to pass to the swiper instance.
// See http://idangero.us/swiper/api/ for valid options.
slideOpts = {
initialSlide: 1,
speed: 400
@ -26,3 +29,10 @@ export class SlideExample {
constructor() {}
}
```
```css
/* Without setting height the slides will take up the height of the slide's content */
ion-slides {
height: 100%;
}
```

13
core/src/components/slides/usage/javascript.md
View File

@ -1,6 +1,6 @@
```html
<ion-content>
<ion-slides pager="true">
<ion-slide>
<h1>Slide 1</h1>
</ion-slide>
@ -13,14 +13,23 @@
<h1>Slide 3</h1>
</ion-slide>
</ion-slides>
</ion-content>
```
```javascript
var slides = document.querySelector('ion-slides');
// Optional parameters to pass to the swiper instance. See http://idangero.us/swiper/api/ for valid options.
// Optional parameters to pass to the swiper instance.
// See http://idangero.us/swiper/api/ for valid options.
slides.options = {
initialSlide: 1,
speed: 400
}
```
```css
/* Without setting height the slides will take up the height of the slide's content */
ion-slides {
height: 100%;
}
```

10
core/src/components/slides/usage/react.md
View File

@ -2,7 +2,8 @@
import React from 'react';
import { IonSlides, IonSlide, IonContent } from '@ionic/react';
// Optional parameters to pass to the swiper instance. See http://idangero.us/swiper/api/ for valid options.
// Optional parameters to pass to the swiper instance.
// See http://idangero.us/swiper/api/ for valid options.
const slideOpts = {
initialSlide: 1,
speed: 400
@ -24,3 +25,10 @@ export const SlidesExample: React.FC = () => (
</IonContent>
);
```
```css
/* Without setting height the slides will take up the height of the slide's content */
ion-slides {
height: 100%;
}
```

43
core/src/components/slides/usage/stencil.md Normal file
View File

@ -0,0 +1,43 @@
```tsx
import { Component, h } from '@stencil/core';
@Component({
tag: 'slides-example',
styleUrl: 'slides-example.css'
})
export class SlidesExample {
// Optional parameters to pass to the swiper instance.
// See http://idangero.us/swiper/api/ for valid options.
private slideOpts = {
initialSlide: 1,
speed: 400
};
render() {
return [
<ion-content>
<ion-slides pager={true} options={this.slideOpts}>
<ion-slide>
<h1>Slide 1</h1>
</ion-slide>
<ion-slide>
<h1>Slide 2</h1>
</ion-slide>
<ion-slide>
<h1>Slide 3</h1>
</ion-slide>
</ion-slides>
</ion-content>
];
}
}
```
```css
/* Without setting height the slides will take up the height of the slide's content */
ion-slides {
height: 100%;
}
```