ion-header

标题是页面的根组件，它与页面的顶部对齐。建议将其用作一个或多个 工具栏 的包装器，但它可以用作包装任何元素的包装器。当工具栏在标题内使用时，内容将进行调整以正确调整大小，标题将考虑任何设备安全区域。

基本用法

半透明标题

标题可以通过设置 translucent 属性来匹配原生 iOS 应用程序中的透明度。为了看到内容在标题后面滚动，需要在内容上设置 fullscreen 属性。此效果仅在模式为 "ios" 且设备支持 背景滤镜 时才适用。

收缩标题

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

淡入标题

许多原生 iOS 应用程序在工具栏上都有淡入效果。这可以通过将标题的 collapse 属性设置为 "fade" 来实现。页面首次加载时，标题的背景和边框将隐藏。随着内容的滚动，标题将逐渐淡入。此效果仅在模式为“ios”时才适用。

此功能也可以与 收缩标题 组合使用。设置 collapse 属性为 "fade" 的标题应位于内容外部。

与虚拟滚动一起使用

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

边框

在 "md" 模式下，标题将在底部具有 box-shadow。在 "ios" 模式下，它将在底部接收 border。可以通过将 .ion-no-border 类添加到标题来删除这些边框。

属性

collapse

描述	描述将应用于标题的滚动效果。仅适用于 iOS 模式。 通常用于 可折叠的大标题
属性	collapse
类型	"condense" ｜ "fade" ｜ undefined
默认值	undefined

mode

描述	模式决定使用哪个平台样式。
属性	mode
类型	"ios" ｜ "md"
默认值	undefined

translucent

描述	如果为 true，则标题将是半透明的。仅在模式为 "ios" 且设备支持 backdrop-filter 时才适用。 注意：为了在标题后面滚动内容，需要在内容上设置 fullscreen 属性。
属性	translucent
类型	布尔值
默认值	false

事件

此组件没有可用事件。

方法

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

CSS 阴影部分

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

CSS 自定义属性

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

插槽

此组件没有可用的插槽。