NetcodeHub.Packages.Components.Modal 1.0.1

Install the package

       *NetcodeHub.Packages.Components.Modal *

Add JS reference to the application's App.razor file

        *<script src="_content/NetcodeHub.Packages.Components.Modal/modal.js"></script>*

Add Namespace

        *@using NetcodeHub.Packages.Components.Modal*


    <button class="btn btn-info" @onclick="ShowConfirmation">Show Confirmation</button>
    <br />
    Confirmation : @Confirm

Use the Confirmation Component**

        <NetcodeHubConfirmation @ref="confirmation"
                    Instruction="@Instruction"
                    Action="Handle"
                    BootstrapClass="border-danger"
                    CustomStyle="width:300px;" />
       
 @code
 { 
    // Confirmation Modal Component
    NetcodeHubConfirmation confirmation;
    public bool Confirm { get; set; }
    string Instruction = "Are you sure you wanna do this?";
    async Task Handle()
    {
        Confirm = true;
        await Close();
    }
    async Task Open() => await confirmation.OpenConfirmation();
    async Task Close() => await confirmation!.CloseConfirmation();          
 }

Use the Modal Component**

    <button class="btn btn-success mt-3" @onclick="OpenModal">Open modal</button>
    <br />
    <NetcodeHubModal @bind-Open="IsOpen"
                     Actions="ButtonActions"
                     BootstrapClass="border-success rounded p-2 ml-2 mr-2"
                     CustomStyle="min-width:300px; max-width:500px;">

        <ContentTemplate>
            <div class="card ">
                <div class="card-header">Modal Header</div>
                <div class="card-body">
                    <p class="text-muted">
                        The component was built using modal dialog. We are manipulating it using CSS and JS,
                        This element provides what we want to display a modal and get a return value of type string.
                    </p>
                </div>
            </div>
        </ContentTemplate>
        <ButtonTemplate>
            <div class="card border-0">
                <div class="card-body">
                    <div class="d-flex justify-content-center align-content-center">
                        <button class="btn btn-danger" value="cancel">Cancel</button>
                        <button class="btn btn-success" value="save" style="margin-left:10px">Save</button>
                    </div>
                </div>
            </div>
        </ButtonTemplate>
    </NetcodeHubModal>

    @code{
    // NetcodeHub Modal Component
    public bool IsOpen { get; set; }
    void OpenModal() => IsOpen = true;
    void ButtonActions(string action)
    {
        if (action == "save")
        {

            // do something
            OpenModal();
        }

        else if (action == "cancel")
        {
            // default will close the modal
            // you can also do something
        }
    }       
 }