ion-header

Header 是页面的根组件，它将自身对齐到页面顶部。建议将其用作一个或多个工具栏的包装器，但它也可以用于包装任何元素。当在 header 内部使用工具栏时，内容将被调整以使其尺寸正确，并且 header 将考虑任何设备安全区域。

基本用法

半透明头部

通过设置 translucent 属性，Header 可以匹配原生 iOS 应用中的透明效果。为了看到内容在头部后面滚动，需要在内容上设置 fullscreen 属性。此效果仅在模式为 "ios" 且设备支持 backdrop-filter 时生效。

紧凑头部

Ionic 提供了原生 iOS 应用中的功能，可以显示大工具栏标题，然后在滚动时将其折叠为小标题。这可以通过添加两个 header 来实现，一个在内容上方，一个在内容内部，然后将内容内部的 header 上的 collapse 属性设置为 "condense"。此效果仅在模式为 "ios" 时生效。

淡出头部

许多原生 iOS 应用在工具栏上具有淡出效果。这可以通过将 header 上的 collapse 属性设置为 "fade" 来实现。当页面首次加载时，header 的背景和边框将被隐藏。随着内容的滚动，header 会淡入。此效果仅在模式为 "ios" 时生效。

此功能也可以与紧凑头部结合使用。应将值设置为 "fade" 的 collapse 属性放在内容外部的 header 上。

与虚拟滚动一起使用

淡出头部需要滚动容器才能正常工作。使用虚拟滚动解决方案时，需要提供自定义滚动目标。需要禁用内容上的滚动，并将 .ion-content-scroll-host 类添加到负责滚动的元素上。

边框

在 "md" 模式下，header 底部将具有 box-shadow。在 "ios" 模式下，底部将具有 border。可以通过向 header 添加 .ion-no-border 类来移除这些边框。

属性

collapse

说明	Describes the scroll effect that will be applied to the header. Only applies in iOS mode. Typically used for Collapsible Large Titles
属性	collapse
类型	"condense" ｜ "fade" ｜ undefined
默认值	undefined

mode

说明	The mode determines which platform styles to use. 这是一个虚拟属性，在初始化时设置一次，之后更改其值不会更新组件。
属性	mode
类型	"ios" ｜ "md"
默认值	undefined

translucent

说明	If true, the header will be translucent. Only applies when the mode is "ios" and the device supports backdrop-filter. Note: In order to scroll content behind the header, the fullscreen attribute needs to be set on the content.
属性	translucent
类型	boolean
默认值	false

事件

该组件没有可用的事件。

方法

该组件没有可用的公共方法。

CSS Shadow Parts

该组件没有可用的 CSS 阴影部分。

CSS 自定义属性

该组件没有可用的 CSS 自定义属性。

插槽

该组件没有可用的插槽。