ion-fab-list
コンテンツ
ion-fab-list
要素は、複数のfab buttonのコンテナです。この一連のfab buttonには、メインのfab buttonに関連するアクションが含まれ、メインのfab buttonをクリックすると表示されます。ボタンを表示する方向を指定するためには、 side
プロパティを'start', 'end', 'top', 'bottom' に設定します。
使い方
- Angular
- Javascript
- React
- Stencil
- Vue
<ion-fab vertical="center" horizontal="center">
<ion-fab-button>Share</ion-fab-button>
<ion-fab-list side="top">
<ion-fab-button>
<ion-icon name="logo-facebook"></ion-icon>
</ion-fab-button>
<ion-fab-button>
<ion-icon name="logo-twitter"></ion-icon>
</ion-fab-button>
<ion-fab-button>
<ion-icon name="logo-youtube"></ion-icon>
</ion-fab-button>
</ion-fab-list>
<ion-fab-list side="end">
<ion-fab-button>
<ion-icon name="logo-pwa"></ion-icon>
</ion-fab-button>
<ion-fab-button>
<ion-icon name="logo-npm"></ion-icon>
</ion-fab-button>
<ion-fab-button>
<ion-icon name="logo-ionic"></ion-icon>
</ion-fab-button>
</ion-fab-list>
<ion-fab-list side="bottom">
<ion-fab-button>
<ion-icon name="logo-github"></ion-icon>
</ion-fab-button>
<ion-fab-button>
<ion-icon name="logo-javascript"></ion-icon>
</ion-fab-button>
<ion-fab-button>
<ion-icon name="logo-angular"></ion-icon>
</ion-fab-button>
</ion-fab-list>
<ion-fab-list side="start">
<ion-fab-button>
<ion-icon name="logo-vimeo"></ion-icon>
</ion-fab-button>
<ion-fab-button>
<ion-icon name="logo-chrome"></ion-icon>
</ion-fab-button>
<ion-fab-button>
<ion-icon name="logo-react"></ion-icon>
</ion-fab-button>
</ion-fab-list>
</ion-fab>
<ion-fab vertical="center" horizontal="center">
<ion-fab-button>Share</ion-fab-button>
<ion-fab-list side="top">
<ion-fab-button>
<ion-icon name="logo-facebook"></ion-icon>
</ion-fab-button>
<ion-fab-button>
<ion-icon name="logo-twitter"></ion-icon>
</ion-fab-button>
<ion-fab-button>
<ion-icon name="logo-youtube"></ion-icon>
</ion-fab-button>
</ion-fab-list>
<ion-fab-list side="end">
<ion-fab-button>
<ion-icon name="logo-pwa"></ion-icon>
</ion-fab-button>
<ion-fab-button>
<ion-icon name="logo-npm"></ion-icon>
</ion-fab-button>
<ion-fab-button>
<ion-icon name="logo-ionic"></ion-icon>
</ion-fab-button>
</ion-fab-list>
<ion-fab-list side="bottom">
<ion-fab-button>
<ion-icon name="logo-github"></ion-icon>
</ion-fab-button>
<ion-fab-button>
<ion-icon name="logo-javascript"></ion-icon>
</ion-fab-button>
<ion-fab-button>
<ion-icon name="logo-angular"></ion-icon>
</ion-fab-button>
</ion-fab-list>
<ion-fab-list side="start">
<ion-fab-button>
<ion-icon name="logo-vimeo"></ion-icon>
</ion-fab-button>
<ion-fab-button>
<ion-icon name="logo-chrome"></ion-icon>
</ion-fab-button>
<ion-fab-button>
<ion-icon name="logo-react"></ion-icon>
</ion-fab-button>
</ion-fab-list>
</ion-fab>
import React from 'react';
import { IonFab, IonFabButton, IonFabList, IonContent, IonIcon } from '@ionic/react';
import { logoFacebook, logoTwitter, logoYoutube, logoPwa, logoNpm, logoIonic, logoGithub, logoJavascript, logoAngular, logoVimeo, logoChrome, logoReact } from 'ionicons/icons';
export const FabListExample: React.FC = () => (
<IonContent>
<IonFab vertical="center" horizontal="center">
<IonFabButton>Share</IonFabButton>
<IonFabList side="top">
<IonFabButton>
<IonIcon icon={logoFacebook} />
</IonFabButton>
<IonFabButton>
<IonIcon icon={logoTwitter} />
</IonFabButton>
<IonFabButton>
<IonIcon icon={logoYoutube} />
</IonFabButton>
</IonFabList>
<IonFabList side="end">
<IonFabButton>
<IonIcon icon={logoPwa} />
</IonFabButton>
<IonFabButton>
<IonIcon icon={logoNpm} />
</IonFabButton>
<IonFabButton>
<IonIcon icon={logoIonic} />
</IonFabButton>
</IonFabList>
<IonFabList side="bottom">
<IonFabButton>
<IonIcon icon={logoGithub} />
</IonFabButton>
<IonFabButton>
<IonIcon icon={logoJavascript} />
</IonFabButton>
<IonFabButton>
<IonIcon icon={logoAngular} />
</IonFabButton>
</IonFabList>
<IonFabList side="start">
<IonFabButton>
<IonIcon icon={logoVimeo} />
</IonFabButton>
<IonFabButton>
<IonIcon icon={logoChrome} />
</IonFabButton>
<IonFabButton>
<IonIcon icon={logoReact} />
</IonFabButton>
</IonFabList>
</IonFab>
</IonContent>
);
import { Component, h } from '@stencil/core';
@Component({
tag: 'fab-list-example',
styleUrl: 'fab-list-example.css'
})
export class FabListExample {
render() {
return [
<ion-fab vertical="center" horizontal="center">
<ion-fab-button>Share</ion-fab-button>
<ion-fab-list side="top">
<ion-fab-button>
<ion-icon name="logo-facebook"></ion-icon>
</ion-fab-button>
<ion-fab-button>
<ion-icon name="logo-twitter"></ion-icon>
</ion-fab-button>
<ion-fab-button>
<ion-icon name="logo-youtube"></ion-icon>
</ion-fab-button>
</ion-fab-list>
<ion-fab-list side="end">
<ion-fab-button>
<ion-icon name="logo-pwa"></ion-icon>
</ion-fab-button>
<ion-fab-button>
<ion-icon name="logo-npm"></ion-icon>
</ion-fab-button>
<ion-fab-button>
<ion-icon name="logo-ionic"></ion-icon>
</ion-fab-button>
</ion-fab-list>
<ion-fab-list side="bottom">
<ion-fab-button>
<ion-icon name="logo-github"></ion-icon>
</ion-fab-button>
<ion-fab-button>
<ion-icon name="logo-javascript"></ion-icon>
</ion-fab-button>
<ion-fab-button>
<ion-icon name="logo-angular"></ion-icon>
</ion-fab-button>
</ion-fab-list>
<ion-fab-list side="start">
<ion-fab-button>
<ion-icon name="logo-vimeo"></ion-icon>
</ion-fab-button>
<ion-fab-button>
<ion-icon name="logo-chrome"></ion-icon>
</ion-fab-button>
<ion-fab-button>
<ion-icon name="logo-react"></ion-icon>
</ion-fab-button>
</ion-fab-list>
</ion-fab>
];
}
}
<template>
<ion-fab vertical="bottom" horizontal="end">
<ion-fab-button>Share</ion-fab-button>
<ion-fab-list side="top">
<ion-fab-button>Facebook</ion-fab-button>
<ion-fab-button>Twitter</ion-fab-button>
<ion-fab-button>Youtube</ion-fab-button>
</ion-fab-list>
<ion-fab-list side="start">
<ion-fab-button>Vimeo</ion-fab-button>
</ion-fab-list>
</ion-fab>
</template>
<script>
import { IonFab, IonFabButton, IonFabList } from '@ionic/vue';
import { defineComponent } from 'vue';
export default defineComponent({
components: { IonFab, IonFabButton, IonFabList }
});
</script>
プロパティ
activated
Description | If true , the fab list will show all fab buttons in the list. |
Attribute | activated |
Type | boolean |
Default | false |
side
Description | The side the fab list will show on relative to the main fab button. |
Attribute | side |
Type | "bottom" | "end" | "start" | "top" |
Default | 'bottom' |
イベント
No events available for this component.
メソッド
No public methods available for this component.
CSS Shadow Parts
No CSS shadow parts available for this component.
CSSカスタムプロパティ
No CSS custom properties available for this component.
Slots
No slots available for this component.