javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-10 00:27:41 +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 11193 additions and 883 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
core/src/components/badge/readme.md
View File

@ -67,6 +67,44 @@ export const BadgeExample: React.FC = () => (
```
### Stencil
```tsx
import { Component, h } from '@stencil/core';
@Component({
tag: 'badge-example',
styleUrl: 'badge-example.css'
})
export class BadgeExample {
render() {
return [
// Default
<ion-badge>99</ion-badge>,
// Colors
<ion-badge color="primary">11</ion-badge>,
<ion-badge color="secondary">22</ion-badge>,
<ion-badge color="tertiary">33</ion-badge>,
<ion-badge color="success">44</ion-badge>,
<ion-badge color="warning">55</ion-badge>,
<ion-badge color="danger">66</ion-badge>,
<ion-badge color="light">77</ion-badge>,
<ion-badge color="medium">88</ion-badge>,
<ion-badge color="dark">99</ion-badge>,
// Item with badge on left and right
<ion-item>
<ion-badge slot="start">11</ion-badge>
<ion-label>My Item</ion-label>
<ion-badge slot="end">22</ion-badge>
</ion-item>
];
}
}
```
### Vue
```html

34
core/src/components/badge/usage/stencil.md Normal file
View File

@ -0,0 +1,34 @@
```tsx
import { Component, h } from '@stencil/core';
@Component({
tag: 'badge-example',
styleUrl: 'badge-example.css'
})
export class BadgeExample {
render() {
return [
// Default
<ion-badge>99</ion-badge>,
// Colors
<ion-badge color="primary">11</ion-badge>,
<ion-badge color="secondary">22</ion-badge>,
<ion-badge color="tertiary">33</ion-badge>,
<ion-badge color="success">44</ion-badge>,
<ion-badge color="warning">55</ion-badge>,
<ion-badge color="danger">66</ion-badge>,
<ion-badge color="light">77</ion-badge>,
<ion-badge color="medium">88</ion-badge>,
<ion-badge color="dark">99</ion-badge>,
// Item with badge on left and right
<ion-item>
<ion-badge slot="start">11</ion-badge>
<ion-label>My Item</ion-label>
<ion-badge slot="end">22</ion-badge>
</ion-item>
];
}
}
```