Bài 19: Floating Action Button : Tìm hiểu ion-fab-list

Bài 19: Floating Action Button : Tìm hiểu ion-fab-list

codersulution Thứ Tư, tháng 8 24, 2022

  

ion-fab-list

Phần tử  ion-fab-list  là một vùng chứa cho nhiều nút fab. Bộ sưu tập các nút fab này chứa các hành động liên quan đến nút fab chính và được bật ra khi nhấp chuột. Để chỉ định mặt nào mà các nút sẽ xuất hiện, hãy đặt thuộc tính  side thành 'start', 'end', 'top', 'bottom'

 Usage

<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>

Properties

activated

Description

If true, the fab list will show all fab buttons in the list.

Attributeactivated
Typeboolean
Defaultfalse

side

Description

The side the fab list will show on relative to the main fab button.

Attributeside
Type"bottom" | "end" | "start" | "top"
Default'bottom'
codersulution

Người đăng: codersulution

Chúa dùng những kẻ thất bại - vì chẳng còn loại người nào khác. Thành công không có dấu chân của kẻ lười biếng!! Đúng vậy! vi lười biếng thì chỉ muốn đi những phương tiện hiện đại. Học hành là không sợ hãi, không biết là hỏi. Chúng ta là người đi học kia mà. Mạnh mẽ và học cho tốt !!!

Đăng nhận xét

0 Nhận xét

myadcash