ion-buttons
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。 |
secondary | 在 ios 模式下将元素定位到内容的 left,在 md 模式下直接定位到 right。 |
primary | 在 ios 模式下将元素定位到内容的 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
| Description | If 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 |
| Attribute | collapse |
| Type | boolean |
| Default | false |
事件
🌐 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.