Liquid Glass 毛玻璃效果组件

Liquid Glass 是一个 React 组件库，提供了类似 MacOS 的毛玻璃视觉效果。通过多层叠加的方式实现背景模糊、边缘高光、反射等效果。

安装

npm install @zhou96/liquid-glass

或

yarn add @zhou96/liquid-glass

使用方法

1. 引入 SvgFilter 组件

在应用的根组件（如 App.tsx）中引入并使用 SvgFilter 组件：

import { SvgFilter } from "@zhou96/liquid-glass";

function App() {
  return (
    <>
      <SvgFilter />
      {/* 其他组件 */}
    </>
  );
}

2. 使用 LiquidGlass 组件

在需要添加毛玻璃效果的地方使用 LiquidGlass 组件：

import { LiquidGlass } from "@zhou96/liquid-glass";

function MyComponent() {
  return (
    <LiquidGlass>
      <p>这是一个带有毛玻璃效果的组件</p>
    </LiquidGlass>
  );
}

API 参考

LiquidGlass Props

| 属性名 | 类型 | 默认值 | 描述 | | --- | --- | --- | --- | | borderRadius | string | number | 15 | 圆角大小，可以是数字（单位为px）或字符串（如"10px"或"50%"） | | blur | number | 2 | 背景模糊强度（单位为px） | | background | string | "rgba(0,0,0,0.12)" | 背景遮罩层颜色，建议使用带透明度的rgba颜色值 | | reflectOpacity | number | 0.2 | 反射层透明度，取值范围为0-1 | | sharpOpacity | number | 0.6 | 边缘锐利度透明度，取值范围为0-1 | | className | string | - | 自定义CSS类名 | | children | React.ReactNode | - | 子元素内容 |

示例

基础用法

<LiquidGlass>
  <p>基础毛玻璃效果</p>
</LiquidGlass>

自定义样式

<LiquidGlass 
  borderRadius={20}
  blur={5}
  background="rgba(255,255,255,0.2)"
>
  <p>自定义样式的毛玻璃效果</p>
</LiquidGlass>

使用百分比圆角

<LiquidGlass 
  borderRadius="50%"
  background="rgba(255,255,255,0.3)"
>
  <p>圆形毛玻璃效果</p>
</LiquidGlass>

注意事项

1. 必须在应用的根组件中引入 SvgFilter 组件，否则毛玻璃效果可能无法正常显示。
2. 为了获得最佳效果，建议在有背景内容的容器上使用此组件。
3. 在某些浏览器中，backdrop-filter 可能不被支持或效果有所不同。

浏览器兼容性

• Chrome 76+
• Firefox 70+
• Safari 13.1+
• Edge 79+

许可证

MIT