javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 11:17:19 +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

61
core/src/components/toggle/readme.md
View File

@ -307,6 +307,67 @@ export const ToggleExamples: React.FC = () => {
```
### Stencil
```tsx
import { Component, State, h } from '@stencil/core';
@Component({
tag: 'toggle-example',
styleUrl: 'toggle-example.css'
})
export class ToggleExample {
@State() pepperoni: boolean = false;
@State() sausage: boolean = true;
@State() mushrooms: boolean = false;
render() {
return [
// Default Toggle
<ion-toggle></ion-toggle>,
// Disabled Toggle
<ion-toggle disabled></ion-toggle>,
// Checked Toggle
<ion-toggle checked></ion-toggle>,
// Toggle Colors
<ion-toggle color="primary"></ion-toggle>,
<ion-toggle color="secondary"></ion-toggle>,
<ion-toggle color="danger"></ion-toggle>,
<ion-toggle color="light"></ion-toggle>,
<ion-toggle color="dark"></ion-toggle>,
// Toggles in a List
<ion-list>
<ion-item>
<ion-label>Pepperoni</ion-label>
<ion-toggle checked={this.pepperoni} onIonChange={(ev) => this.pepperoni = ev.detail.checked}></ion-toggle>
</ion-item>
<ion-item>
<ion-label>Sausage</ion-label>
<ion-toggle checked={this.sausage} onIonChange={(ev) => this.sausage = ev.detail.checked} disabled={true}></ion-toggle>
</ion-item>
<ion-item>
<ion-label>Mushrooms</ion-label>
<ion-toggle checked={this.mushrooms} onIonChange={(ev) => this.mushrooms = ev.detail.checked}></ion-toggle>
</ion-item>
</ion-list>,
<div>
Pepperoni: {this.pepperoni ? "true" : "false"}<br/>
Sausage: {this.sausage ? "true" : "false"}<br/>
Mushrooms: {this.mushrooms ? "true" : "false"}
</div>
];
}
}
```
### Vue
```html

57
core/src/components/toggle/usage/stencil.md Normal file
View File

@ -0,0 +1,57 @@
```tsx
import { Component, State, h } from '@stencil/core';
@Component({
tag: 'toggle-example',
styleUrl: 'toggle-example.css'
})
export class ToggleExample {
@State() pepperoni: boolean = false;
@State() sausage: boolean = true;
@State() mushrooms: boolean = false;
render() {
return [
// Default Toggle
<ion-toggle></ion-toggle>,
// Disabled Toggle
<ion-toggle disabled></ion-toggle>,
// Checked Toggle
<ion-toggle checked></ion-toggle>,
// Toggle Colors
<ion-toggle color="primary"></ion-toggle>,
<ion-toggle color="secondary"></ion-toggle>,
<ion-toggle color="danger"></ion-toggle>,
<ion-toggle color="light"></ion-toggle>,
<ion-toggle color="dark"></ion-toggle>,
// Toggles in a List
<ion-list>
<ion-item>
<ion-label>Pepperoni</ion-label>
<ion-toggle checked={this.pepperoni} onIonChange={(ev) => this.pepperoni = ev.detail.checked}></ion-toggle>
</ion-item>
<ion-item>
<ion-label>Sausage</ion-label>
<ion-toggle checked={this.sausage} onIonChange={(ev) => this.sausage = ev.detail.checked} disabled={true}></ion-toggle>
</ion-item>
<ion-item>
<ion-label>Mushrooms</ion-label>
<ion-toggle checked={this.mushrooms} onIonChange={(ev) => this.mushrooms = ev.detail.checked}></ion-toggle>
</ion-item>
</ion-list>,
<div>
Pepperoni: {this.pepperoni ? "true" : "false"}<br/>
Sausage: {this.sausage ? "true" : "false"}<br/>
Mushrooms: {this.mushrooms ? "true" : "false"}
</div>
];
}
}
```