ion-header

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

🌐 Header is a root component of a page that aligns itself to the top of the page. It is recommended to be used as a wrapper for one or more toolbars, but it can be used to wrap any element. When a toolbar is used inside of a header, the content will be adjusted so it is sized correctly, and the header will account for any device safe areas.

基本用法

🌐 Basic Usage

半透明标头

🌐 Translucent Header

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

🌐 Headers can match the transparency found in native iOS applications by setting the translucent property. In order to see the content scrolling behind the header, the fullscreen property needs to be set on the content. This effect will only apply when the mode is "ios" and the device supports backdrop-filter.

压缩标题

🌐 Condensed Header

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

🌐 Ionic provides the functionality found in native iOS applications to show a large toolbar title and then collapse it to a small title when scrolling. This can be done by adding two headers, one above the content and one inside of the content, and then setting the collapse property to "condense" on the header inside of the content. This effect will only apply when the mode is "ios".

淡入淡出标题

🌐 Fade Header

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

🌐 Many native iOS applications have a fade effect on the toolbar. This can be achieved by setting the collapse property on the header to "fade". When the page is first loaded, the background and border on the header will be hidden. As the content is scrolled, the header will fade back in. This effect will only apply when the mode is "ios".

此功能也可以与压缩标题结合使用。collapse 属性的值设置为 "fade" 应该在内容外的标题上。

🌐 This functionality can be combined with a Condensed Header as well. The collapse property with a value set to "fade" should be on the header outside of the content.

与虚拟滚动一起使用

🌐 Usage with Virtual Scroll

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

🌐 A fade header requires a scroll container to work properly. When using a virtual scrolling solution, a custom scroll target needs to be provided. Scrolling on the content needs to be disabled and the .ion-content-scroll-host class needs to be added to the element responsible for scrolling.

边框

🌐 Borders

在 "md" 模式下，页眉底部会有一个 box-shadow。在 "ios" 模式下，底部会出现一个 border。可以通过在页眉上添加 .ion-no-border 类来移除这些。

🌐 In "md" mode, the header will have a box-shadow on the bottom. In "ios" mode, it will receive a border on the bottom. These can be removed by adding the .ion-no-border class to the header.

属性

🌐 Properties

collapse

Description	Describes the scroll effect that will be applied to the header. Only applies in iOS mode. Typically used for Collapsible Large Titles
Attribute	collapse
Type	"condense" ｜ "fade" ｜ undefined
Default	undefined

mode

Description	The mode determines which platform styles to use. This is a virtual property that is set once during initialization and will not update if you change its value after the initial render.
Attribute	mode
Type	"ios" ｜ "md"
Default	undefined

translucent

Description	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.
Attribute	translucent
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.