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