搜索文档 /
作用域

ion-buttons

Buttons组件是一个容器元素。工具栏中的按钮应该放在 < ion-buttons > 元素。

< ion-buttons > 元素可以使用指定的槽定位到工具栏内部。下面的图表描述了每个槽。

描述
二次 的位置元素 的内容 ios 模式,并直接到 正确的 医学博士 模式。
的位置元素 正确的 的内容 ios Mode, and to the far 正确的 医学博士 模式。
开始 职位的 的内容在LTR,和 正确的 在RTL。
结束 职位的 正确的 的内容在LTR,和 在RTL。

使用


                  <
                 ion-toolbar
                 >
               
                  <
                 ion-buttons
                
                 
                  
                  
                 开始
                  
                 >
               
                  <
                 ion-back-button
                 >
                  
                 ion-back-button
                 >
               
                  
                 ion-buttons
                 >
               
                  <
                 ion-title
                 >
               后退按钮
                  
                 ion-title
                 >
               
                  
                 ion-toolbar
                 >
               
                  <
                 ion-toolbar
                 >
               
                  <
                 ion-buttons
                
                 
                  
                  
                 二次
                  
                 >
               
                  <
                 ion-button
                 >
               
                  <
                 ion-icon
                
                 
                  
                  
                 icon-only
                  
                
                 的名字
                  
                  
                 人圆
                  
                 >
                  
                 ion-icon
                 >
               
                  
                 ion-button
                 >
               
                  <
                 ion-button
                 >
               
                  <
                 ion-icon
                
                 
                  
                  
                 icon-only
                  
                
                 的名字
                  
                  
                 搜索
                  
                 >
                  
                 ion-icon
                 >
               
                  
                 ion-button
                 >
               
                  
                 ion-buttons
                 >
               
                  <
                 ion-title
                 >
               默认按钮
                  
                 ion-title
                 >
               
                  <
                 ion-buttons
                
                 
                  
                  
                 
                  
                 >
               
                  <
                 ion-button
                
                 颜色
                  
                  
                 二次
                  
                 >
               
                  <
                 ion-icon
                
                 
                  
                  
                 icon-only
                  
                
                 ios
                  
                  
                 ellipsis-horizontal
                  
                
                 医学博士
                  
                  
                 ellipsis-vertical
                  
                 >
                  
                 ion-icon
                 >
               
                  
                 ion-button
                 >
               
                  
                 ion-buttons
                 >
               
                  
                 ion-toolbar
                 >
               
                  <
                 ion-toolbar
                 >
               
                  <
                 ion-buttons
                
                 
                  
                  
                 
                  
                 >
               
                  <
                 ion-button
                
                 (点击)
                  
                  
                 clickedStar ()
                  
                 >
               
                  <
                 ion-icon
                
                 
                  
                  
                 icon-only
                  
                
                 的名字
                  
                  
                 明星
                  
                 >
                  
                 ion-icon
                 >
               
                  
                 ion-button
                 >
               
                  
                 ion-buttons
                 >
               
                  <
                 ion-title
                 >
               右侧菜单切换
                  
                 ion-title
                 >
               
                  <
                 ion-buttons
                
                 
                  
                  
                 结束
                  
                 >
               
                  <
                 ion-menu-button
                
                 自动隐藏
                  
                  
                 
                  
                 >
                  
                 ion-menu-button
                 >
               
                  
                 ion-buttons
                 >
               
                  
                 ion-toolbar
                 >
               
                  <
                 ion-toolbar
                 >
               
                  <
                 ion-buttons
                
                 崩溃
                  
                  
                 真正的
                  
                 >
               
                  <
                 ion-button
                 >
               
                  <
                 ion-icon
                
                 
                  
                  
                 icon-only
                  
                
                 的名字
                  
                  
                 明星
                  
                 >
                  
                 ion-icon
                 >
               
                  
                 ion-button
                 >
               
                  
                 ion-buttons
                 >
               
                  <
                 ion-title
                 >
               可折叠的按钮
                  
                 ion-title
                 >
               
                  
                 ion-toolbar
                 >
