Skip to main content

ion-buttons

scoped

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.

info

此功能仅适用于 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.