Bài 35: Progress Indicator Tìm hiểu ion-loading

 

 ion-loading

Lớp phủ có thể được sử dụng để biểu thị hoạt động trong khi chặn tương tác của người dùng. Chỉ báo tải xuất hiện trên đầu nội dung của ứng dụng và có thể được ứng dụng loại bỏ để tiếp tục tương tác của người dùng với ứng dụng. Nó bao gồm một phông nền tùy chọn, có thể được tắt bằng cách cài đặt showBackdrop: false khi tạo.

Dismissing

loading indicator có thể được loại bỏ tự động sau một khoảng thời gian cụ thể bằng cách chuyển số mili giây để hiển thị nó trong các duration tùy chọn tải. Để loại bỏ loading indicator sau khi tạo, hãy gọi dismiss() phương thức trên phiên bản đang tải. Các onDidDismiss chức năng có thể được gọi để thực hiện một hành động sau khi chỉ số tải được bác bỏ.

Customnization

Việc tải sử dụng tính năng đóng gói theo phạm vi, có nghĩa là nó sẽ tự động mở rộng phạm vi CSS của mình bằng cách nối mỗi kiểu với một lớp bổ sung trong thời gian chạy. Ghi đè các bộ chọn theo phạm vi trong CSS yêu cầu một bộ chọn có higher specificity.

Chúng tôi khuyên bạn nên chuyển một lớp tùy chỉnh vào cssClasstrong createphương thức và sử dụng lớp đó để thêm các kiểu tùy chỉnh vào máy chủ và các phần tử bên trong. Thuộc tính này cũng có thể chấp nhận nhiều lớp được phân tách bằng dấu cách. Xem  Usage cho một ví dụ về cách vượt qua một lớp bằng cách sử dụng cssClass.

/* DOES NOT WORK - not specific enough */

ion-loading {

  color: green;

}

/* Works - pass "my-custom-class" in cssClass to increase specificity */

.my-custom-class {

  color: green;

}

Bất kỳ trong số những điều đã xác định thuộc tính CSS có thể được sử dụng để tạo kiểu cho Đang tải mà không cần nhắm mục tiêu đến các phần tử riêng lẻ:

  .my-custom-class {

    --background: #222;

    --spinner-color: #fff;

  

    color: #fff;

  }

Usage

import { Component } from '@angular/core';
import { LoadingController } from '@ionic/angular';

@Component({
  selector: 'loading-example',
  templateUrl: 'loading-example.html',
  styleUrls: ['./loading-example.css']
})
export class LoadingExample {
  constructor(public loadingController: LoadingController) {}

  async presentLoading() {
    const loading = await this.loadingController.create({
      cssClass: 'my-custom-class',
      message: 'Please wait...',
      duration: 2000
    });
    await loading.present();

    const { role, data } = await loading.onDidDismiss();
    console.log('Loading dismissed!');
  }

  async presentLoadingWithOptions() {
    const loading = await this.loadingController.create({
      spinner: null,
      duration: 5000,
      message: 'Click the backdrop to dismiss early...',
      translucent: true,
      cssClass: 'custom-class custom-loading',
      backdropDismiss: true
    });
    await loading.present();

    const { role, data } = await loading.onDidDismiss();
    console.log('Loading dismissed with role:', role);
  }
}

async function presentLoading() {
  const loading = document.createElement('ion-loading');

  loading.cssClass = 'my-custom-class';
  loading.message = 'Please wait...';
  loading.duration = 2000;

  document.body.appendChild(loading);
  await loading.present();

  const { role, data } = await loading.onDidDismiss();
  console.log('Loading dismissed!');
}

async function presentLoadingWithOptions() {
  const loading = document.createElement('ion-loading');

  loading.spinner = null;
  loading.duration = 5000;
  loading.message = 'Click the backdrop to dismiss early...';
  loading.translucent = true;
  loading.cssClass = 'custom-class custom-loading';
  loading.backdropDismiss = true;

  document.body.appendChild(loading);
  await loading.present();

  const { role, data } = await loading.onDidDismiss();
  console.log('Loading dismissed with role:', role);
}

/* Using with useIonLoading Hook */

import React from 'react';
import { IonButton, IonContent, IonPage, useIonLoading } from '@ionic/react';

interface LoadingProps {}

const LoadingExample: React.FC<LoadingProps> = () => {
  const [present] = useIonLoading();
  return (
    <IonPage>
      <IonContent>
        <IonButton
          expand="block"
          onClick={() =>
            present({
              duration: 3000,
            })
          }
        >
          Show Loading
        </IonButton>
        <IonButton
          expand="block"
          onClick={() => present('Loading', 2000, 'dots')}
        >
          Show Loading using params
        </IonButton>
      </IonContent>
    </IonPage>
  );
};

import { Component, h } from '@stencil/core';

import { loadingController } from '@ionic/core';

@Component({
  tag: 'loading-example',
  styleUrl: 'loading-example.css'
})
export class LoadingExample {
  async presentLoading() {
    const loading = await loadingController.create({
      cssClass: 'my-custom-class',
      message: 'Please wait...',
      duration: 2000
    });
    await loading.present();

    const { role, data } = await loading.onDidDismiss();
    console.log('Loading dismissed!', role, data);
  }

