Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added possibility to define custom close icon #121

Merged
merged 3 commits into from
Jul 29, 2021
Merged

Added possibility to define custom close icon #121

merged 3 commits into from
Jul 29, 2021

Conversation

linkdotnet
Copy link
Contributor

Essentially closes #98

This will give the option to define a custom close button. The implementation still uses the current approach as default. Therefore a custom icon is completely optional.

Usage

The definition of the custom icon will be as RenderFragment for the BlazoredToasts component.
For Blazor server in _Host.cshtml / for Blazor Webassembly in MainLayout.razor:

<BlazoredToasts Position="ToastPosition.BottomRight"
                Timeout="10"
                IconType="IconType.Material"
                ErrorIcon="error_outline"
                InfoIcon="school"
                SuccessIcon="done_outline"
                WarningIcon="warning"
                ShowProgressBar="@true">
    <CloseButtonContent>
        <img src="https://media.istockphoto.com/vectors/close-thin-line-vector-icon-vector-id857112152?k=6&m=857112152&s=612x612&w=0&h=py-FFtgw7ta7FGHGM71HBehuksNs2bRSHhudMAOI3qw="
             width="32" height="32" alt="close"/>
    </CloseButtonContent>
</BlazoredToasts>

Will become: close button

I also added IsFixed to the ParentComponent (BlazoredToasts) as the child component (BlazoredToast) is not relying on updates.

@chrissainty
Copy link
Member

Thanks for creating this PR @linkdotnet. However, it doesn't address the issue you've linked, at least not fully. That issue requires the ability to customise and hide the close icon. You have only implemented customising it. Could you complete the additional work or remove the link to the issue as someone else will have to finished it.

@linkdotnet
Copy link
Contributor Author

I guess I can do the additional work later. That shouldn't be a problem

@linkdotnet
Copy link
Contributor Author

Added the option to hide the button. The default is, that the button is visible (as it was until now).

@chrissainty
Copy link
Member

This is great, thanks @linkdotnet. I have just one more request. Can you add an example to the sample add and any relevant information to the readme. Once that is done I'll get this merged.

@linkdotnet
Copy link
Contributor Author

Can do so @chrissainty. BTW: You wouldn't necessarily need a "hide close button" feature as you can just set the RenderFragment for the CloseButton to empty. But I guess an explicit parameter might be better.

@chrissainty
Copy link
Member

BTW: You wouldn't necessarily need a "hide close button" feature as you can just set the RenderFragment for the CloseButton to empty. But I guess an explicit parameter might be better.

That's true, but I don't think it's as nicer API to work with verses setting a explicit parameter.

@linkdotnet
Copy link
Contributor Author

I changed the server sample to show how to use the Custom Icon with a469700

@chrissainty chrissainty merged commit 00a871d into Blazored:main Jul 29, 2021
@chrissainty
Copy link
Member

Thanks for this work @linkdotnet, and pologies for the delay in merging.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

How to customize close button icon and remove close button?
2 participants