NetcodeHub.Packages.Components.Modal 1.0.0

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**

        *<Confirmation @ref="confirmation" 
                       Instruction="@Instruction" 
                       Action="Handle" 
                       BoostrapClass="border-danger" 
                       CustomStyle="width:300px;" />*
       
        @code
             { 
             // Confirmation Modal Component
               Confirmation? confirmation;
               public bool Confirm { get; set; }
              string Instruction = "Are you sure you wanna do this?";
              void Handle() => Confirm = true;
              void ShowConfirmation() => confirmation!.Show();
           
            }

Use the Modal Component**

    <button class="btn btn-info" @onclick="OpenModal">Open modal</button>
    Selection Action: @SelectedAction <br/>

    <Modal @bind-Open="IsOpen" 
           Actions="ButtonActions" 
           BootstrapClass="border-success rounded p-2 ml-2 mr-2" 
           CustomStyle="min-width:300px; max-width:500px;">

        <ContentContent>
            <p class="text-center 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>
        </ContentContent>

        <ButtonTemplate>
            <div class="d-flex justify-content-center align-content-center">
                <button class="btn btn-success btn-sm" value="ok" style="margin-right:5px">Okay</button>
                <button class="btn btn-danger btn-sm" value="cancel">Cancel</button>
            </div>
        </ButtonTemplate>
    </Modal>

    @code{

           public bool IsOpen { get; set; }
           void OpenModal() => IsOpen = true;

        void ButtonActions(string action)
        {
                  if (action == "ok")  {
                    // do something
                 }

                else if (action == "cancel") {
                   // you can also do something
                }
          }
    }