javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-22 21:48:42 +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

66
core/src/components/button/readme.md
View File

@ -155,6 +155,72 @@ export const ButtonExample: React.FC = () => (
```
### Stencil
```tsx
import { Component, h } from '@stencil/core';
@Component({
tag: 'button-example',
styleUrl: 'button-example.css'
})
export class ButtonExample {
render() {
return [
// Default
<ion-button>Default</ion-button>,
// Anchor
<ion-button href="#">Anchor</ion-button>,
// Colors
<ion-button color="primary">Primary</ion-button>,
<ion-button color="secondary">Secondary</ion-button>,
<ion-button color="tertiary">Tertiary</ion-button>,
<ion-button color="success">Success</ion-button>,
<ion-button color="warning">Warning</ion-button>,
<ion-button color="danger">Danger</ion-button>,
<ion-button color="light">Light</ion-button>,
<ion-button color="medium">Medium</ion-button>,
<ion-button color="dark">Dark</ion-button>,
// Expand
<ion-button expand="full">Full Button</ion-button>,
<ion-button expand="block">Block Button</ion-button>,
// Round
<ion-button shape="round">Round Button</ion-button>,
// Fill
<ion-button expand="full" fill="outline">Outline + Full</ion-button>,
<ion-button expand="block" fill="outline">Outline + Block</ion-button>,
<ion-button shape="round" fill="outline">Outline + Round</ion-button>,
// Icons
<ion-button>
<ion-icon slot="start" name="star"></ion-icon>
Left Icon
</ion-button>,
<ion-button>
Right Icon
<ion-icon slot="end" name="star"></ion-icon>
</ion-button>,
<ion-button>
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>,
// Sizes
<ion-button size="large">Large</ion-button>,
<ion-button>Default</ion-button>,
<ion-button size="small">Small</ion-button>
];
}
}
```
### Vue
```html

62
core/src/components/button/usage/stencil.md Normal file
View File

@ -0,0 +1,62 @@
```tsx
import { Component, h } from '@stencil/core';
@Component({
tag: 'button-example',
styleUrl: 'button-example.css'
})
export class ButtonExample {
render() {
return [
// Default
<ion-button>Default</ion-button>,
// Anchor
<ion-button href="#">Anchor</ion-button>,
// Colors
<ion-button color="primary">Primary</ion-button>,
<ion-button color="secondary">Secondary</ion-button>,
<ion-button color="tertiary">Tertiary</ion-button>,
<ion-button color="success">Success</ion-button>,
<ion-button color="warning">Warning</ion-button>,
<ion-button color="danger">Danger</ion-button>,
<ion-button color="light">Light</ion-button>,
<ion-button color="medium">Medium</ion-button>,
<ion-button color="dark">Dark</ion-button>,
// Expand
<ion-button expand="full">Full Button</ion-button>,
<ion-button expand="block">Block Button</ion-button>,
// Round
<ion-button shape="round">Round Button</ion-button>,
// Fill
<ion-button expand="full" fill="outline">Outline + Full</ion-button>,
<ion-button expand="block" fill="outline">Outline + Block</ion-button>,
<ion-button shape="round" fill="outline">Outline + Round</ion-button>,
// Icons
<ion-button>
<ion-icon slot="start" name="star"></ion-icon>
Left Icon
</ion-button>,
<ion-button>
Right Icon
<ion-icon slot="end" name="star"></ion-icon>
</ion-button>,
<ion-button>
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>,
// Sizes
<ion-button size="large">Large</ion-button>,
<ion-button>Default</ion-button>,
<ion-button size="small">Small</ion-button>
];
}
}
```