复制 复制

                  <
                 ion-toolbar
                 >
               
                  <
                 ion-buttons
                
                 
                  
                  
                 开始
                  
                 >
               
                  <
                 ion-back-button
                 >
                  
                 ion-back-button
                 >
               
                  
                 ion-buttons
                 >
               
                  <
                 ion-title
                 >
               后退按钮
                  
                 ion-title
                 >
               
                  
                 ion-toolbar
                 >
               
                  <
                 ion-toolbar
                 >
               
                  <
                 ion-buttons
                
                 
                  
                  
                 二次
                  
                 >
               
                  <
                 ion-button
                 >
               
                  <
                 ion-icon
                
                 
                  
                  
                 icon-only
                  
                
                 的名字
                  
                  
                 人圆
                  
                 >
                  
                 ion-icon
                 >
               
                  
                 ion-button
                 >
               
                  <
                 ion-button
                 >
               
                  <
                 ion-icon
                
                 
                  
                  
                 icon-only
                  
                
                 的名字
                  
                  
                 搜索
                  
                 >
                  
                 ion-icon
                 >
               
                  
                 ion-button
                 >
               
                  
                 ion-buttons
                 >
               
                  <
                 ion-title
                 >
               默认按钮
                  
                 ion-title
                 >
               
                  <
                 ion-buttons
                
                 
                  
                  
                 
                  
                 >
               
                  <
                 ion-button
                
                 颜色
                  
                  
                 二次
                  
                 >
               
                  <
                 ion-icon
                
                 
                  
                  
                 icon-only
                  
                
                 ios
                  
                  
                 ellipsis-horizontal
                  
                
                 医学博士
                  
                  
                 ellipsis-vertical
                  
                 >
                  
                 ion-icon
                 >
               
                  
                 ion-button
                 >
               
                  
                 ion-buttons
                 >
               
                  
                 ion-toolbar
                 >
               
                  <
                 ion-toolbar
                 >
               
                  <
                 ion-buttons
                
                 
                  
                  
                 
                  
                 >
               
                  <
                 ion-button
                
                 onclick
                  
                  
                 clickedStar ()
                  
                 >
               
                  <
                 ion-icon
                
                 
                  
                  
                 icon-only
                  
                
                 的名字
                  
                  
                 明星
                  
                 >
                  
                 ion-icon
                 >
               
                  
                 ion-button
                 >
               
                  
                 ion-buttons
                 >
               
                  <
                 ion-title
                 >
               右侧菜单切换
                  
                 ion-title
                 >
               
                  <
                 ion-buttons
                
                 
                  
                  
                 结束
                  
                 >
               
                  <
                 ion-menu-toggle
                
                 自动隐藏
                  
                  
                 
                  
                 >
               
                  <
                 ion-button
                 >
               
                  <
                 ion-icon
                
                 
                  
                  
                 icon-only
                  
                
                 的名字
                  
                  
                 菜单
                  
                 >
                  
                 ion-icon
                 >
               
                  
                 ion-button
                 >
               
                  
                 ion-menu-toggle
                 >
               
                  
                 ion-buttons
                 >
               
                  
                 ion-toolbar
                 >
               
                  <
                 ion-toolbar
                 >
               
                  <
                 ion-buttons
                
                 崩溃
                  
                  
                 真正的
                  
                 >
               
                  <
                 ion-button
                 >
               
                  <
                 ion-icon
                
                 
                  
                  
                 icon-only
                  
                
                 的名字
                  
                  
                 明星
                  
                 >
                  
                 ion-icon
                 >
               
                  
                 ion-button
                 >
               
                  
                 ion-buttons
                 >
               
                  <
                 ion-title
                 >
               可折叠的按钮
                  
                 ion-title
                 >
               
                  
                 ion-toolbar
                 >
