ion-spinner
Spinner组件提供各种动画SVG微调器。旋转指示器是应用程序正在加载内容或执行另一个用户需要等待的进程的可视化指示器。
使用的默认微调器基于平台。的默认微调项
ios
是
“行”
,默认值为
安卓
是
“新月”
.如果平台不是
ios
或
安卓
,微调器将默认为
新月
.如果
的名字
属性设置后,将使用该微调器而不是平台特定的微调器。
使用
<!——默认微调器——>
<
ion-spinner
>
ion-spinner
>
<!——行——>
<
ion-spinner
的名字
=
"
行
"
>
ion-spinner
>
<!——小线——>
<
ion-spinner
的名字
=
"
lines-small
"
>
ion-spinner
>
<!- - -点- - - >
<
ion-spinner
的名字
=
"
点
"
>
ion-spinner
>
<!——泡沫——>
<
ion-spinner
的名字
=
"
泡沫
"
>
ion-spinner
>
<!-圆- >
<
ion-spinner
的名字
=
"
圈
"
>
ion-spinner
>
<!——新月>
<
ion-spinner
的名字
=
"
新月
"
>
ion-spinner
>
<!默认旋转器——>
<
ion-spinner
停顿了一下
>
ion-spinner
>
复制
复制
<!——默认微调器——>
<
ion-spinner
>
ion-spinner
>
<!——行——>
<
ion-spinner
的名字
=
"
行
"
>
ion-spinner
>
<!——小线——>
<
ion-spinner
的名字
=
"
lines-small
"
>
ion-spinner
>
<!- - -点- - - >
<
ion-spinner
的名字
=
"
点
"
>
ion-spinner
>
<!——泡沫——>
<
ion-spinner
的名字
=
"
泡沫
"
>
ion-spinner
>
<!-圆- >
<
ion-spinner
的名字
=
"
圈
"
>
ion-spinner
>
<!——新月>
<
ion-spinner
的名字
=
"
新月
"
>
ion-spinner
>
<!默认旋转器——>
<
ion-spinner
停顿了一下
>
ion-spinner
>
复制
复制
进口
反应
从
“反应”
;
进口
{
IonSpinner
,
IonContent
}
从
“@betway东盟体育appionic /反应”
;
出口
常量
SpinnerExample
:
反应
.
足球俱乐部
=
(
)
=>
(
<
IonContent
>
{
/*——默认微调器——*/
}
<
IonSpinner
/>
{
/ *——行——* /
}
<
IonSpinner
的名字
=
"
行
"
/>
{
/*——行小——*/
}
<
IonSpinner
的名字
=
"
lines-small
"
/>
{
/ *——点——* /
}
<
IonSpinner
的名字
=
"
点
"
/>
{
/ *——泡沫——* /
}
<
IonSpinner
的名字
=
"
泡沫
"
/>
{
/ *——圈* /
}
<
IonSpinner
的名字
=
"
圈
"
/>
{
/ *——新月* /
}
<
IonSpinner
的名字
=
"
新月
"
/>
{
/*——Paused Default Spinner——*/
}
<
IonSpinner
停顿了一下
/>
IonContent
>
)
;
复制
复制
进口
{
组件
,
h
}
从
“@stencil /核心”
;
@
组件
(
{
标签
:
“spinner-example”
,
styleUrl
:
“spinner-example.css”
}
)
出口
类
SpinnerExample
{
渲染
(
)
{
返回
[
/ /默认的转轮
<
ion-spinner
>
ion-spinner
>
,
/ /行
<
ion-spinner
的名字
=
"
行
"
>
ion-spinner
>
,
/ /线小
<
ion-spinner
的名字
=
"
lines-small
"
>
ion-spinner
>
,
/ /点
<
ion-spinner
的名字
=
"
点
"
>
ion-spinner
>
,
/ /泡沫
<
ion-spinner
的名字
=
"
泡沫
"
>
ion-spinner
>
,
/ /圈
<
ion-spinner
的名字
=
"
圈
"
>
ion-spinner
>
,
/ /新月
<
ion-spinner
的名字
=
"
新月
"
>
ion-spinner
>
,
//暂停默认旋转器
<
ion-spinner
停顿了一下
=
{
真正的
}
>
ion-spinner
>
]
;
}
}
复制
复制
<
模板
>
<!——默认微调器——>
<
ion-spinner
>
ion-spinner
>
<!——行——>
<
ion-spinner
的名字
=
"
行
"
>
ion-spinner
>
<!——小线——>
<
ion-spinner
的名字
=
"
lines-small
"
>
ion-spinner
>
<!- - -点- - - >
<
ion-spinner
的名字
=
"
点
"
>
ion-spinner
>
<!——泡沫——>
<
ion-spinner
的名字
=
"
泡沫
"
>
ion-spinner
>
<!-圆- >
<
ion-spinner
的名字
=
"
圈
"
>
ion-spinner
>
<!——新月>
<
ion-spinner
的名字
=
"
新月
"
>
ion-spinner
>
<!默认旋转器——>
<
ion-spinner
停顿了一下
>
ion-spinner
>
模板
>
<
脚本
>
进口
{
IonSpinner
}
从
“@betway东盟体育appionic / vue”
;
进口
{
defineComponent
}
从
“vue”
;
出口
默认的
defineComponent
(
{
组件
:
{
IonSpinner
}
}
)
;
脚本
>
复制
复制
属性
颜色 |
|
---|---|
描述 |
应用程序调色板中要使用的颜色。默认的选项是: |
属性 |
颜色 |
类型 |
字符串|未定义 |
持续时间 |
|
描述 |
旋转器动画的持续时间,以毫秒为单位。默认值根据微调器的不同而不同。 |
属性 |
持续时间 |
类型 |
|数量未定义 |
的名字 |
|
描述 |
要使用的SVG微调器的名称。如果没有提供名称,将使用平台的默认微调器。 |
属性 |
的名字 |
类型 |
“泡泡”|“圆圈”|“圆形”|“新月形”|“圆点”|“线条”|“线条-小“|未定义 |
停顿了一下 |
|
描述 |
如果 |
属性 |
停顿了一下 |
类型 |
布尔 |
默认的 |
假 |
CSS自定义属性
的名字 | 描述 |
---|---|
——颜色 |
旋转器的颜色 |