mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
docs(stencil): add stencil usage to components (#21261)
This commit is contained in:
Brandy Carney
@@ -10,6 +10,12 @@ Fabs are container elements that contain one or more fab buttons. They should be
|
||||
### Angular / javascript
|
||||
|
||||
```html
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Header</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content>
|
||||
<!-- fab placed to the top end -->
|
||||
<ion-fab vertical="top" horizontal="end" slot="fixed">
|
||||
@@ -89,6 +95,12 @@ Fabs are container elements that contain one or more fab buttons. They should be
|
||||
</ion-fab-list>
|
||||
</ion-fab>
|
||||
</ion-content>
|
||||
|
||||
<ion-footer>
|
||||
<ion-toolbar>
|
||||
<ion-title>Footer</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-footer>
|
||||
```
|
||||
|
||||
|
||||
@@ -96,7 +108,7 @@ Fabs are container elements that contain one or more fab buttons. They should be
|
||||
|
||||
```tsx
|
||||
import React from 'react';
|
||||
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonFab, IonFabButton, IonIcon, IonFabList } from '@ionic/react';
|
||||
import { IonContent, IonHeader, IonFooter, IonPage, IonTitle, IonToolbar, IonFab, IonFabButton, IonIcon, IonFabList } from '@ionic/react';
|
||||
import { add, settings, share, person, arrowForwardCircle, arrowBackCircle, arrowUpCircle, logoVimeo, logoFacebook, logoInstagram, logoTwitter } from 'ionicons/icons';
|
||||
|
||||
export const FabExamples: React.FC = () => {
|
||||
@@ -104,7 +116,7 @@ export const FabExamples: React.FC = () => {
|
||||
<IonPage>
|
||||
<IonHeader>
|
||||
<IonToolbar>
|
||||
<IonTitle>FabExamples</IonTitle>
|
||||
<IonTitle>Header</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
<IonContent>
|
||||
@@ -186,16 +198,138 @@ export const FabExamples: React.FC = () => {
|
||||
</IonFabList>
|
||||
</IonFab>
|
||||
</IonContent>
|
||||
<IonFooter>
|
||||
<IonToolbar>
|
||||
<IonTitle>Footer</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonFooter>
|
||||
</IonPage>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
|
||||
### Stencil
|
||||
|
||||
```tsx
|
||||
import { Component, h } from '@stencil/core';
|
||||
|
||||
@Component({
|
||||
tag: 'fab-example',
|
||||
styleUrl: 'fab-example.css'
|
||||
})
|
||||
export class FabExample {
|
||||
render() {
|
||||
return [
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Header</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>,
|
||||
|
||||
<ion-content>
|
||||
{/* fab placed to the top end */}
|
||||
<ion-fab vertical="top" horizontal="end" slot="fixed">
|
||||
<ion-fab-button>
|
||||
<ion-icon name="add"></ion-icon>
|
||||
</ion-fab-button>
|
||||
</ion-fab>
|
||||
|
||||
{/* fab placed to the bottom end */}
|
||||
<ion-fab vertical="bottom" horizontal="end" slot="fixed">
|
||||
<ion-fab-button>
|
||||
<ion-icon name="arrow-forward-circle"></ion-icon>
|
||||
</ion-fab-button>
|
||||
</ion-fab>
|
||||
|
||||
{/* fab placed to the top start */}
|
||||
<ion-fab vertical="top" horizontal="start" slot="fixed">
|
||||
<ion-fab-button>
|
||||
<ion-icon name="arrow-back-circle"></ion-icon>
|
||||
</ion-fab-button>
|
||||
</ion-fab>
|
||||
|
||||
{/* fab placed to the bottom start */}
|
||||
<ion-fab vertical="bottom" horizontal="start" slot="fixed">
|
||||
<ion-fab-button>
|
||||
<ion-icon name="arrow-up-circle"></ion-icon>
|
||||
</ion-fab-button>
|
||||
</ion-fab>
|
||||
|
||||
{/* fab placed to the (vertical) center and start */}
|
||||
<ion-fab vertical="center" horizontal="start" slot="fixed">
|
||||
<ion-fab-button>
|
||||
<ion-icon name="share"></ion-icon>
|
||||
</ion-fab-button>
|
||||
</ion-fab>
|
||||
|
||||
{/* fab placed to the (vertical) center and end */}
|
||||
<ion-fab vertical="center" horizontal="end" slot="fixed">
|
||||
<ion-fab-button>
|
||||
<ion-icon name="add"></ion-icon>
|
||||
</ion-fab-button>
|
||||
</ion-fab>
|
||||
|
||||
{/* fab placed to the top and end and on the top edge of the content overlapping header */}
|
||||
<ion-fab vertical="top" horizontal="end" edge slot="fixed">
|
||||
<ion-fab-button>
|
||||
<ion-icon name="person"></ion-icon>
|
||||
</ion-fab-button>
|
||||
</ion-fab>
|
||||
|
||||
{/* fab placed to the bottom and start and on the bottom edge of content overlapping footer with a list to the right */}
|
||||
<ion-fab vertical="bottom" horizontal="start" edge slot="fixed">
|
||||
<ion-fab-button>
|
||||
<ion-icon name="settings"></ion-icon>
|
||||
</ion-fab-button>
|
||||
<ion-fab-list side="end">
|
||||
<ion-fab-button><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
|
||||
</ion-fab-list>
|
||||
</ion-fab>
|
||||
|
||||
{/* fab placed in the center of the content with a list on each side */}
|
||||
<ion-fab vertical="center" horizontal="center" slot="fixed">
|
||||
<ion-fab-button>
|
||||
<ion-icon name="share"></ion-icon>
|
||||
</ion-fab-button>
|
||||
<ion-fab-list side="top">
|
||||
<ion-fab-button><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
|
||||
</ion-fab-list>
|
||||
<ion-fab-list side="bottom">
|
||||
<ion-fab-button><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
|
||||
</ion-fab-list>
|
||||
<ion-fab-list side="start">
|
||||
<ion-fab-button><ion-icon name="logo-instagram"></ion-icon></ion-fab-button>
|
||||
</ion-fab-list>
|
||||
<ion-fab-list side="end">
|
||||
<ion-fab-button><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
|
||||
</ion-fab-list>
|
||||
</ion-fab>
|
||||
</ion-content>,
|
||||
|
||||
<ion-footer>
|
||||
<ion-toolbar>
|
||||
<ion-title>
|
||||
Footer
|
||||
</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-footer>
|
||||
];
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
### Vue
|
||||
|
||||
```html
|
||||
<template>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Header</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content>
|
||||
<!-- fab placed to the top end -->
|
||||
<ion-fab vertical="top" horizontal="end" slot="fixed">
|
||||
@@ -275,6 +409,12 @@ export const FabExamples: React.FC = () => {
|
||||
</ion-fab-list>
|
||||
</ion-fab>
|
||||
</ion-content>
|
||||
|
||||
<ion-footer>
|
||||
<ion-toolbar>
|
||||
<ion-title>Footer</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-footer>
|
||||
</template>
|
||||
```
|
||||
|
||||
|
||||
@@ -1,4 +1,10 @@
|
||||
```html
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Header</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content>
|
||||
<!-- fab placed to the top end -->
|
||||
<ion-fab vertical="top" horizontal="end" slot="fixed">
|
||||
@@ -78,4 +84,10 @@
|
||||
</ion-fab-list>
|
||||
</ion-fab>
|
||||
</ion-content>
|
||||
|
||||
<ion-footer>
|
||||
<ion-toolbar>
|
||||
<ion-title>Footer</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-footer>
|
||||
```
|
||||
|
||||
@@ -1,4 +1,10 @@
|
||||
```html
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Header</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content>
|
||||
<!-- fab placed to the top end -->
|
||||
<ion-fab vertical="top" horizontal="end" slot="fixed">
|
||||
@@ -78,4 +84,10 @@
|
||||
</ion-fab-list>
|
||||
</ion-fab>
|
||||
</ion-content>
|
||||
|
||||
<ion-footer>
|
||||
<ion-toolbar>
|
||||
<ion-title>Footer</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-footer>
|
||||
```
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
```tsx
|
||||
import React from 'react';
|
||||
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonFab, IonFabButton, IonIcon, IonFabList } from '@ionic/react';
|
||||
import { IonContent, IonHeader, IonFooter, IonPage, IonTitle, IonToolbar, IonFab, IonFabButton, IonIcon, IonFabList } from '@ionic/react';
|
||||
import { add, settings, share, person, arrowForwardCircle, arrowBackCircle, arrowUpCircle, logoVimeo, logoFacebook, logoInstagram, logoTwitter } from 'ionicons/icons';
|
||||
|
||||
export const FabExamples: React.FC = () => {
|
||||
@@ -8,7 +8,7 @@ export const FabExamples: React.FC = () => {
|
||||
<IonPage>
|
||||
<IonHeader>
|
||||
<IonToolbar>
|
||||
<IonTitle>FabExamples</IonTitle>
|
||||
<IonTitle>Header</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
<IonContent>
|
||||
@@ -90,6 +90,11 @@ export const FabExamples: React.FC = () => {
|
||||
</IonFabList>
|
||||
</IonFab>
|
||||
</IonContent>
|
||||
<IonFooter>
|
||||
<IonToolbar>
|
||||
<IonTitle>Footer</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonFooter>
|
||||
</IonPage>
|
||||
);
|
||||
};
|
||||
|
||||
107
core/src/components/fab/usage/stencil.md
Normal file
107
core/src/components/fab/usage/stencil.md
Normal file
@@ -0,0 +1,107 @@
|
||||
```tsx
|
||||
import { Component, h } from '@stencil/core';
|
||||
|
||||
@Component({
|
||||
tag: 'fab-example',
|
||||
styleUrl: 'fab-example.css'
|
||||
})
|
||||
export class FabExample {
|
||||
render() {
|
||||
return [
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Header</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>,
|
||||
|
||||
<ion-content>
|
||||
{/* fab placed to the top end */}
|
||||
<ion-fab vertical="top" horizontal="end" slot="fixed">
|
||||
<ion-fab-button>
|
||||
<ion-icon name="add"></ion-icon>
|
||||
</ion-fab-button>
|
||||
</ion-fab>
|
||||
|
||||
{/* fab placed to the bottom end */}
|
||||
<ion-fab vertical="bottom" horizontal="end" slot="fixed">
|
||||
<ion-fab-button>
|
||||
<ion-icon name="arrow-forward-circle"></ion-icon>
|
||||
</ion-fab-button>
|
||||
</ion-fab>
|
||||
|
||||
{/* fab placed to the top start */}
|
||||
<ion-fab vertical="top" horizontal="start" slot="fixed">
|
||||
<ion-fab-button>
|
||||
<ion-icon name="arrow-back-circle"></ion-icon>
|
||||
</ion-fab-button>
|
||||
</ion-fab>
|
||||
|
||||
{/* fab placed to the bottom start */}
|
||||
<ion-fab vertical="bottom" horizontal="start" slot="fixed">
|
||||
<ion-fab-button>
|
||||
<ion-icon name="arrow-up-circle"></ion-icon>
|
||||
</ion-fab-button>
|
||||
</ion-fab>
|
||||
|
||||
{/* fab placed to the (vertical) center and start */}
|
||||
<ion-fab vertical="center" horizontal="start" slot="fixed">
|
||||
<ion-fab-button>
|
||||
<ion-icon name="share"></ion-icon>
|
||||
</ion-fab-button>
|
||||
</ion-fab>
|
||||
|
||||
{/* fab placed to the (vertical) center and end */}
|
||||
<ion-fab vertical="center" horizontal="end" slot="fixed">
|
||||
<ion-fab-button>
|
||||
<ion-icon name="add"></ion-icon>
|
||||
</ion-fab-button>
|
||||
</ion-fab>
|
||||
|
||||
{/* fab placed to the top and end and on the top edge of the content overlapping header */}
|
||||
<ion-fab vertical="top" horizontal="end" edge slot="fixed">
|
||||
<ion-fab-button>
|
||||
<ion-icon name="person"></ion-icon>
|
||||
</ion-fab-button>
|
||||
</ion-fab>
|
||||
|
||||
{/* fab placed to the bottom and start and on the bottom edge of content overlapping footer with a list to the right */}
|
||||
<ion-fab vertical="bottom" horizontal="start" edge slot="fixed">
|
||||
<ion-fab-button>
|
||||
<ion-icon name="settings"></ion-icon>
|
||||
</ion-fab-button>
|
||||
<ion-fab-list side="end">
|
||||
<ion-fab-button><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
|
||||
</ion-fab-list>
|
||||
</ion-fab>
|
||||
|
||||
{/* fab placed in the center of the content with a list on each side */}
|
||||
<ion-fab vertical="center" horizontal="center" slot="fixed">
|
||||
<ion-fab-button>
|
||||
<ion-icon name="share"></ion-icon>
|
||||
</ion-fab-button>
|
||||
<ion-fab-list side="top">
|
||||
<ion-fab-button><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
|
||||
</ion-fab-list>
|
||||
<ion-fab-list side="bottom">
|
||||
<ion-fab-button><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
|
||||
</ion-fab-list>
|
||||
<ion-fab-list side="start">
|
||||
<ion-fab-button><ion-icon name="logo-instagram"></ion-icon></ion-fab-button>
|
||||
</ion-fab-list>
|
||||
<ion-fab-list side="end">
|
||||
<ion-fab-button><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
|
||||
</ion-fab-list>
|
||||
</ion-fab>
|
||||
</ion-content>,
|
||||
|
||||
<ion-footer>
|
||||
<ion-toolbar>
|
||||
<ion-title>
|
||||
Footer
|
||||
</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-footer>
|
||||
];
|
||||
}
|
||||
}
|
||||
```
|
||||
@@ -1,5 +1,11 @@
|
||||
```html
|
||||
<template>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Header</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content>
|
||||
<!-- fab placed to the top end -->
|
||||
<ion-fab vertical="top" horizontal="end" slot="fixed">
|
||||
@@ -79,5 +85,11 @@
|
||||
</ion-fab-list>
|
||||
</ion-fab>
|
||||
</ion-content>
|
||||
|
||||
<ion-footer>
|
||||
<ion-toolbar>
|
||||
<ion-title>Footer</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-footer>
|
||||
</template>
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user