  async presentLoadingWithOptions() {
    const loading = await loadingController.create({
      spinner: null,
      duration: 5000,
      message: 'Click the backdrop to dismiss early...',
      translucent: true,
      cssClass: 'custom-class custom-loading',
      backdropDismiss: true
    });
    await loading.present();

    const { role, data } = await loading.onDidDismiss();
    console.log('Loading dismissed with role:', role, data);
  }

  render() {
    return [
      <ion-content>
        <ion-button onClick={() => this.presentLoading()}>Present Loading</ion-button>
        <ion-button onClick={() => this.presentLoadingWithOptions()}>Present Loading: Options</ion-button>
      </ion-content>
    ];
  }
}

<template>
  <ion-button @click="presentLoading">Show Loading</ion-button>
  <br />
  <ion-button @click="presentLoadingWithOptions">Show Loading</ion-button>
</template>

<script>

<script>
import { IonButton, loadingController } from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
  props: {
    timeout: { type: Number, default: 1000 },
  },
  methods: {
    async presentLoading() {
      const loading = await loadingController
        .create({
          cssClass: 'my-custom-class',
          message: 'Please wait...',
          duration: this.timeout,
        });

      await loading.present();

      setTimeout(function() {
        loading.dismiss()
      }, this.timeout);
    },
    async presentLoadingWithOptions() {
      const loading = await loadingController
        .create({
          spinner: null,
          duration: this.timeout,
          message: 'Click the backdrop to dismiss early...',
          translucent: true,
          cssClass: 'custom-class custom-loading',
          backdropDismiss: true
        });

      await loading.present();

      setTimeout(function() {
        loading.dismiss()
      }, this.timeout);
    },
  },
  components: { IonButton }
});
</script>

Các nhà phát triển cũng có thể sử dụng thành phần này trực tiếp trong mẫu của họ:

<template>
  <ion-button @click="setOpen(true)">Show Loading</ion-button>
  <ion-loading
    :is-open="isOpenRef"
    cssClass="my-custom-class"
    message="Please wait..."
    :duration="timeout"
    @didDismiss="setOpen(false)"
  >
  </ion-loading>
</template>

<script>
import { IonLoading, IonButton } from '@ionic/vue';
import { defineComponent, ref } from 'vue';

export default defineComponent({
  props: {
    timeout: { type: Number, default: 1000 },
  },
  components: { IonLoading, IonButton },
  setup() {
    const isOpenRef = ref(false);
    const setOpen = (state: boolean) => isOpenRef.value = state;

    return { isOpenRef, setOpen }
  }
});
</script>

Properties

animated
Description	If true, the loading indicator will animate.
Attribute	animated
Type	boolean
Default	true
backdropDismiss
Description	If true, the loading indicator will be dismissed when the backdrop is clicked.
Attribute	backdrop-dismiss
Type	boolean
Default	false
cssClass
Description	Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
Attribute	css-class
Type	string | string[] | undefined
duration
Description	Number of milliseconds to wait before dismissing the loading indicator.
Attribute	duration
Type	number
Default	0
enterAnimation
Description	Animation to use when the loading indicator is presented.
Type	((baseEl: any, opts?: any) => Animation) | undefined
keyboardClose
Description	If true, the keyboard will be automatically dismissed when the overlay is presented.
Attribute	keyboard-close
Type	boolean
Default	true
leaveAnimation
Description	Animation to use when the loading indicator is dismissed.
Type	((baseEl: any, opts?: any) => Animation) | undefined
message
Description	Optional text content to display in the loading indicator.
Attribute	message
Type	IonicSafeString | string | undefined
mode
Description	The mode determines which platform styles to use.
Attribute	mode
Type	"ios" | "md"
showBackdrop
Description	If true, a backdrop will be displayed behind the loading indicator.
Attribute	show-backdrop
Type	boolean
Default	true
spinner
Description	The name of the spinner to display.
Attribute	spinner
Type	"bubbles" | "circles" | "circular" | "crescent" | "dots" | "lines" | "lines-small" | null | undefined
translucent
Description	If true, the loading indicator will be translucent. Only applies when the mode is "ios" and the device supports backdrop-filter.
Attribute	translucent
Type	boolean
Default	false

Events

Name	Description
ionLoadingDidDismiss	Emitted after the loading has dismissed.
ionLoadingDidPresent	Emitted after the loading has presented.
ionLoadingWillDismiss	Emitted before the loading has dismissed.
ionLoadingWillPresent	Emitted before the loading has presented.

Methods

dismiss
Description	Dismiss the loading overlay after it has been presented.
Signature	dismiss(data?: any, role?: string | undefined) => Promise<boolean>
onDidDismiss
Description	Returns a promise that resolves when the loading did dismiss.
Signature	onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>
onWillDismiss
Description	Returns a promise that resolves when the loading will dismiss.
Signature	onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>
present
Description	Present the loading overlay after it has been created.
Signature	present() => Promise<void>

CSS Custom Properties

Name	Description
--backdrop-opacity	Opacity of the backdrop
--background	Background of the loading dialog
--height	Height of the loading dialog
--max-height	Maximum height of the loading dialog
--max-width	Maximum width of the loading dialog
--min-height	Minimum height of the loading dialog
--min-width	Minimum width of the loading dialog
--spinner-color	Color of the loading spinner
--width	Width of the loading dialog