[Bug]: toast visible throug api does not work

[blenke]

Blazorise Version

1.5.1

What Blazorise provider are you running on?

Bootstrap5

Link to minimal reproduction or a simple code snippet

When using a reference on a toast component then the Visible=true does not seem to work

Steps to reproduce

<Toaster>
    <Toast @ref=tref>
        <ToastHeader>
            <Strong Margin="Margin.IsAuto.FromEnd">Blazorise</Strong>
            <Small>11 mins ago</Small>
            <CloseButton />
        </ToastHeader>
        <ToastBody>
            Hello, world! This is a toast message.
        </ToastBody>
    </Toast>
</Toaster>

<Button @onclick="t">toast does not work</Button>

@code {    
    Toast tref;    
    void t()
    {    
        tref.Visible = true;        
    }
}

What is expected?

The toast to show. It works when using a bind-Visible .

What is actually happening?

nothing is showing

What browsers do you see the problem on?

Chrome, Microsoft Edge

Any additional comments?

No response

[stsrki]

This is by design. Controlling the component with bind-Visible is a declarative approach and is a recommended way for Blazor components. Controlling it with tref.Visible = true; is imperative and is not recommended as it bypasses the Blazor rendering cycle.

From Blazor docs

[blenke]

ok, i can make it work with the bind-Visible as well.

[stsrki]

You might also try https://blazorise.com/docs/services/toast-provider, as it does everything for you.

[blenke]

That's a good tip, i missed that, that was what i was looking for and works indeed. I wanted to show a message after a form closes when saving so it needed to show the toast on the datagrid overview on another form.

[blenke]

are there any styling options for the toast-provider ? I don't see anything in the theming. I wanted to change the background so that it highlights a bit more. Now its white on a white background.

[stsrki]

At the moment, the toast provider has limited options for styling. We plan to add more in the coming version.