ion-spinner
Spinnerコンポーネントには、さまざまなアニメーションつきのSVG Spinnerが用意されています。Spinnerは、アプリがコンテンツを読み込んだり、ユーザーが待つ必要のある別のプロセスを実行していることを視覚的に示すものです。
基本的な使い方
デフォルトのスピナーは、モードに基づいて決定されます。モードが ios の場合、スピナーは "lines" となり、モードが md の場合、スピナーは "circular" となります。 name プロパティが設定されている場合は、モード固有のスピナーの代わりに、そのスピナーが使用されます。
テーマ
Colors
Styling
カスタムCSSを使用してスピナーのスタイルを設定できます。たとえば、幅と高さを設定してスピナーのサイズを変更できます。
CSS カスタムプロパティ
プロパティ
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.