复制 复制

                进口
               反应
                
               
                “反应”
                
               
                进口
               
                
               IonButtons
                
               IonToolbar
                
               IonBackButton
                
               IonTitle
                
               IonButton
                
               betway东盟体育appIonIcon
                
               IonMenuButton
                
               IonContent
                
               
                
               
                “@betway东盟体育appionic /反应”
                
               
                进口
               
                
               personCircle
                
               搜索
                
               明星
                
               ellipsisHorizontal
                
               ellipsisVertical
                
               
                
               
                “betway东盟体育appionicons /图标”
                
               
                出口
               
                常量
               ButtonsExample
                :
               反应
                
                足球俱乐部
               
                
               
                
                
               
                =>
               
                
               
                  <
                  IonContent
                 >
                
                  <
                  IonToolbar
                 >
                
                  <
                  IonButtons
                
                 
                  
                  
                 开始
                  
                 >
                
                  <
                  IonBackButton
                
                 defaultHref
                  
                  
                 /
                  
                
                 />
                
                  
                  IonButtons
                 >
                
                  <
                  IonTitle
                 >
                后退按钮
                  
                  IonTitle
                 >
                
                  
                  IonToolbar
                 >
                
                  <
                  IonToolbar
                 >
                
                  <
                  IonButtons
                
                 
                  
                  
                 二次
                  
                 >
                
                  <
                  IonButton
                 >
                
                  <
                  betway东盟体育appIonIcon
                
                 
                  
                  
                 icon-only
                  
                
                 图标
                  
                  
                 personCircle
                  
                
                 />
                
                  
                  IonButton
                 >
                
                  <
                  IonButton
                 >
                
                  <
                  betway东盟体育appIonIcon
                
                 
                  
                  
                 icon-only
                  
                
                 图标
                  
                  
                 搜索
                  
                
                 />
                
                  
                  IonButton
                 >
                
                  
                  IonButtons
                 >
                
                  <
                  IonTitle
                 >
                默认按钮
                  
                  IonTitle
                 >
                
                  <
                  IonButtons
                
                 
                  
                  
                 
                  
                 >
                
                  <
                  IonButton
                
                 颜色
                  
                  
                 二次
                  
                 >
                
                  <
                  betway东盟体育appIonIcon
                
                 
                  
                  
                 icon-only
                  
                
                 ios
                  
                  
                 ellipsisHorizontal
                  
                
                 医学博士
                  
                  
                 ellipsisVertical
                  
                
                 />
                
                  
                  IonButton
                 >
                
                  
                  IonButtons
                 >
                
                  
                  IonToolbar
                 >
                
                  <
                  IonToolbar
                 >
                
                  <
                  IonButtons
                
                 
                  
                  
                 
                  
                 >
                
                  <
                  IonButton
                
                 onClick
                  
                  
                  
                  
                 
                  =>
                 
                  
                  
                  
                 >
                
                  <
                  betway东盟体育appIonIcon
                
                 
                  
                  
                 icon-only
                  
                
                 图标
                  
                  
                 明星
                  
                
                 />
                
                  
                  IonButton
                 >
                
                  
                  IonButtons
                 >
                
                  <
                  IonTitle
                 >
                右侧菜单切换
                  
                  IonTitle
                 >
                
                  <
                  IonButtons
                
                 
                  
                  
                 结束
                  
                 >
                
                  <
                  IonMenuButton
                
                 自动隐藏
                  
                  
                  
                  
                
                 />
                
                  
                  IonButtons
                 >
                
                  
                  IonToolbar
                 >
                
                  <
                  IonToolbar
                 >
                
                  <
                  IonButtons
                
                 崩溃
                  
                  
                 真正的
                  
                 >
                
                  <
                  IonButton
                 >
                
                  <
                  betway东盟体育appIonIcon
                
                 
                  
                  
                 icon-only
                  
                
                 图标
                  
                  
                 明星
                  
                
                 />
                
                  
                  IonButton
                 >
                
                  
                  IonButtons
                 >
                
                  <
                  IonTitle
                 >
                可折叠的按钮
                  
                  IonTitle
                 >
                
                  
                  IonToolbar
                 >
                
                  
                  IonContent
                 >
               
                
                
