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

45
core/src/components/fab-button/readme.md
View File

@ -15,7 +15,7 @@ If the FAB button is not wrapped with `<ion-fab>`, it will scroll with the conte
<ion-content>
<!-- Fixed Floating Action Button that does not scroll with the content -->
<ion-fab>
<ion-fab slot="fixed">
<ion-fab-button>Button</ion-fab-button>
</ion-fab>
@ -45,7 +45,7 @@ import { IonContent, IonFab, IonFabButton } from '@ionic/react';
export const FabButtonExample: React.FC = () => (
<IonContent>
{/*-- Fixed Floating Action Button that does not scroll with the content --*/}
<IonFab>
<IonFab slot="fixed">
<IonFabButton>Button</IonFabButton>
</IonFab>
@ -66,6 +66,45 @@ export const FabButtonExample: React.FC = () => (
```
### Stencil
```tsx
import { Component, h } from '@stencil/core';
@Component({
tag: 'fab-button-example',
styleUrl: 'fab-button-example.css'
})
export class FabButtonExample {
render() {
return [
<ion-content>
{/* Fixed Floating Action Button that does not scroll with the content */}
<ion-fab slot="fixed">
<ion-fab-button>Button</ion-fab-button>
</ion-fab>
{/* Default Floating Action Button that scrolls with the content */}
<ion-fab-button>Default</ion-fab-button>
{/* Mini */}
<ion-fab-button size="small">Mini</ion-fab-button>
{/* Colors */}
<ion-fab-button color="primary">Primary</ion-fab-button>
<ion-fab-button color="secondary">Secondary</ion-fab-button>
<ion-fab-button color="danger">Danger</ion-fab-button>
<ion-fab-button color="light">Light</ion-fab-button>
<ion-fab-button color="dark">Dark</ion-fab-button>
</ion-content>
];
}
}
```
### Vue
```html
@ -73,7 +112,7 @@ export const FabButtonExample: React.FC = () => (
<ion-content>
<!-- Fixed Floating Action Button that does not scroll with the content -->
<ion-fab>
<ion-fab slot="fixed">
<ion-fab-button>Button</ion-fab-button>
</ion-fab>

2
core/src/components/fab-button/usage/angular.md
View File

@ -2,7 +2,7 @@
<ion-content>
<!-- Fixed Floating Action Button that does not scroll with the content -->
<ion-fab>
<ion-fab slot="fixed">
<ion-fab-button>Button</ion-fab-button>
</ion-fab>

2
core/src/components/fab-button/usage/javascript.md
View File

@ -2,7 +2,7 @@
<ion-content>
<!-- Fixed Floating Action Button that does not scroll with the content -->
<ion-fab>
<ion-fab slot="fixed">
<ion-fab-button>Button</ion-fab-button>
</ion-fab>

2
core/src/components/fab-button/usage/react.md
View File

@ -5,7 +5,7 @@ import { IonContent, IonFab, IonFabButton } from '@ionic/react';
export const FabButtonExample: React.FC = () => (
<IonContent>
{/*-- Fixed Floating Action Button that does not scroll with the content --*/}
<IonFab>
<IonFab slot="fixed">
<IonFabButton>Button</IonFabButton>
</IonFab>

35
core/src/components/fab-button/usage/stencil.md Normal file
View File

@ -0,0 +1,35 @@
```tsx
import { Component, h } from '@stencil/core';
@Component({
tag: 'fab-button-example',
styleUrl: 'fab-button-example.css'
})
export class FabButtonExample {
render() {
return [
<ion-content>
{/* Fixed Floating Action Button that does not scroll with the content */}
<ion-fab slot="fixed">
<ion-fab-button>Button</ion-fab-button>
</ion-fab>
{/* Default Floating Action Button that scrolls with the content */}
<ion-fab-button>Default</ion-fab-button>
{/* Mini */}
<ion-fab-button size="small">Mini</ion-fab-button>
{/* Colors */}
<ion-fab-button color="primary">Primary</ion-fab-button>
<ion-fab-button color="secondary">Secondary</ion-fab-button>
<ion-fab-button color="danger">Danger</ion-fab-button>
<ion-fab-button color="light">Light</ion-fab-button>
<ion-fab-button color="dark">Dark</ion-fab-button>
</ion-content>
];
}
}
```

2
core/src/components/fab-button/usage/vue.md
View File

@ -3,7 +3,7 @@
<ion-content>
<!-- Fixed Floating Action Button that does not scroll with the content -->
<ion-fab>
<ion-fab slot="fixed">
<ion-fab-button>Button</ion-fab-button>
</ion-fab>