1. Demo AstrolModal

@using Astrol.Entities.Basic.UI

@using Astrol.Component.Basic.Button

@using Astrol.Component.Basic.Modal

<AstrolModal Title="Demo" Status="_statusModal">

 <!-- Content -->

 <h1>Hello World!</h1>

</AstrolModal>

<AstrolButton Text="Open" Style="AstrolStyle.Blue" @onclick="_ => StatusModal(true)" />

@code {

 private bool _statusModal = false;

 private void StatusModal(bool newStatus) {

 _statusModal = newStatus;

 }

}

Parámetros que admite

• Status (bool), define la visibilidad del modal.
• Title (string), título del modal.
• Class (string), clase css para definir algún estilo personalizado al modal.
• TextClose (string), texto del botón de cerrar y del tooltip al cerrar el modal.
• Draggable (bool), define si el modal se puede desplazar por la ventana.
• Resizable (bool), define si se puede modificar el tamaño del modal.
• ClosedInteractive (bool), define si se puede cerrar el modal al dar click en el área gris o al presionar escape en el teclado.
• OnChangeStatus (EventCallback<bool>), evento que se detona al cambiar el Status del modal.
• Outline (bool), estilo outline del modal (por defecto es false).
• OutlineButton (bool), estilo outline para el botón cerrar del modal (por defecto es false).
• ShowOptions (bool), especifica si desea mostrar las opciones inferiores del modal (ButtonOption) donde:
  • ButtonOption (RenderFragment), permite establecer HTML en el panel inferior del modal.
  • Por defecto se muestra el botón para cerrar el modal.
• ShowButtonClose (bool), define la visibilidad del botón Cerrar. (por defecto es true).
• Width (AstrolWidth), define el ancho máximo inicial del modal, hay 5 posibles valores:
  WidthMaximize (AstrolWidth), define el ancho de la ventana al maximizarse, hay 5 posibles valores:
  • AstrolWidth.Mini (enum) representa 300px
  • AstrolWidth.Short (enum) representa 450px
  • AstrolWidth.Middle (enum) representa 768px opción por defecto
  • AstrolWidth.Large (enum) representa 1200px
  • AstrolWidth.Full (enum) representa el 100% del navegador