Components

Icon

Add an icon in the modal header.

Type	Default Value
string	null

@inherits Overlayable;
<Modal @attributes="@Props" Icon="alert-circle">
</Modal>

<div class="nv-modal" style="max-width: 90vw; margin-top: 0px; opacity: 1; position: relative;left: 0; top: 0; transform: none;">
  <header class="nv-modal-header">
    <i class="nv-modal-icon nv-icon nv-icon-lg nv-icon-alert-circle neutral"></i>
    <button class="nv-modal-close nv-btn nv-btn-md nv-btn-level-2 nv-btn-icon neutral">
      <i class="nv-icon nv-icon-x"></i>
    </button>
  </header>
</div>

<nv-modal icon="alert-circle"> </nv-modal>

<NvModal icon="alert-circle"></NvModal>

IconColor

Specify the color of the icon.

Type	Default Value
string	neutral

@inherits Overlayable;
<Modal @attributes="@Props" Icon="flag" IconColor="primary">
</Modal>

<div class="nv-modal" style="max-width: 90vw; margin-top: 0px; opacity: 1; position: relative;left: 0; top: 0; transform: none;">
  <header class="nv-modal-header">
    <i class="nv-modal-icon nv-icon nv-icon-lg nv-icon-flag primary"></i>
    <button class="nv-modal-close nv-btn nv-btn-md nv-btn-level-2 nv-btn-icon neutral">
      <i class="nv-icon nv-icon-x"></i>
    </button>
  </header>
</div>

<nv-modal icon="flag" iconcolor="primary"> </nv-modal>

<NvModal icon="flag" iconColor="primary">

ModalBody

ModalBody is used to put elements in the body of the modal.

Type	Default Value
RenderFragment	null

@inherits Overlayable;

<Modal @attributes="@Props">
  <ModalBody>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et ex nunc. Nulla facilisi. Curabitur massa mauris, malesuada vel ipsum ac, varius suscipit nunc.
    </p>
  </ModalBody>
</Modal>

<div class="nv-modal" style="max-width: 90vw; margin-top: 0px; opacity: 1; position: relative;left: 0; top: 0; transform: none;">
  <div class="nv-modal-body">
    <div>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et ex nunc. Nulla facilisi. Curabitur massa mauris, malesuada vel ipsum ac, varius suscipit nunc. Mauris ac condimentum justo. Nulla congue sem vel ante volutpat, sed semper quam varius. Nam et lectus sit amet arcu pharetra sodales. Donec mi neque, lacinia ut gravida vel, fringilla in dui. Nunc non velit neque.
      </p>
    </div>
  </div>
</div>

<nv-modal>
  <nv-modal-body slot="body">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et ex nunc.
    Nulla facilisi. Curabitur massa mauris, malesuada vel ipsum ac, varius
    suscipit nunc.
  </nv-modal-body>
  </nv-modal>

<NvModal>
  <NvModalBody slot="body">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et ex
    nunc. Nulla facilisi. Curabitur massa mauris, malesuada vel ipsum ac,
    varius suscipit nunc.
  </NvModalBody>
</NvModal>

ModalFooter

ModalFooter is used to put elements in the footer of the modal.

Type	Default Value
RenderFragment	null

@inherits Overlayable;

<Modal @attributes="@Props">
  <ModalFooter>
     <NVButton OnClick="@OnCancel">
      Cancel
     </NVButton>
     <NVButton Color="error" OnClick="@OnConfirm">
      Confirm
     </NVButton>
  </ModalFooter>
</Modal>

@code {
  void OnConfirm()
  {
    Actions["OnConfirm"]?.Invoke();
  }
  void OnCancel()
  {
    OverlayService.Hide(Name);
  }
}

<div class="nv-modal" style="max-width: 90vw; margin-top: 0px; opacity: 1; position: relative;left: 0; top: 0; transform: none;">
  <footer class="nv-modal-footer">
    <div class="nv-stack gutter-x-3">
      <button class="nv-btn nv-btn-md nv-btn-level-1 neutral">Cancel</button>
      <button class="nv-btn nv-btn-md nv-btn-level-1 error">Save</button>
    </div>
  </footer>
</div>

<nv-modal>
  <nv-modal-footer slot="footer">
    <nv-stack gutter="3">
      <nv-button>Cancel</nv-button>
      <nv-button color="error">Save</nv-button>
    </nv-stack>
  </nv-modal-footer>
  </nv-modal>

<NvModal>
  <NvModalFooter slot="footer">
    <NvStack gutter={3}>
      <NvButton>Cancel</NvButton>
      <NvButton color="error">Save</NvButton>
    </NvStack>
  </NvModalFooter>
</NvModal>

ModalHeader

ModalHeader can be used to put more complex elements within the header of the modal.
This will override Title, Icon and IconColor parameters.

Type	Default Value
RenderFragment	null

@inherits Overlayable;
<Modal @attributes="@Props">
  <ModalHeader>
    <NVText Tag="h3" Size="lg" Medium>Modal</NVText>
  </ModalHeader>
</Modal>

<div class="nv-modal" style="max-width: 90vw; margin-top: 0px; opacity: 1; position: relative;left: 0; top: 0; transform: none;">
  <header class="nv-modal-header">
    <div class="nv-modal-title">
      <h3 class="nv-text text-lg font-medium">Modal Test 1</h3>
    </div>
    <button class="nv-modal-close nv-btn nv-btn-md nv-btn-level-2 nv-btn-icon neutral">
      <i class="nv-icon nv-icon-x"></i>
    </button>
  </header>
</div>

<nv-modal>
    <nv-modal-header slot="header"> Modal Test 1 </nv-modal-header>
</nv-modal>

<NvModal>
  <NvModalHeader slot="header">Modal Test 1</NvModalHeader>
</NvModal>

Title

Set the of the modal header.

Type	Default Value
string	null

@inherits Overlayable;
<Modal @attributes="@Props" Title="Modal">
</Modal>

<div class="nv-modal" style="max-width: 90vw; margin-top: 0px; opacity: 1; position: relative;left: 0; top: 0; transform: none;">
  <header class="nv-modal-header">
    <h3 class="nv-modal-title">
      Modal
    </h3>
    <button class="nv-modal-close nv-btn nv-btn-md nv-btn-level-2 nv-btn-icon neutral">
      <i class="nv-icon nv-icon-x"></i>
    </button>
  </header>
</div>

<nv-modal modaltitle="Modal"> </nv-modal>

<NvModal modalTitle="Modal"></NvModal>