1. Demo AstrolConfirm

@using Astrol.JSInterop.Base

@inject AstrolJSInterop jsI

@using Astrol.Entities.Basic.UI

@using Astrol.Component.Basic.Button

@using Astrol.Component.Basic.Confirm

@using Astrol.Entities.Basic.Static.Notification

<AstrolConfirm @ref="_conf" />

<AstrolButton Icon="astrol-trash-empty" Text="Delete" Style="@AstrolStyle.Red" @onclick="DeleteItem" />

@code {

 private AstrolConfirm _conf;

 private async Task DeleteItem() {

 var confirmed = await _conf.Confirmation("Are you sure?", "You want to delete the item.");

 if (confirmed) {

 await jsI.Notification("Item removed successfully.".NotificationSuccess());

 }

 else {

 await jsI.Notification("Canceled action.".NotificationError());

 }

 }

}

Usage details

• Set the component <AstrolConfirm @ref="_conf" /> in your HTML code with a reference to an object of the component in your C# code private Confirm _conf;.
• To invoke the confirmation window, call the function await _conf.Confirmation("Title", "Message");, which takes the following parameters:
  • Title (string): Title of the message.
  • Message (string): Confirmation message.

Supported parameters

• Draggable (bool): Defines whether the confirmation window can be dragged by the browser.
• ClosedInteractive (bool): Defines if the confirmation can be closed and canceled by clicking on the gray area or pressing the escape key on the keyboard.
• Class (string): CSS class to define custom styles for the modal.
• Icon (string): Icon to display in the confirmation window (default is astrol-question-circle-o)
• ButtonOutline (bool): If set to true, the buttons will have no fill (default is false).
• TextCancel (string): Text to display on the cancel button (default is Cancel)
• TextAccept (string): Text to display on the accept button (default is Accept)
• Width (AstrolWidth): Defines the initial maximum width of the confirmation window, with 5 possible values:
  • AstrolWidth.Mini (enum) represents 300px
  • AstrolWidth.Short (enum) represents 450px default option
  • AstrolWidth.Middle (enum) represents 768px
  • AstrolWidth.Large (enum) represents 1200px
  • AstrolWidth.Full (enum) represents 100% of the browser