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

40
core/src/components/note/readme.md
View File

@ -71,6 +71,46 @@ export const NoteExample: React.FC = () => (
```
### Stencil
```tsx
import { Component, h } from '@stencil/core';
@Component({
tag: 'note-example',
styleUrl: 'note-example.css'
})
export class NoteExample {
render() {
return [
// Default Note
<ion-note>Default Note</ion-note>,
// Note Colors
<ion-note color="primary">Primary Note</ion-note>,
<ion-note color="secondary">Secondary Note</ion-note>,
<ion-note color="danger">Danger Note</ion-note>,
<ion-note color="light">Light Note</ion-note>,
<ion-note color="dark">Dark Note</ion-note>,
// Notes in a List
<ion-list>
<ion-item>
<ion-label>Note (End)</ion-label>
<ion-note slot="end">On</ion-note>
</ion-item>
<ion-item>
<ion-note slot="start">Off</ion-note>
<ion-label>Note (Start)</ion-label>
</ion-item>
</ion-list>
];
}
}
```
### Vue
```html

36
core/src/components/note/usage/stencil.md Normal file
View File

@ -0,0 +1,36 @@
```tsx
import { Component, h } from '@stencil/core';
@Component({
tag: 'note-example',
styleUrl: 'note-example.css'
})
export class NoteExample {
render() {
return [
// Default Note
<ion-note>Default Note</ion-note>,
// Note Colors
<ion-note color="primary">Primary Note</ion-note>,
<ion-note color="secondary">Secondary Note</ion-note>,
<ion-note color="danger">Danger Note</ion-note>,
<ion-note color="light">Light Note</ion-note>,
<ion-note color="dark">Dark Note</ion-note>,
// Notes in a List
<ion-list>
<ion-item>
<ion-label>Note (End)</ion-label>
<ion-note slot="end">On</ion-note>
</ion-item>
<ion-item>
<ion-note slot="start">Off</ion-note>
<ion-label>Note (Start)</ion-label>
</ion-item>
</ion-list>
];
}
}
```