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;

 }

}

Supported parameters

• Status (bool), defines the visibility of the modal.
• Title (string), title of the modal.
• Class (string), CSS class to define a custom style for the modal.
• TextClose (string), text for the close button and the tooltip when closing the modal.
• Draggable (bool), defines whether the modal can be moved around the window.
• Resizable (bool), defines whether the modal can be resized.
• ClosedInteractive (bool), defines whether the modal can be closed by clicking on the grey area or by pressing escape on the keyboard.
• OnChangeStatus (EventCallback<bool>), event that is triggered when the Status of the modal changes.
• Outline (bool), outline style of the modal (default is false).
• OutlineButton (bool), outline style for the close button of the modal (default is false).
• ShowOptions (bool), specifies whether to show the lower options of the modal (ButtonOption) where:
  • ButtonOption (RenderFragment), allows to set HTML in the lower panel of the modal.
  • By default, the button to close the modal is shown.
• ShowButtonClose (bool), defines the visibility of the Close button. (default is true).
• Width (AstrolWidth), defines the initial maximum width of the modal, there are 5 possible values:
  WidthMaximize (AstrolWidth), defines the width of the window when maximized, there are 5 possible values:
  • AstrolWidth.Mini (enum) represents 300px
  • AstrolWidth.Short (enum) represents 450px
  • AstrolWidth.Middle (enum) represents 768px default option
  • AstrolWidth.Large (enum) represents 1200px
  • AstrolWidth.Full (enum) represents 100% of the browser