.grayscale(amount?: number): Component
The intensity of the grayscale effect, from 0 (full color) to 1 (fully desaturated).
Support
Usage
Fully desaturated
Image({ url: "photo.jpg" })
.resizable()
.frame({ width: 200, height: 200 })
.grayscale()
Partial grayscale
Image({ url: "photo.jpg" })
.resizable()
.frame({ width: 200, height: 200 })
.grayscale(0.5)
Conditional grayscale
const body = () => {
const [disabled, setDisabled] = useState(false)
return Image({ url: "avatar.jpg" })
.resizable()
.frame({ width: 64, height: 64 })
.grayscale(disabled ? 1 : 0)
}
See Also
