OverlayService

This Service save overlays configuration and control the display of an Overlay Component within the Overlays Component.

Initialization

Assets

Check if your assets are in your html layout.

Code

// in your head tag
<link rel="“stylesheet”" href=“_content/Nova/assets/css/nova.css" />
// at the bottom of your body tag
<script src=“_content/Nova/assets/js/nova.js"></script>

Services

In order to Initialize all services, go to the Program.cs file at the project root, add NVServices.AddNovaDesignSystem(builder.Services); to the Main method.

It will initialize all services from Nova Framework.

Code

using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Nova.Services;
using NovaDev;
using System;
using System.Net.Http;
using Microsoft.Extensions.DependencyInjection;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddScoped(sp => new HttpClient {BaseAddress = new Uri(builder.HostEnvironment.BaseAddress)});

NVServices.AddNovaDesignSystem(builder.Services);

await builder.Build().RunAsync();

Layout

Ensure that the Overlays component is present in your Layout component.

Code

...

<Layout>
  ...
</Layout>

...

<NVOverlays />
...

Parameters

Initialize

This method will add an overlay configuration.
The Overlay will be identified by his Name.

Parameter NameType
overlayConfigNVOverlayServiceConfig
Return type

void

Code

protected override void OnInitialized()
{
  base.OnInitialized();
  
  // Here we will instantiate a modal "ModalSample" as OverlayContent
  // and pass the MaxWidth parameter to it.
  
  NVOverlayServiceConfig config = new NVOverlayServiceConfig(NVOverlayServiceConfig.MODAL, "modal-test", typeof(ModalSample), new { MaxWidth = "90vw" });
  OverlayService.Initialize(config);
}

Render

This method will render all Overlay Component in Overlays Component initialized before.
We need to do it only once on first after render. We need to ensure that Overlays Component (overlay container) exists before render all Overlays Component.

Return type

void

Code

protected override void OnAfterRender(bool firstRender)
{
  base.OnAfterRender(firstRender);

  if (firstRender)
  {
    OverlayService.Render();
  }
}

Show

Will start the animation to show an overlay
Parameter NameType
namestring
Return type

void

Code

OverlayService.Show("modal-test");

Hide

Will start the animation to hide an overlay
Parameter NameType
namestring
Return type

void

Code

OverlayService.Hide("modal-test");

Sample

Page

Code

@using Nova.Services
@using System.Diagnostics
@inject NVOverlayService OverlayService;

@inherits BasePage;
@page "/overlay"

<Title>Overlays</Title>

 <NVButton OnClick="@ShowModal">show modal </NVButton>

@code{

  protected override void OnInitialized()
  {
    base.OnInitialized();

    InitializeModal();
  }

  protected override void OnAfterRender(bool firstRender)
  {
    base.OnAfterRender(firstRender);

    // ensure that overlays exists before render overlays
    if (firstRender)
    {
      OverlayService.Render();
    }
  }

  private void InitializeModal()
  {
    NVOverlayServiceConfig overlayConfig = new NVOverlayServiceConfig(NVOverlayServiceConfig.MODAL, "modal-sample", typeof(ModalSample), new { MaxWidth = "90vw" });
    overlayConfig.AddAction("OnSave", OnSaveModal);
    OverlayService.Initialize(overlayConfig);
  }
  
  void ShowModal() {
    OverlayService.Show("modal-sample");
  }
  
  void OnSaveModal(object data)
  {
    // do something with data here
    ...
    OverlayService.Hide("modal-sample");
  }
  
}

ModalSample

Code

@inherits NVOverlayable; 

<Modal @attributes="@Props">
  <ModalHeader>
    <h1 class="text-lg leading-6 font-medium">Modal</h1>
  </ModalHeader>

  <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. 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>
  </ModalBody>

  <ModalFooter>
    <NVStack Gutter="3">
       <NVButton OnClick="@OnCancel">
        Cancel
       </NVButton>
       <NVButton Color="error" OnClick="@OnSave">
        Save
       </NVButton>
    </NVStack>
  </ModalFooter>

</Modal>

@code {

  void OnSave()
  {
    Actions["OnSave"]?.Invoke(new {Id = 123456, message= "Sample of data"});
  }

  void OnCancel()
  {
    OverlayService.Hide(Name);
  }

}
On this page