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

70
core/src/components/label/readme.md
View File

@ -131,6 +131,76 @@ export const LabelExample: React.FC = () => (
```
### Stencil
```tsx
import { Component, h } from '@stencil/core';
@Component({
tag: 'label-example',
styleUrl: 'label-example.css'
})
export class LabelExample {
render() {
return [
// Default Label
<ion-label>Label</ion-label>,
// Label Colors
<ion-label color="primary">Primary Label</ion-label>,
<ion-label color="secondary">Secondary Label</ion-label>,
<ion-label color="danger">Danger Label</ion-label>,
<ion-label color="light">Light Label</ion-label>,
<ion-label color="dark">Dark Label</ion-label>,
// Item Labels
<ion-item>
<ion-label>Default Item</ion-label>
</ion-item>,
<ion-item>
<ion-label class="ion-text-wrap">
Multi-line text that should wrap when it is too long
to fit on one line in the item.
</ion-label>
</ion-item>,
// Input Labels
<ion-item>
<ion-label>Default Input</ion-label>
<ion-input></ion-input>
</ion-item>,
<ion-item>
<ion-label position="fixed">Fixed</ion-label>
<ion-input></ion-input>
</ion-item>,
<ion-item>
<ion-label position="floating">Floating</ion-label>
<ion-input></ion-input>
</ion-item>,
<ion-item>
<ion-label position="stacked">Stacked</ion-label>
<ion-input></ion-input>
</ion-item>,
<ion-item>
<ion-label>Toggle</ion-label>
<ion-toggle slot="end" checked={true}></ion-toggle>
</ion-item>,
<ion-item>
<ion-checkbox slot="start" checked={true}></ion-checkbox>
<ion-label>Checkbox</ion-label>
</ion-item>
];
}
}
```
### Vue
```html

66
core/src/components/label/usage/stencil.md Normal file
View File

@ -0,0 +1,66 @@
```tsx
import { Component, h } from '@stencil/core';
@Component({
tag: 'label-example',
styleUrl: 'label-example.css'
})
export class LabelExample {
render() {
return [
// Default Label
<ion-label>Label</ion-label>,
// Label Colors
<ion-label color="primary">Primary Label</ion-label>,
<ion-label color="secondary">Secondary Label</ion-label>,
<ion-label color="danger">Danger Label</ion-label>,
<ion-label color="light">Light Label</ion-label>,
<ion-label color="dark">Dark Label</ion-label>,
// Item Labels
<ion-item>
<ion-label>Default Item</ion-label>
</ion-item>,
<ion-item>
<ion-label class="ion-text-wrap">
Multi-line text that should wrap when it is too long
to fit on one line in the item.
</ion-label>
</ion-item>,
// Input Labels
<ion-item>
<ion-label>Default Input</ion-label>
<ion-input></ion-input>
</ion-item>,
<ion-item>
<ion-label position="fixed">Fixed</ion-label>
<ion-input></ion-input>
</ion-item>,
<ion-item>
<ion-label position="floating">Floating</ion-label>
<ion-input></ion-input>
</ion-item>,
<ion-item>
<ion-label position="stacked">Stacked</ion-label>
<ion-input></ion-input>
</ion-item>,
<ion-item>
<ion-label>Toggle</ion-label>
<ion-toggle slot="end" checked={true}></ion-toggle>
</ion-item>,
<ion-item>
<ion-checkbox slot="start" checked={true}></ion-checkbox>
<ion-label>Checkbox</ion-label>
</ion-item>
];
}
}
```