#<blur-view> XElement

<blur-view> is an element that provides a backdrop blur effect, similar to backdrop-filter: blur.

It is suitable for scenarios where you need to blur the background content. If you only need to blur the element itself, you don't need to use <blur-view>; simply use filter: blur instead.

#Usage

#Basic

blur-viewsrc/base/index.tsx

Code

Preview

#Liquid Glass For iOS

blur-viewsrc/liquid-glass/index.tsx

Code

Preview

#Attributes

#android-capture-target

'android-capture-target'?: string;

The raw id of the Android Lynx view to capture and blur. Only the overlap with the <blur-view> is used as the blur source. When omitted or unresolved, Android uses the default parent capture path.

#blur-effect

// @defaultValue: 'light'
'blur-effect'?: 'light' | 'extra-light' | 'dark' | 'glass' | 'glass-container';

It mainly affects the brightness of the blurred area: light: the brightness is basically the same as the background; dark: the brightness is darker than the background; extra-light: the brightness is brighter than the background; glass: a visual effect that renders a glass material; glass-container: a UIGlassContainerEffect renders multiple glass elements into a combined effect.

#blur-radius

// @defaultValue: "0px"
'blur-radius'?: string;

Gaussian blur radius.

#blur-sampling

// @defaultValue: 6
'blur-sampling'?: number;

The downsampling ratio of the blurred area is similar to reducing the blur of the background area first and then zooming in, which slightly affects the blur effect, but can significantly improve performance.

#enable-auto-blur

// @defaultValue: true
'enable-auto-blur'?: boolean;

Whether to automatically update blur.

#experimental-update-blur-radius

'experimental-update-blur-radius'?: boolean;

Switches the Android internal blur-buffer refresh path.

#glass-interactive

// @defaultValue: false
'glass-interactive'?: boolean;

Enables interactive behavior for the glass effect.

#glass-style

// @defaultValue: 'regular'
'glass-style'?: 'clear' | 'regular';

The style of the glass effect.

#glass-tint-color

// @defaultValue: 'transparent'
'glass-tint-color'?: string;

A tint color applied to the glass effect.

#spacing

// @defaultValue: 0
spacing?: number;

The spacing specifies the distance between elements at which they begin to merge.

#Compatibility