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.".NotificationSucces());

 }

 else {

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

 }

 }

}

Detalles de uso

• Establezca el componente <AstrolConfirm @ref="_conf" /> razor en su código HTML con referencia a un objeto del propio componente dentro de su código c# private Confirm _conf;.
• Para invocar la ventana de confirmación llame la función await _conf.Confirmation("Title", "Message"); que recibe por parámetros:
  • Title (string) título del mensaje.
  • Message (string) mensaje de confirmación.

Parámetros que admite

• Drogable (bool), define si la ventana de confirmación se puede desplazar por el navegador.
• ClosedInteractive (bool), define si se puede cerrar y cancelar la confirmación al dar click en el área gris o al presionar escape en el teclado.
• Class (string), clase css para definir algún estilo personalizado al modal.
• Icon (string), ícono a mostrar en la ventana de confirmación (por defecto es astrol-question-circle-o )
• ButtonOutline (bool), si desea que los botones no tengan relleno (por defecto es false).
• TextCancel (string), texto a mostrar en el botón cancelar (por defecto es Cancelar)
• TextAccept (string), texto a mostrar en el aceptar cancelar (por defecto es Aceptar)
• Width (AstrolWidth), define el ancho máximo inicial de la ventana de confirmación, hay 5 posibles valores:
  • AstrolWidth.Mini (enum) representa 300px
  • AstrolWidth.Short (enum) representa 450px opción por defecto
  • AstrolWidth.Middle (enum) representa 768px
  • AstrolWidth.Large (enum) representa 1200px
  • AstrolWidth.Full (enum) representa el 100% del navegador