Skip to content

Commit b1e03ae

Browse files
committed
docs(components/fluid_glass): add Fluid Glass component docs and preview video
1 parent 94d3d15 commit b1e03ae

File tree

3 files changed

+76
-0
lines changed

3 files changed

+76
-0
lines changed

docs/en/components/fluid_glass.md

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
---
2+
title: Fluid Glass
3+
order: 12
4+
---
5+
6+
# Fluid Glass
7+
8+
```rust
9+
pub fn fluid_glass(
10+
args: FluidGlassArgs,
11+
ripple_state: Option<Arc<RippleState>>,
12+
child: impl FnOnce(),
13+
)
14+
```
15+
16+
The `fluid_glass` component is typically used as a background or container for other components. It can set color, border, shadow, and other properties, and supports click interaction, refractive background distortion, Gaussian blur, dispersion, ripple animation, and other advanced effects. It can be considered a glass-version of the `surface` component.
17+
18+
## Arguments
19+
20+
- `args: FluidGlassArgs`
21+
22+
This argument configures the style and behavior of the `fluid_glass` component, including color, border, shadow, corner radius, blur intensity, refractive index, and other properties. Use `FluidGlassArgsBuilder` to construct it.
23+
24+
- `ripple_state: Option<Arc<RippleState>>`
25+
26+
The state for the click ripple animation. Passing `None` disables the ripple animation.
27+
28+
- `child: impl FnOnce()`
29+
30+
The child component of `fluid_glass`, can be any `#[tessera]` function.
31+
32+
## Preview
33+
34+
<video width="640" height="360" autoplay loop muted>
35+
36+
<source src="/fluid_glass_example.mp4" type="video/mp4">
37+
Your browser does not support the video tag
38+
</video>
1.88 MB
Binary file not shown.
Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
---
2+
title: Fluid Glass 组件
3+
order: 12
4+
---
5+
6+
# Fluid Glass
7+
8+
```rust
9+
pub fn fluid_glass(
10+
args: FluidGlassArgs,
11+
ripple_state: Option<Arc<RippleState>>,
12+
child: impl FnOnce(),
13+
)
14+
```
15+
16+
`fluid_glass` 组件,通常用作其他组件的背景或者容器使用。它可以设置颜色、边框、阴影等属性,同时具有点击交互,折射扭曲背景,高斯模糊,色散,水波动画等高级效果,是很多交互组件的基础。可以认为是 `surface` 组件的玻璃态版本。
17+
18+
## 参数
19+
20+
- `args: FluidGlassArgs`
21+
22+
此参数用于配置`fluid_glass`组件的样式和行为,包括颜色、边框、阴影、圆角、模糊强度、折射率等属性。可以通过`FluidGlassArgsBuilder`来构建这个参数。
23+
24+
- `ripple_state: Option<Arc<RippleState>>`
25+
26+
此参数为点击水波纹动画的状态,如果传入`None`,则表示不启用水波纹动画。
27+
28+
- `child: impl FnOnce()`
29+
30+
此参数为`fluid_glass`组件的子组件,可以是任何`#[tessera]`函数。
31+
32+
## 预览
33+
34+
<video width="640" height="360" autoplay loop muted>
35+
36+
<source src="/fluid_glass_example.mp4" type="video/mp4">
37+
Your browser does not support the video tag
38+
</video>

0 commit comments

Comments
 (0)