ion-spinner
Spinnerコンポーネントには、さまざまなアニメーションつきのSVG Spinnerが用意されています。Spinnerは、アプリがコンテンツを読み込んだり、ユーザーが待つ必要のある別のプロセスを実行していることを視覚的に示すものです。
基本的な使い方
デフォルトのスピナーは、モードに基づいて決定されます。モードが ios
の場合、スピナーは "lines"
となり、モードが md
の場合、スピナーは "circular"
となります。 name
プロパティが設定されている場合は、モード固有のスピナーの代わりに、そのスピナーが使用されます。
<ion-item>
<ion-label>Default</ion-label>
<ion-spinner></ion-spinner>
</ion-item>
<ion-item>
<ion-label>Dots</ion-label>
<ion-spinner name="dots"></ion-spinner>
</ion-item>
<ion-item>
<ion-label>Lines</ion-label>
<ion-spinner name="lines"></ion-spinner>
</ion-item>
<ion-item>
<ion-label>Lines Small</ion-label>
<ion-spinner name="lines-small"></ion-spinner>
</ion-item>
<ion-item>
<ion-label>Lines Sharp</ion-label>
<ion-spinner name="lines-sharp"></ion-spinner>
</ion-item>
<ion-item>
<ion-label>Lines Sharp Small</ion-label>
<ion-spinner name="lines-sharp-small"></ion-spinner>
</ion-item>
<ion-item>
<ion-label>Bubbles</ion-label>
<ion-spinner name="bubbles"></ion-spinner>
</ion-item>
<ion-item>
<ion-label>Circles</ion-label>
<ion-spinner name="circles"></ion-spinner>
</ion-item>
<ion-item>
<ion-label>Circular</ion-label>
<ion-spinner name="circular"></ion-spinner>
</ion-item>
<ion-item>
<ion-label>Crescent</ion-label>
<ion-spinner name="crescent"></ion-spinner>
</ion-item>
テーマ
Colors
<ion-spinner></ion-spinner>
<ion-spinner color="primary"></ion-spinner>
<ion-spinner color="secondary"></ion-spinner>
<ion-spinner color="tertiary"></ion-spinner>
<ion-spinner color="success"></ion-spinner>
<ion-spinner color="warning"></ion-spinner>
<ion-spinner color="danger"></ion-spinner>
<ion-spinner color="light"></ion-spinner>
<ion-spinner color="medium"></ion-spinner>
<ion-spinner color="dark"></ion-spinner>
Styling
You may use custom CSS to style the spinner. For example, you can resize the spinner by setting the width and height.
- src/app/example.component.html
- src/app/example.component.css
<ion-spinner></ion-spinner>
CSS カスタムプロパティ
- src/app/example.component.html
- src/app/example.component.css
<ion-spinner></ion-spinner>
プロパティ
color
Description | アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 "primary" , "secondary" , "tertiary" , "success" , "warning" , "danger" , "light" , "medium" , と "dark" です.色に関する詳しい情報は theming を参照してください。 |
Attribute | color |
Type | "danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string | undefined |
Default | undefined |
duration
Description | スピナーアニメーションの持続時間(ミリ秒)。デフォルトはスピナーによって異なる。 |
Attribute | duration |
Type | number | undefined |
Default | undefined |
name
Description | 使用するSVGスピナーの名前。名前が提供されない場合、プラットフォームのデフォルトのスピナーが使用されます。 |
Attribute | name |
Type | "bubbles" | "circles" | "circular" | "crescent" | "dots" | "lines" | "lines-sharp" | "lines-sharp-small" | "lines-small" | undefined |
Default | undefined |
paused
Description | true の場合、スピナーのアニメーションは一時停止されます。 |
Attribute | paused |
Type | boolean |
Default | false |
イベント
No events available for this component.
メソッド
No public methods available for this component.
CSS Shadow Parts
No CSS shadow parts available for this component.
CSSカスタムプロパティ
Name | Description |
---|---|
--color | スピナーの色 |
Slots
No slots available for this component.