Add docs link

This commit is contained in:
Kyant0 committed 2025-09-16 00:14:55 +08:00
1 parent 2700c40514
commit 8785ad08ce
1 file changed
+1 -107
+1 -107
View File
@@ -38,113 +38,7 @@ implementation("com.github.Kyant0:AndroidLiquidGlass:<version>")
### After 1.0.0-alpha10
#### Basic example
```kotlin
val backdrop = rememberBackdrop()
Box {
// backdrop content used to fill the backdrop layer
Box(Modifier.backdrop(backdrop))
// icon button with glass effect
Box(
Modifier
.drawBackdrop(
backdrop = backdrop,
shapeProvider = { CircleShape },
// draw a scrim to increase readability
onDrawSurface = { drawRect(background.copy(alpha = 0.5f)) }
) {
// saturation boost
saturation()
// blur
blur(2f.dp.toPx())
// glass effect
refraction(height = 8f.dp.toPx(), amount = size.minDimension)
}
.clickable {}
.size(48.dp),
contentAlignment = Alignment.Center
) {}
}
```
#### Advanced example
Here is the full definition of the `drawBackdrop` modifier:
```kotlin
fun Modifier.drawBackdrop(
backdrop: Backdrop,
shapeProvider: () -> Shape,
highlight: (() -> Highlight?)? = DefaultHighlight,
shadow: (() -> Shadow?)? = DefaultShadow,
onDrawBehind: (DrawScope.() -> Unit)? = null,
onDrawBackdrop: DrawScope.(drawBackdrop: DrawScope.() -> Unit) -> Unit = DefaultOnDrawBackdrop,
onDrawSurface: (DrawScope.() -> Unit)? = null,
effects: BackdropEffectScope.() -> Unit
): Modifier
```
To apply effects for the Composable's self content, use the `contentBackdrop` modifier:
```kotlin
fun Modifier.contentBackdrop(
shapeProvider: () -> Shape,
highlight: (() -> Highlight?)? = DefaultHighlight,
shadow: (() -> Shadow?)? = DefaultShadow,
onDrawBehind: (DrawScope.() -> Unit)? = null,
onDrawSurface: (DrawScope.() -> Unit)? = null,
effects: BackdropEffectScope.() -> Unit
): Modifier
```
The following example shows how to draw a dynamic highlight and apply scaling to the backdrop content:
```kotlin
val backdrop = rememberBackdrop()
Box {
// backdrop content used to fill the backdrop layer
Box(Modifier.backdrop(backdrop))
// [optional] scale if needed
val originalScale = 1.2f
// the highlight angle in degrees produced by sensors
val highlightAngle = 45f
// icon button with glass effect
Box(
Modifier
// [optional] scale if needed
.graphicsLayer {
scaleX = originalScale
scaleY = originalScale
}
.drawBackdrop(
backdrop = backdrop,
shapeProvider = { CircleShape },
// the dynamic highlight
highlight = { Highlight { HighlightStyle.Dynamic(angle = highlightAngle) } },
// the backdrop content to draw with effects
onDrawBackdrop = { drawBackdrop ->
// apply the inverse scale to the backdrop content
scale(1f / originalScale, 1f / originalScale, Offset.Zero) {
drawBackdrop()
}
// [optional] call `drawImage()` here or similar to draw additional content to the front of backdrop layer
},
// the surface content to draw above the backdrop layer and below the highlight layer
onDrawSurface = { drawRect(background.copy(alpha = 0.5f)) }
)
.clickable {}
.size(48.dp),
contentAlignment = Alignment.Center
) {}
}
```
See [docs](https://kyant.gitbook.io/backdrop/hello-glass).
### 1.0.0-alpha09