跳到主要内容
版本:v8

按钮组件组

scoped

Buttons 组件是一个容器元素。它应放置在 toolbar 内部,并可包含多种类型的按钮,包括标准 buttonmenu buttonback button

基本用法

按钮位置

可以使用命名插槽将按钮定位在工具栏内部。下表描述了每个插槽。

插槽描述
start在 LTR 语言中定位到内容的左侧,在 RTL 语言中定位到右侧
end在 LTR 语言中定位到内容的右侧,在 RTL 语言中定位到左侧
secondaryios 模式下将元素定位到内容的左侧,在 md 模式下直接定位到右侧
primaryios 模式下将元素定位到内容的右侧,在 md 模式下定位到最右侧

按钮类型

工具栏中的按钮默认样式为透明(clear),但可以通过设置按钮的 fill 属性来更改。此示例中 back buttonmenu button 包含的属性仅用于演示;请参阅各自文档了解正确用法。

可折叠按钮

可以在 buttons 上设置 collapse 属性,使其在标题折叠时一同折叠。这通常与 可折叠大标题 一起使用。

信息

此功能仅适用于 iOS 平台。

属性

collapse

DescriptionIf true, buttons will disappear when its parent toolbar has fully collapsed if the toolbar is not the first toolbar. If the toolbar is the first toolbar, the buttons will be hidden and will only be shown once all toolbars have fully collapsed.

Only applies in ios mode with collapse set to true on ion-header.

Typically used for Collapsible Large Titles
Attributecollapse
Typeboolean
Defaultfalse

事件

No events available for this component.

方法

No public methods available for this component.

CSS Shadow Parts

No CSS shadow parts available for this component.

CSS 自定义属性

No CSS custom properties available for this component.

插槽

No slots available for this component.