搜索文档 /
影子

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
                  
                 
                  
                  
                  
                 
                  
                 脚本
                 >
复制 复制

属性

激活

描述

如果真正的时,fab列表将显示列表中的所有fab按钮。

属性 激活
类型 布尔
默认的

一边

描述

生产厂列表将显示在相对于主生产厂按钮的一侧。

属性 一边
类型 "bottom" | "end" | "start" | "top"
默认的 “底”
Baidu