Bài 36: Progress Indicator Tìm hiểu ion-progress-bar

  

 ion-progress-bar

Thanh tiến trình(Progress bars ) thông báo cho người dùng về trạng thái của các quy trình đang diễn ra, chẳng hạn như tải ứng dụng, gửi biểu mẫu hoặc lưu các bản cập nhật. Có hai loại thanh tiến trình: determinatevà indeterminate.

Progress Type

Determinate

Determinate là loại mặc định. Nó nên được sử dụng khi biết tỷ lệ phần trăm của một phép toán. Tiến trình được thể hiện bằng cách thiết lập thuộc tính value. Điều này có thể được sử dụng để hiển thị tiến trình tăng từ 0 đến 100% của bản nhạc.

Nếu thuộc buffer tính được đặt, luồng đệm sẽ hiển thị với các vòng tròn động để biểu thị hoạt động. Giá trị của thuộc tính buffer cũng sẽ được thể hiện bằng lượng đường có thể nhìn thấy ở đó. Nếu giá trị của buffer nhỏ hơn thuộc tính value, sẽ không có theo dõi nào hiển thị. Nếu buffer bằng 1thì luồng đệm sẽ bị ẩn.

indeterminate

indeterminate nên được sử dụng khi không biết quá trình sẽ mất bao lâu. Thanh tiến trình không bị ràng buộc với value, thay vào đó nó liên tục trượt dọc theo đường cho đến khi quá trình hoàn tất.

 Usage

<!-- Default Progressbar -->
<ion-progress-bar></ion-progress-bar>

<!-- Default Progressbar with 50 percent -->
<ion-progress-bar value="0.5"></ion-progress-bar>

<!-- Colorize Progressbar -->
<ion-progress-bar color="primary" value="0.5"></ion-progress-bar>
<ion-progress-bar color="secondary" value="0.5"></ion-progress-bar>

<!-- Other types -->
<ion-progress-bar value="0.25" buffer="0.5"></ion-progress-bar>
<ion-progress-bar type="indeterminate"></ion-progress-bar>
<ion-progress-bar type="indeterminate" rever

<!-- Default Progressbar -->
<ion-progress-bar></ion-progress-bar>

<!-- Default Progressbar with 50 percent -->
<ion-progress-bar value="0.5"></ion-progress-bar>

<!-- Colorize Progressbar -->
<ion-progress-bar color="primary" value="0.5"></ion-progress-bar>
<ion-progress-bar color="secondary" value="0.5"></ion-progress-bar>

<!-- Other types -->
<ion-progress-bar value="0.25" buffer="0.5"></ion-progress-bar>
<ion-progress-bar type="indeterminate"></ion-progress-bar>
<ion-progress-bar type="indeterminate" 

import React from 'react';
import { IonProgressBar, IonContent } from '@ionic/react';

export const ProgressbarExample: React.FC = () => (
  <IonContent>
    {/*-- Default Progressbar --*/}
    <IonProgressBar></IonProgressBar><br />

    {/*-- Default Progressbar with 50 percent --*/}
    <IonProgressBar value={0.5}></IonProgressBar><br />

    {/*-- Colorize Progressbar --*/}
    <IonProgressBar color="primary" value={0.5}></IonProgressBar><br />
    <IonProgressBar color="secondary" value={0.5}></IonProgressBar><br />

    {/*-- Other types --*/}
    <IonProgressBar value={0.25} buffer={0.5}></IonProgressBar><br />
    <IonProgressBar type="indeterminate"></IonProgressBar><br />
    <IonProgressBar type="indeterminate" reversed={true}></IonProgressBar><br />
  </IonContent>
);

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

@Component({
  tag: 'progress-bar-example',
  styleUrl: 'progress-bar-example.css'
})
export class ProgressBarExample {
  render() {
    return [
      // Default Progressbar
      <ion-progress-bar></ion-progress-bar>,

      // Default Progressbar with 50 percent
      <ion-progress-bar value={0.5}></ion-progress-bar>,

      // Colorize Progressbar
      <ion-progress-bar color="primary" value={0.5}></ion-progress-bar>,
      <ion-progress-bar color="secondary" value={0.5}></ion-progress-bar>,

      // Other types
      <ion-progress-bar value={0.25} buffer={0.5}></ion-progress-bar>,
      <ion-progress-bar type="indeterminate"></ion-progress-bar>,
      <ion-progress-bar type="indeterminate" reversed={true}></ion-progress-bar>
    ];
  }
}

<template>
  <!-- Default Progressbar -->
  <ion-progress-bar></ion-progress-bar>

  <!-- Default Progressbar with 50 percent -->
  <ion-progress-bar value="0.5"></ion-progress-bar>

  <!-- Colorize Progressbar -->
  <ion-progress-bar color="primary" value="0.5"></ion-progress-bar>
  <ion-progress-bar color="secondary" value="0.5"></ion-progress-bar>

  <!-- Other types -->
  <ion-progress-bar value="0.25" buffer="0.5"></ion-progress-bar>
  <ion-progress-bar type="indeterminate"></ion-progress-bar>
  <ion-progress-bar type="indeterminate" reversed="true"></ion-progress-bar>
</template>

<script>
import { IonProgressBar } from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
  components: { IonProgressBar }
});
</script>

Copy

Properties

buffer
Description	If the buffer and value are smaller than 1, the buffer circles will show. The buffer should be between [0, 1].
Attribute	buffer
Type	number
Default	1
color
Description	The color to use from your application's color palette. Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark". For more information on colors, see theming.
Attribute	color
Type	string | undefined
mode
Description	The mode determines which platform styles to use.
Attribute	mode
Type	"ios" | "md"
reversed
Description	If true, reverse the progress bar direction.
Attribute	reversed
Type	boolean
Default	false
type
Description	The state of the progress bar, based on if the time the process takes is known or not. Default options are: "determinate" (no animation), "indeterminate" (animate from left to right).
Attribute	type
Type	"determinate" | "indeterminate"
Default	'determinate'
value
Description	The value determines how much of the active bar should display when the type is "determinate". The value should be between [0, 1].
Attribute	value
Type	number
Default	0

CSS Shadow Parts

Name	Description
progress	The progress bar that shows the current value when `type` is `"determinate"` and slides back and forth when `type` is `"indeterminate"`.
stream	The animated circles that appear while buffering. This only shows when `buffer` is set and `type` is `"determinate"`.
track	The track bar behind the progress bar. If the `buffer` property is set and `type` is `"determinate"` the track will be the width of the `buffer` value.

CSS Custom Properties

Name	Description
--background	Background of the progress track, or the buffer bar if `buffer` is set
--buffer-background	DEPRECATED, use `--background` instead
--progress-background	Background of the progress bar representing the current value