ion-progress-bar
コンテンツ
プログレスバーは、アプリのロード、フォームの送信、更新の保存など、進行中の処理の状態をユーザーに知らせるものです。プログレスバーには2つのタイプがあります。プログレスバーには、determinate
とindeterminate
の2種類があります。
進捗のタイプ
Determinate
Determinateはデフォルトのタイプです。操作のパーセンテージがわかっている場合に使用されるべきです。進行状況は value
プロパティを設定することで表現されます。これは、進捗が0から100%まで増加するように表示するために使用できます。
buffer
プロパティが設定されている場合、バッファストリームがアニメーションの円と共に表示され、アクティビティを示します。また、buffer
プロパティの値は、目に見えるトラックの量によって表されます。もし、buffer
の値が value
プロパティよりも小さい場合、可視トラックはありません。もし buffer
が 1
と等しい場合は、バッファストリームは隠されます。
Indeterminate
Indeterminateタイプは、処理にかかる時間が不明な場合に使用します。プログレスバーは value
と連動しておらず、処理が完了するまでトラックに沿ってスライドしつづけます。
使い方
- Angular
- Javascript
- React
- Stencil
- Vue
<!-- 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: "primary" , "secondary" , "tertiary" , "success" , "warning" , "danger" , "light" , "medium" , and "dark" . For more information on colors, see theming. |
Attribute | color |
Type | "danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined |
Default | undefined |
mode
Description | The mode determines which platform styles to use. |
Attribute | mode |
Type | "ios" | "md" |
Default | undefined |
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 |
イベント
No events available for this component.
メソッド
No public methods available for this component.
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カスタムプロパティ
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 |
Slots
No slots available for this component.