mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-09 16:16:41 +08:00
docs(stencil): add stencil usage to components (#21261)
This commit is contained in:
Brandy Carney
@ -125,16 +125,8 @@ The `<ion-buttons>` element can be positioned inside of the toolbar using a name
|
||||
|
||||
```tsx
|
||||
import React from 'react';
|
||||
import {
|
||||
IonButtons,
|
||||
IonToolbar,
|
||||
IonBackButton,
|
||||
IonTitle,
|
||||
IonButton,
|
||||
IonIcon,
|
||||
IonMenuButton,
|
||||
IonContent
|
||||
} from '@ionic/react';
|
||||
import { IonButtons, IonToolbar, IonBackButton, IonTitle, IonButton, IonIcon, IonMenuButton, IonContent } from '@ionic/react';
|
||||
import { personCircle, search, star, ellipsisHorizontal, ellipsisVertical } from 'ionicons/icons';
|
||||
|
||||
export const ButtonsExample: React.FC = () => (
|
||||
<IonContent>
|
||||
@ -148,16 +140,16 @@ export const ButtonsExample: React.FC = () => (
|
||||
<IonToolbar>
|
||||
<IonButtons slot="secondary">
|
||||
<IonButton>
|
||||
<IonIcon slot="icon-only" name="person-circle" />
|
||||
<IonIcon slot="icon-only" icon={personCircle} />
|
||||
</IonButton>
|
||||
<IonButton>
|
||||
<IonIcon slot="icon-only" name="search" />
|
||||
<IonIcon slot="icon-only" icon={search} />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
<IonTitle>Default Buttons</IonTitle>
|
||||
<IonButtons slot="primary">
|
||||
<IonButton color="secondary">
|
||||
<IonIcon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical" />
|
||||
<IonIcon slot="icon-only" ios={ellipsisHorizontal} md={ellipsisVertical} />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
</IonToolbar>
|
||||
@ -165,7 +157,7 @@ export const ButtonsExample: React.FC = () => (
|
||||
<IonToolbar>
|
||||
<IonButtons slot="primary">
|
||||
<IonButton onClick={() => {}}>
|
||||
<IonIcon slot="icon-only" name="star" />
|
||||
<IonIcon slot="icon-only" icon={star} />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
<IonTitle>Right side menu toggle</IonTitle>
|
||||
@ -177,7 +169,7 @@ export const ButtonsExample: React.FC = () => (
|
||||
<IonToolbar>
|
||||
<IonButtons collapse="true">
|
||||
<IonButton>
|
||||
<IonIcon slot="icon-only" name="star" />
|
||||
<IonIcon slot="icon-only" icon={star} />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
<IonTitle>Collapsible Buttons</IonTitle>
|
||||
@ -187,6 +179,73 @@ export const ButtonsExample: React.FC = () => (
|
||||
```
|
||||
|
||||
|
||||
### Stencil
|
||||
|
||||
```tsx
|
||||
import { Component, h } from '@stencil/core';
|
||||
|
||||
@Component({
|
||||
tag: 'buttons-example',
|
||||
styleUrl: 'buttons-example.css'
|
||||
})
|
||||
export class ButtonsExample {
|
||||
|
||||
clickedStar() {
|
||||
console.log("Clicked star button");
|
||||
}
|
||||
|
||||
render() {
|
||||
return [
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button></ion-back-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Back Button</ion-title>
|
||||
</ion-toolbar>,
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="secondary">
|
||||
<ion-button>
|
||||
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button>
|
||||
<ion-icon slot="icon-only" name="search"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Default Buttons</ion-title>
|
||||
<ion-buttons slot="primary">
|
||||
<ion-button color="secondary">
|
||||
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>,
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="primary">
|
||||
<ion-button onClick={() => this.clickedStar()}>
|
||||
<ion-icon slot="icon-only" name="star"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Right side menu toggle</ion-title>
|
||||
<ion-buttons slot="end">
|
||||
<ion-menu-button autoHide={false}></ion-menu-button>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>,
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons collapse={true}>
|
||||
<ion-button>
|
||||
<ion-icon slot="icon-only" name="star"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Collapsible Buttons</ion-title>
|
||||
</ion-toolbar>
|
||||
];
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
### Vue
|
||||
|
||||
```html
|
||||
|
||||
@ -1,15 +1,7 @@
|
||||
```tsx
|
||||
import React from 'react';
|
||||
import {
|
||||
IonButtons,
|
||||
IonToolbar,
|
||||
IonBackButton,
|
||||
IonTitle,
|
||||
IonButton,
|
||||
IonIcon,
|
||||
IonMenuButton,
|
||||
IonContent
|
||||
} from '@ionic/react';
|
||||
import { IonButtons, IonToolbar, IonBackButton, IonTitle, IonButton, IonIcon, IonMenuButton, IonContent } from '@ionic/react';
|
||||
import { personCircle, search, star, ellipsisHorizontal, ellipsisVertical } from 'ionicons/icons';
|
||||
|
||||
export const ButtonsExample: React.FC = () => (
|
||||
<IonContent>
|
||||
@ -23,16 +15,16 @@ export const ButtonsExample: React.FC = () => (
|
||||
<IonToolbar>
|
||||
<IonButtons slot="secondary">
|
||||
<IonButton>
|
||||
<IonIcon slot="icon-only" name="person-circle" />
|
||||
<IonIcon slot="icon-only" icon={personCircle} />
|
||||
</IonButton>
|
||||
<IonButton>
|
||||
<IonIcon slot="icon-only" name="search" />
|
||||
<IonIcon slot="icon-only" icon={search} />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
<IonTitle>Default Buttons</IonTitle>
|
||||
<IonButtons slot="primary">
|
||||
<IonButton color="secondary">
|
||||
<IonIcon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical" />
|
||||
<IonIcon slot="icon-only" ios={ellipsisHorizontal} md={ellipsisVertical} />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
</IonToolbar>
|
||||
@ -40,7 +32,7 @@ export const ButtonsExample: React.FC = () => (
|
||||
<IonToolbar>
|
||||
<IonButtons slot="primary">
|
||||
<IonButton onClick={() => {}}>
|
||||
<IonIcon slot="icon-only" name="star" />
|
||||
<IonIcon slot="icon-only" icon={star} />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
<IonTitle>Right side menu toggle</IonTitle>
|
||||
@ -52,7 +44,7 @@ export const ButtonsExample: React.FC = () => (
|
||||
<IonToolbar>
|
||||
<IonButtons collapse="true">
|
||||
<IonButton>
|
||||
<IonIcon slot="icon-only" name="star" />
|
||||
<IonIcon slot="icon-only" icon={star} />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
<IonTitle>Collapsible Buttons</IonTitle>
|
||||
|
||||
63
core/src/components/buttons/usage/stencil.md
Normal file
63
core/src/components/buttons/usage/stencil.md
Normal file
@ -0,0 +1,63 @@
|
||||
```tsx
|
||||
import { Component, h } from '@stencil/core';
|
||||
|
||||
@Component({
|
||||
tag: 'buttons-example',
|
||||
styleUrl: 'buttons-example.css'
|
||||
})
|
||||
export class ButtonsExample {
|
||||
|
||||
clickedStar() {
|
||||
console.log("Clicked star button");
|
||||
}
|
||||
|
||||
render() {
|
||||
return [
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button></ion-back-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Back Button</ion-title>
|
||||
</ion-toolbar>,
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="secondary">
|
||||
<ion-button>
|
||||
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button>
|
||||
<ion-icon slot="icon-only" name="search"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Default Buttons</ion-title>
|
||||
<ion-buttons slot="primary">
|
||||
<ion-button color="secondary">
|
||||
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>,
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="primary">
|
||||
<ion-button onClick={() => this.clickedStar()}>
|
||||
<ion-icon slot="icon-only" name="star"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Right side menu toggle</ion-title>
|
||||
<ion-buttons slot="end">
|
||||
<ion-menu-button autoHide={false}></ion-menu-button>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>,
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons collapse={true}>
|
||||
<ion-button>
|
||||
<ion-icon slot="icon-only" name="star"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Collapsible Buttons</ion-title>
|
||||
</ion-toolbar>
|
||||
];
|
||||
}
|
||||
}
|
||||
```
|
||||
Reference in New Issue
Block a user