跳到主要内容
版本:v7

ion-buttons

scoped

按钮组件是一个容器元素。它应放置在工具栏内部,并可包含多种类型的按钮,包括标准按钮菜单按钮返回按钮

基本用法

按钮放置位置

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

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

按钮类型

工具栏中的按钮默认样式为透明,但可以通过按钮上的 fill 属性进行更改。此示例中返回按钮菜单按钮包含的属性仅用于展示目的;请参阅它们各自的文档以了解正确用法。

可折叠按钮

可以在按钮上设置 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.