javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +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

49
core/src/components/checkbox/readme.md
View File

@@ -153,6 +153,55 @@ export const CheckboxExamples: React.FC = () => {
```
### Stencil
```tsx
import { Component, h } from '@stencil/core';
@Component({
tag: 'checkbox-example',
styleUrl: 'checkbox-example.css'
})
export class CheckboxExample {
private form = [
{ val: 'Pepperoni', isChecked: true },
{ val: 'Sausage', isChecked: false },
{ val: 'Mushroom', isChecked: false }
];
render() {
return [
// Default Checkbox
<ion-checkbox></ion-checkbox>,
// Disabled Checkbox
<ion-checkbox disabled={true}></ion-checkbox>,
// Checked Checkbox
<ion-checkbox checked={true}></ion-checkbox>,
// Checkbox Colors
<ion-checkbox color="primary"></ion-checkbox>,
<ion-checkbox color="secondary"></ion-checkbox>,
<ion-checkbox color="danger"></ion-checkbox>,
<ion-checkbox color="light"></ion-checkbox>,
<ion-checkbox color="dark"></ion-checkbox>,
// Checkboxes in a List
<ion-list>
{this.form.map(entry =>
<ion-item>
<ion-label>{entry.val}</ion-label>
<ion-checkbox slot="end" checked={entry.isChecked}></ion-checkbox>
</ion-item>
)}
</ion-list>
];
}
}
```
### Vue
```html

45
core/src/components/checkbox/usage/stencil.md Normal file
View File

@@ -0,0 +1,45 @@
```tsx
import { Component, h } from '@stencil/core';
@Component({
tag: 'checkbox-example',
styleUrl: 'checkbox-example.css'
})
export class CheckboxExample {
private form = [
{ val: 'Pepperoni', isChecked: true },
{ val: 'Sausage', isChecked: false },
{ val: 'Mushroom', isChecked: false }
];
render() {
return [
// Default Checkbox
<ion-checkbox></ion-checkbox>,
// Disabled Checkbox
<ion-checkbox disabled={true}></ion-checkbox>,
// Checked Checkbox
<ion-checkbox checked={true}></ion-checkbox>,
// Checkbox Colors
<ion-checkbox color="primary"></ion-checkbox>,
<ion-checkbox color="secondary"></ion-checkbox>,
<ion-checkbox color="danger"></ion-checkbox>,
<ion-checkbox color="light"></ion-checkbox>,
<ion-checkbox color="dark"></ion-checkbox>,
// Checkboxes in a List
<ion-list>
{this.form.map(entry =>
<ion-item>
<ion-label>{entry.val}</ion-label>
<ion-checkbox slot="end" checked={entry.isChecked}></ion-checkbox>
</ion-item>
)}
</ion-list>
];
}
}
```