复制 复制

                进口
               
                
               组件
                
               h
                
               
                
               
                “@stencil /核心”
                
               
                组件
                
                
               标签
                :
               
                “buttons-example”
                
               styleUrl
                :
               
                “buttons-example.css”
               
                
                
               
                出口
               
                
               
                ButtonsExample
               
                
               
                clickedStar
                
                
               
                
               
                控制台
                
                日志
                
                “点击星按钮”
                
                
               
                
               
                渲染
                
                
               
                
               
                返回
               
                
               
                  <
                 ion-toolbar
                 >
                
                  <
                 ion-buttons
                
                 
                  
                  
                 开始
                  
                 >
                
                  <
                 ion-back-button
                 >
                  
                 ion-back-button
                 >
                
                  
                 ion-buttons
                 >
                
                  <
                 ion-title
                 >
                后退按钮
                  
                 ion-title
                 >
                
                  
                 ion-toolbar
                 >
                
               
                  <
                 ion-toolbar
                 >
                
                  <
                 ion-buttons
                
                 
                  
                  
                 二次
                  
                 >
                
                  <
                 ion-button
                 >
                
                  <
                 ion-icon
                
                 
                  
                  
                 icon-only
                  
                
                 的名字
                  
                  
                 人圆
                  
                 >
                  
                 ion-icon
                 >
                
                  
                 ion-button
                 >
                
                  <
                 ion-button
                 >
                
                  <
                 ion-icon
                
                 
                  
                  
                 icon-only
                  
                
                 的名字
                  
                  
                 搜索
                  
                 >
                  
                 ion-icon
                 >
                
                  
                 ion-button
                 >
                
                  
                 ion-buttons
                 >
                
                  <
                 ion-title
                 >
                默认按钮
                  
                 ion-title
                 >
                
                  <
                 ion-buttons
                
                 
                  
                  
                 
                  
                 >
                
                  <
                 ion-button
                
                 颜色
                  
                  
                 二次
                  
                 >
                
                  <
                 ion-icon
                
                 
                  
                  
                 icon-only
                  
                
                 ios
                  
                  
                 ellipsis-horizontal
                  
                
                 医学博士
                  
                  
                 ellipsis-vertical
                  
                 >
                  
                 ion-icon
                 >
                
                  
                 ion-button
                 >
                
                  
                 ion-buttons
                 >
                
                  
                 ion-toolbar
                 >
                
               
                  <
                 ion-toolbar
                 >
                
                  <
                 ion-buttons
                
                 
                  
                  
                 
                  
                 >
                
                  <
                 ion-button
                
                 onClick
                  
                  
                  
                  
                 
                  =>
                 
                  
                  
                  clickedStar
                  
                  
                  
                 >
                
                  <
                 ion-icon
                
                 
                  
                  
                 icon-only
                  
                
                 的名字
                  
                  
                 明星
                  
                 >
                  
                 ion-icon
                 >
                
                  
                 ion-button
                 >
                
                  
                 ion-buttons
                 >
                
                  <
                 ion-title
                 >
                右侧菜单切换
                  
                 ion-title
                 >
                
                  <
                 ion-buttons
                
                 
                  
                  
                 结束
                  
                 >
                
                  <
                 ion-menu-button
                
                 自动隐藏
                  
                  
                  
                  
                 >
                  
                 ion-menu-button
                 >
                
                  
                 ion-buttons
                 >
                
                  
                 ion-toolbar
                 >
                
               
                  <
                 ion-toolbar
                 >
                
                  <
                 ion-buttons
                
                 崩溃
                  
                  
                  真正的
                  
                 >
                
                  <
                 ion-button
                 >
                
                  <
                 ion-icon
                
                 
                  
                  
                 icon-only
                  
                
                 的名字
                  
                  
                 明星
                  
                 >
                  
                 ion-icon
                 >
                
                  
                 ion-button
                 >
                
                  
                 ion-buttons
                 >
                
                  <
                 ion-title
                 >
                可折叠的按钮
                  
                 ion-title
                 >
                
                  
                 ion-toolbar
                 >
               
                
                
               
                
               
                
