ion-buttons
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 。 |
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.