@nstudio/nativescript-variable-blur-view
适用于 NativeScript 的变量模糊视图
npm i --save @nstudio/nativescript-variable-blur-view

@nstudio/nativescript-variable-blur-view

适用于 NativeScript 的变量模糊视图。受 @jtrivedi@aheze@candlefinance 启发

预览

https://github.com/nstudio/nativescript-ui-kit/assets/457187/8d82d1b4-1dfc-421f-89b1-697c3c433b26

npm install @nstudio/nativescript-variable-blur-view

用法

注意: 仅限 iOS (目前)

在标记中注册元素以供使用

import { VariableBlurView } from '@nstudio/nativescript-variable-blur-view'

// Angular
import { registerElement } from '@nativescript/angular'
registerElement('VariableBlurView', () => VariableBlurView)

// Solid
import { registerElement } from 'dominative';
registerElement('variableBlurView', VariableBlurView);

// Svelte
import { registerNativeViewElement } from 'svelte-native/dom'
registerNativeViewElement('variableBlurView', () => VariableBlurView);

// React
import { registerElement } from 'react-nativescript';
registerElement('variableBlurView', () => VariableBlurView);

// Vue
import Vue from 'nativescript-vue'
Vue.registerElement('VariableBlurView', () => VariableBlurView)

将其放置在您想要模糊的任何 UI 元素上方

<VariableBlurView width="100%" height="200"/>

提示:您可以这样做来垂直翻转模糊视图

<VariableBlurView width="100%" height="200" scaleY="-1"/>

许可证

Apache 许可证第 2 版