Skip to main content

ion-backdrop

shadow

背景是覆盖其他组件的全屏组件。它们在转换到其他内容之上的组件后面非常有用,并且可用于关闭该组件。

¥Backdrops are full screen components that overlay other components. They are useful behind components that transition in on top of other content and can be used to dismiss that component.

基本用法

¥Basic Usage

背景可以防止点击或点击其后面的内容。默认情况下它是透明的,因此下面的演示包含 CSS 使其可见。

¥The backdrop prevents clicking or tapping on the content behind it. It is transparent by default, so the below demo includes CSS to make it visible.

样式

¥Styling

可以通过将 CSS 属性直接分配给背景元素来自定义背景。常见属性包括 background-colorbackgroundopacity

¥The backdrop can be customized by assigning CSS properties directly to the backdrop element. Common properties include background-color, background and opacity.

通过在内容上设置 z-index,高于背景(默认为 2),可以将内容显示在背景上方。

¥Content can be displayed above the backdrop by setting a z-index on the content, higher than the backdrop (defaults to 2).

属性

¥Properties

stopPropagation

DescriptionIf true, the backdrop will stop propagation on tap.
Attributestop-propagation
Typeboolean
Defaulttrue

tappable

DescriptionIf true, the backdrop will can be clicked and will emit the ionBackdropTap event.
Attributetappable
Typeboolean
Defaulttrue

visible

DescriptionIf true, the backdrop will be visible.
Attributevisible
Typeboolean
Defaulttrue

事件

¥Events

NameDescriptionBubbles
ionBackdropTapEmitted when the backdrop is tapped.true

方法

¥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.