ion-progress-bar
ion-progress-bar は操作や処理の進捗を可視化するための、水平方向のプログレスバーです。determinate または indeterminateの2タイプから選択できます。
Progress Type
Determinate
操作の進捗率が分かる場合はdeterminateタイプを選択するべきです。このタイプはデフォルトであり、進捗率はvalue属性値にて指定します。
バッファは何らかの処理中であることを表す、円のアニメーションを表示します。 buffer属性値が1より小さければ、追加のバッファ処理の進捗率を示すことが可能です。
Indeterminate
実行中の操作を表します。操作にかかる時間を示す必要はありません。
reversed="true"を指定した場合、ロード前状態を表すための表示となります。
利用方法
<!-- 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><!-- 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>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>プロパティ
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: |
| 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:
|
| Attribute | type |
| Type | "determinate" | "indeterminate" |
| Default | 'determinate' |
value | |
| Description | The value determines how much of the active bar should display when the |
| Attribute | value |
| Type | number |
| Default | 0 |
CSSカスタムプロパティ
| Name | Description |
|---|---|
--background | Same as --buffer-background when using a determinate progress bar, otherwise it styles the background of the ion-progress-bar itself. |
--buffer-background | Color of the buffer bar |
--progress-background | Color of the progress bar |