search

fuse-open / fuselibs

Fuselibs is the Uno-libraries that provide the UI framework used in Fuse apps
https://npmjs.com/package/@fuse-open/fuselibs
MIT License
176 stars 72 forks source link

Glass effect enhancement #1426

Closed ichan-mb closed 2 years ago

ichan-mb commented 2 years ago

We have supported for rendering a glass effect by #1381. But it only works best with Panel. Now with this PR, we can apply the Glass effect to a Rectangle that have a CornerRadius or with a Circle

Example:

<Panel>
    <Rectangle ux:Name="re" CornerRadius="40" Width="150" Height="70" Alignment="Center">
        <Text Value="This is a text" Alignment="Center" Color="White" />
        <Glass Background="image" Radius="20" />
        <DropShadow />
        <Clicked>
            <Move Target="re" X="90" Duration="0.5" />
            <Move Target="re" X="-180" Delay="0.5" Duration="1" />
        </Clicked>
    </Rectangle>

    <Image ux:Name="image" Alignment="Center" Margin="20" Background="Purple" Url="https://image.freepik.com/free-vector/colorful-palm-silhouettes-background_23-2148541792.jpg" />
</Panel>

This PR contains:

mvondoyannick commented 2 years ago

Waiting this PR for a long time. Thanks 👍☺️