Skip to main content

ion-buttons

scoped

Buttons 组件是一个容器元素。它应该在 toolbar 内部使用,并且可以包含多种类型的按钮,包括标准 buttons菜单按钮返回按钮

¥The Buttons component is a container element. It should be used inside of a toolbar and can contain several types of buttons, including standard buttons, menu buttons, and back buttons.

基本用法

¥Basic Usage

按钮放置

¥Buttons Placement

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

¥Buttons can be positioned inside of the toolbar using a named slot. The below chart has a description of each slot.

插槽描述
start在 LTR 中定位到内容的 left,在 RTL 中定位到内容的 right
end在 LTR 中定位到内容的 right,在 RTL 中定位到内容的 left
secondaryios 模式下将元素定位到内容的 left,在 md 模式下直接定位到内容的 right
primaryios 模式下将元素定位到内容的 right,在 md 模式下将元素定位到最远的 right

按钮类型

¥Types of Buttons

默认情况下,工具栏中的按钮的样式设置为清晰,但可以使用按钮上的 fill 属性更改此设置。本例中 返回键菜单按钮 上包含的属性用于显示目的;请参阅各自的文档以了解正确使用方法。

¥A button in a toolbar is styled to be clear by default, but this can be changed using the fill property on the button. The properties included on back button and menu button in this example are for display purposes; see their respective documentation for proper usage.

可折叠按钮

¥Collapsible Buttons

可以在按钮上设置 collapse 属性,以便在标题折叠时折叠它们。这通常与 可折叠的大标题 一起使用。

¥The collapse property can be set on the buttons to collapse them when the header collapses. This is typically used with collapsible large titles.

信息

此功能仅适用于 iOS。

¥This feature is only available for iOS.

属性

¥Properties

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

事件

¥Events

No events available for this component.

方法

¥Methods

No public methods available for this component.

CSS 阴影部分

¥CSS Shadow Parts

No CSS shadow parts available for this component.

CSS 自定义属性

¥CSS Custom Properties

No CSS custom properties available for this component.

插槽

¥Slots

No slots available for this component.