复制 复制

                  <
                 模板
                 >
               
                  <
                 ion-toolbar
                 >
               
                  <
                 ion-buttons
                
                 
                  
                  
                 开始
                  
                 >
               
                  <
                 ion-back-button
                 >
                  
                 ion-back-button
                 >
               
                  
                 ion-buttons
                 >
               
                  <
                 ion-title
                 >
               后退按钮
                  
                 ion-title
                 >
               
                  
                 ion-toolbar
                 >
               
                  <
                 ion-toolbar
                 >
               
                  <
                 ion-buttons
                
                 
                  
                  
                 二次
                  
                 >
               
                  <
                 ion-button
                 >
               
                  <
                 ion-icon
                
                 
                  
                  
                 icon-only
                  
                
                 :图标
                  
                  
                 personCircle
                  
                 >
                  
                 ion-icon
                 >
               
                  
                 ion-button
                 >
               
                  <
                 ion-button
                 >
               
                  <
                 ion-icon
                
                 
                  
                  
                 icon-only
                  
                
                 :图标
                  
                  
                 搜索
                  
                 >
                  
                 ion-icon
                 >
               
                  
                 ion-button
                 >
               
                  
                 ion-buttons
                 >
               
                  <
                 ion-title
                 >
               默认按钮
                  
                 ion-title
                 >
               
                  <
                 ion-buttons
                
                 
                  
                  
                 
                  
                 >
               
                  <
                 ion-button
                
                 颜色
                  
                  
                 二次
                  
                 >
               
                  <
                 ion-icon
                
                 
                  
                  
                 icon-only
                  
                
                 ios
                  
                  
                 ellipsis-horizontal
                  
                
                 医学博士
                  
                  
                 ellipsis-vertical
                  
                 >
                  
                 ion-icon
                 >
               
                  
                 ion-button
                 >
               
                  
                 ion-buttons
                 >
               
                  
                 ion-toolbar
                 >
               
                  <
                 ion-toolbar
                 >
               
                  <
                 ion-buttons
                
                 
                  
                  
                 
                  
                 >
               
                  <
                 ion-button
                
                 @click
                  
                  
                 clickedStar ()
                  
                 >
               
                  <
                 ion-icon
                
                 
                  
                  
                 icon-only
                  
                
                 的名字
                  
                  
                 明星
                  
                 >
                  
                 ion-icon
                 >
               
                  
                 ion-button
                 >
               
                  
                 ion-buttons
                 >
               
                  <
                 ion-title
                 >
               右侧菜单切换
                  
                 ion-title
                 >
               
                  <
                 ion-buttons
                
                 
                  
                  
                 结束
                  
                 >
               
                  <
                 ion-menu-button
                
                 自动隐藏
                  
                  
                 
                  
                 >
                  
                 ion-menu-button
                 >
               
                  
                 ion-buttons
                 >
               
                  
                 ion-toolbar
                 >
               
                  <
                 ion-toolbar
                 >
               
                  <
                 ion-buttons
                
                 崩溃
                  
                  
                 真正的
                  
                 >
               
                  <
                 ion-button
                 >
               
                  <
                 ion-icon
                
                 
                  
                  
                 icon-only
                  
                
                 的名字
                  
                  
                 明星
                  
                 >
                  
                 ion-icon
                 >
               
                  
                 ion-button
                 >
               
                  
                 ion-buttons
                 >
               
                  <
                 ion-title
                 >
               可折叠的按钮
                  
                 ion-title
                 >
               
                  
                 ion-toolbar
                 >
               
                  
                 模板
                 >
               
                  <
                 脚本
                 >
                 
                  进口
                 
                  
                 IonBackButton
                  
                 IonButton
                  
                 IonButtons
                  
                 betway东盟体育appIonIcon
                  
                 IonMenuButton
                  
                 IonTitle
                  
                 IonToolbar
                  
                 
                  
                 
                  “@betway东盟体育appionic / vue”
                  
                 
                  进口
                 
                  
                 personCircle
                  
                 搜索
                  
                 
                  
                 
                  “betway东盟体育appionicons /图标”
                  
                 
                  进口
                 
                  
                 defineComponent
                  
                 
                  
                 
                  “vue”
                  
                 
                  出口
                 
                  默认的
                 
                  defineComponent
                  
                  
                 组件
                  :
                 
                  
                 IonBackButton
                  
                 IonButton
                  
                 IonButtons
                  
                 betway东盟体育appIonIcon
                  
                 IonMenuButton
                  
                 IonTitle
                  
                 IonToolbar
                  
                  
                 
                  设置
                  
                  
                 
                  
                 
                  常量
                 
                  clickedStar
                 
                  
                 
                  
                  
                 
                  =>
                 
                  
                 控制台
                  
                  日志
                  
                  “星点击!”
                  
                  
                 
                  
                 
                  返回
                 
                  
                 personCircle
                  
                 搜索
                  
                 clickedStar
                  
                  
                 
                  
                 
                  
                  
                  
                 
                  
                 脚本
                 >
复制 复制

属性

崩溃

描述

如果为true,当它的父工具栏完全折叠时,如果工具栏不是第一个工具栏,按钮将消失。如果工具栏是第一个工具栏,按钮将被隐藏,只有在所有工具栏完全折叠后才会显示出来。

只适用于ios模式崩溃设置为真正的ion-header

通常用于可折叠的大标题

属性 崩溃
类型 布尔
默认的
Baidu