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，当它的父工具栏完全折叠时，如果工具栏不是第一个工具栏，按钮将消失。如果工具栏是第一个工具栏，按钮将被隐藏，只有在所有工具栏完全折叠后才会显示出来。 只适用于 通常用于可折叠的大标题 |
| 属性 |
崩溃 |
| 类型 |
布尔 |
| 默认的 |
假 |