ion-fab-list
的
ion-fab-list
元素是多个fab按钮的容器。此fab按钮集合包含与主fab按钮相关的操作,单击即可弹出。要指定按钮应该出现在哪一边,请设置
一边
属性为'start', 'end', 'top', 'bottom'
使用
<
ion-fab
垂直
=
"
中心
"
水平
=
"
中心
"
>
<
ion-fab-button
>
分享
ion-fab-button
>
<
ion-fab-list
一边
=
"
前
"
>
<
ion-fab-button
>
<
ion-icon
的名字
=
"
logo-facebook
"
>
ion-icon
>
ion-fab-button
>
<
ion-fab-button
>
<
ion-icon
的名字
=
"
logo-twitter
"
>
ion-icon
>
ion-fab-button
>
<
ion-fab-button
>
<
ion-icon
的名字
=
"
logo-youtube
"
>
ion-icon
>
ion-fab-button
>
ion-fab-list
>
<
ion-fab-list
一边
=
"
结束
"
>
<
ion-fab-button
>
<
ion-icon
的名字
=
"
logo-pwa
"
>
ion-icon
>
ion-fab-button
>
<
ion-fab-button
>
<
ion-icon
的名字
=
"
logo-npm
"
>
ion-icon
>
ion-fab-button
>
<
ion-fab-button
>
<
ion-icon
的名字
=
"
logo-betway东盟体育appionic
"
>
ion-icon
>
ion-fab-button
>
ion-fab-list
>
<
ion-fab-list
一边
=
"
底
"
>
<
ion-fab-button
>
<
ion-icon
的名字
=
"
logo-github
"
>
ion-icon
>
ion-fab-button
>
<
ion-fab-button
>
<
ion-icon
的名字
=
"
logo-javascript
"
>
ion-icon
>
ion-fab-button
>
<
ion-fab-button
>
<
ion-icon
的名字
=
"
logo-angular
"
>
ion-icon
>
ion-fab-button
>
ion-fab-list
>
<
ion-fab-list
一边
=
"
开始
"
>
<
ion-fab-button
>
<
ion-icon
的名字
=
"
logo-vimeo
"
>
ion-icon
>
ion-fab-button
>
<
ion-fab-button
>
<
ion-icon
的名字
=
"
logo-chrome
"
>
ion-icon
>
ion-fab-button
>
<
ion-fab-button
>
<
ion-icon
的名字
=
"
logo-react
"
>
ion-icon
>
ion-fab-button
>
ion-fab-list
>
ion-fab
>
复制
复制
<
ion-fab
垂直
=
"
中心
"
水平
=
"
中心
"
>
<
ion-fab-button
>
分享
ion-fab-button
>
<
ion-fab-list
一边
=
"
前
"
>
<
ion-fab-button
>
<
ion-icon
的名字
=
"
logo-facebook
"
>
ion-icon
>
ion-fab-button
>
<
ion-fab-button
>
<
ion-icon
的名字
=
"
logo-twitter
"
>
ion-icon
>
ion-fab-button
>
<
ion-fab-button
>
<
ion-icon
的名字
=
"
logo-youtube
"
>
ion-icon
>
ion-fab-button
>
ion-fab-list
>
<
ion-fab-list
一边
=
"
结束
"
>
<
ion-fab-button
>
<
ion-icon
的名字
=
"
logo-pwa
"
>
ion-icon
>
ion-fab-button
>
<
ion-fab-button
>
<
ion-icon
的名字
=
"
logo-npm
"
>
ion-icon
>
ion-fab-button
>
<
ion-fab-button
>
<
ion-icon
的名字
=
"
logo-betway东盟体育appionic
"
>
ion-icon
>
ion-fab-button
>
ion-fab-list
>
<
ion-fab-list
一边
=
"
底
"
>
<
ion-fab-button
>
<
ion-icon
的名字
=
"
logo-github
"
>
ion-icon
>
ion-fab-button
>
<
ion-fab-button
>
<
ion-icon
的名字
=
"
logo-javascript
"
>
ion-icon
>
ion-fab-button
>
<
ion-fab-button
>
<
ion-icon
的名字
=
"
logo-angular
"
>
ion-icon
>
ion-fab-button
>
ion-fab-list
>
<
ion-fab-list
一边
=
"
开始
"
>
<
ion-fab-button
>
<
ion-icon
的名字
=
"
logo-vimeo
"
>
ion-icon
>
ion-fab-button
>
<
ion-fab-button
>
<
ion-icon
的名字
=
"
logo-chrome
"
>
ion-icon
>
ion-fab-button
>
<
ion-fab-button
>
<
ion-icon
的名字
=
"
logo-react
"
>
ion-icon
>
ion-fab-button
>
ion-fab-list
>
ion-fab
>
复制
复制
进口
反应
从
“反应”
;
进口
{
IonFab
,
IonFabButton
,
IonFabList
,
IonContent
,
betway东盟体育appIonIcon
}
从
“@betway东盟体育appionic /反应”
;
进口
{
logoFacebook
,
logoTwitter
,
logoYoutube
,
logoPwa
,
logoNpm
,
logobetway东盟体育appIonic
,
logoGithub
,
logoJavascript
,
logoAngular
,
logoVimeo
,
logoChrome
,
logoReact
}
从
“betway东盟体育appionicons /图标”
;
出口
常量
FabListExample
:
反应
.
足球俱乐部
=
(
)
=>
(
<
IonContent
>
<
IonFab
垂直
=
"
中心
"
水平
=
"
中心
"
>
<
IonFabButton
>
分享
IonFabButton
>
<
IonFabList
一边
=
"
前
"
>
<
IonFabButton
>
<
betway东盟体育appIonIcon
图标
=
{
logoFacebook
}
/>
IonFabButton
>
<
IonFabButton
>
<
betway东盟体育appIonIcon
图标
=
{
logoTwitter
}
/>
IonFabButton
>
<
IonFabButton
>
<
betway东盟体育appIonIcon
图标
=
{
logoYoutube
}
/>
IonFabButton
>
IonFabList
>
<
IonFabList
一边
=
"
结束
"
>
<
IonFabButton
>
<
betway东盟体育appIonIcon
图标
=
{
logoPwa
}
/>
IonFabButton
>
<
IonFabButton
>
<
betway东盟体育appIonIcon
图标
=
{
logoNpm
}
/>
IonFabButton
>
<
IonFabButton
>
<
betway东盟体育appIonIcon
图标
=
{
logobetway东盟体育appIonic
}
/>
IonFabButton
>
IonFabList
>
<
IonFabList
一边
=
"
底
"
>
<
IonFabButton
>
<
betway东盟体育appIonIcon
图标
=
{
logoGithub
}
/>
IonFabButton
>
<
IonFabButton
>
<
betway东盟体育appIonIcon
图标
=
{
logoJavascript
}
/>
IonFabButton
>
<
IonFabButton
>
<
betway东盟体育appIonIcon
图标
=
{
logoAngular
}
/>
IonFabButton
>
IonFabList
>
<
IonFabList
一边
=
"
开始
"
>
<
IonFabButton
>
<
betway东盟体育appIonIcon
图标
=
{
logoVimeo
}
/>
IonFabButton
>
<
IonFabButton
>
<
betway东盟体育appIonIcon
图标
=
{
logoChrome
}
/>
IonFabButton
>
<
IonFabButton
>
<
betway东盟体育appIonIcon
图标
=
{
logoReact
}
/>
IonFabButton
>
IonFabList
>
IonFab
>
IonContent
>
)
;
复制
复制
进口
{
组件
,
h
}
从
“@stencil /核心”
;
@
组件
(
{
标签
:
“fab-list-example”
,
styleUrl
:
“fab-list-example.css”
}
)
出口
类
FabListExample
{
渲染
(
)
{
返回
[
<
ion-fab
垂直
=
"
中心
"
水平
=
"
中心
"
>
<
ion-fab-button
>
分享
ion-fab-button
>
<
ion-fab-list
一边
=
"
前
"
>
<
ion-fab-button
>
<
ion-icon
的名字
=
"
logo-facebook
"
>
ion-icon
>
ion-fab-button
>
<
ion-fab-button
>
<
ion-icon
的名字
=
"
logo-twitter
"
>
ion-icon
>
ion-fab-button
>
<
ion-fab-button
>
<
ion-icon
的名字
=
"
logo-youtube
"
>
ion-icon
>
ion-fab-button
>
ion-fab-list
>
<
ion-fab-list
一边
=
"
结束
"
>
<
ion-fab-button
>
<
ion-icon
的名字
=
"
logo-pwa
"
>
ion-icon
>
ion-fab-button
>
<
ion-fab-button
>
<
ion-icon
的名字
=
"
logo-npm
"
>
ion-icon
>
ion-fab-button
>
<
ion-fab-button
>
<
ion-icon
的名字
=
"
logo-betway东盟体育appionic
"
>
ion-icon
>
ion-fab-button
>
ion-fab-list
>
<
ion-fab-list
一边
=
"
底
"
>
<
ion-fab-button
>
<
ion-icon
的名字
=
"
logo-github
"
>
ion-icon
>
ion-fab-button
>
<
ion-fab-button
>
<
ion-icon
的名字
=
"
logo-javascript
"
>
ion-icon
>
ion-fab-button
>
<
ion-fab-button
>
<
ion-icon
的名字
=
"
logo-angular
"
>
ion-icon
>
ion-fab-button
>
ion-fab-list
>
<
ion-fab-list
一边
=
"
开始
"
>
<
ion-fab-button
>
<
ion-icon
的名字
=
"
logo-vimeo
"
>
ion-icon
>
ion-fab-button
>
<
ion-fab-button
>
<
ion-icon
的名字
=
"
logo-chrome
"
>
ion-icon
>
ion-fab-button
>
<
ion-fab-button
>
<
ion-icon
的名字
=
"
logo-react
"
>
ion-icon
>
ion-fab-button
>
ion-fab-list
>
ion-fab
>
]
;
}
}
复制
复制
<
模板
>
<
ion-fab
垂直
=
"
底
"
水平
=
"
结束
"
>
<
ion-fab-button
>
分享
ion-fab-button
>
<
ion-fab-list
一边
=
"
前
"
>
<
ion-fab-button
>
脸谱网
ion-fab-button
>
<
ion-fab-button
>
推特
ion-fab-button
>
<
ion-fab-button
>
Youtube
ion-fab-button
>
ion-fab-list
>
<
ion-fab-list
一边
=
"
开始
"
>
<
ion-fab-button
>
Vimeo
ion-fab-button
>
ion-fab-list
>
ion-fab
>
模板
>
<
脚本
>
进口
{
IonFab
,
IonFabButton
,
IonFabList
}
从
“@betway东盟体育appionic / vue”
;
进口
{
defineComponent
}
从
“vue”
;
出口
默认的
defineComponent
(
{
组件
:
{
IonFab
,
IonFabButton
,
IonFabList
}
}
)
;
脚本
>
复制
复制
属性
激活 |
|
---|---|
描述 |
如果 |
属性 |
激活 |
类型 |
布尔 |
默认的 |
假 |
一边 |
|
描述 |
生产厂列表将显示在相对于主生产厂按钮的一侧。 |
属性 |
一边 |
类型 |
"bottom" | "end" | "start" | "top" |
默认的 |
“底” |