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

69
core/src/components/back-button/readme.md
View File

@ -173,6 +173,75 @@ export const BackButtonExample: React.FC = () => (
```
### Stencil
```tsx
import { Component, h } from '@stencil/core';
@Component({
tag: 'back-button-example',
styleUrl: 'back-button-example.css'
})
export class BackButtonExample {
render() {
const buttonText = "Custom";
const buttonIcon = "add";
return [
// Default back button
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
</ion-toolbar>
</ion-header>,
// Back button with a default href
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button defaultHref="home"></ion-back-button>
</ion-buttons>
</ion-toolbar>
</ion-header>,
// Back button with custom text and icon
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button
text={buttonText}
icon={buttonIcon}>
</ion-back-button>
</ion-buttons>
</ion-toolbar>
</ion-header>,
// Back button with no text and custom icon
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button text="" icon="add"></ion-back-button>
</ion-buttons>
</ion-toolbar>
</ion-header>,
// Danger back button next to a menu button
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
<ion-back-button color="danger"></ion-back-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
];
}
}
```
### Vue
```html

65
core/src/components/back-button/usage/stencil.md Normal file
View File

@ -0,0 +1,65 @@
```tsx
import { Component, h } from '@stencil/core';
@Component({
tag: 'back-button-example',
styleUrl: 'back-button-example.css'
})
export class BackButtonExample {
render() {
const buttonText = "Custom";
const buttonIcon = "add";
return [
// Default back button
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
</ion-toolbar>
</ion-header>,
// Back button with a default href
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button defaultHref="home"></ion-back-button>
</ion-buttons>
</ion-toolbar>
</ion-header>,
// Back button with custom text and icon
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button
text={buttonText}
icon={buttonIcon}>
</ion-back-button>
</ion-buttons>
</ion-toolbar>
</ion-header>,
// Back button with no text and custom icon
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button text="" icon="add"></ion-back-button>
</ion-buttons>
</ion-toolbar>
</ion-header>,
// Danger back button next to a menu button
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
<ion-back-button color="danger"></ion-back-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
];
}
}
```