Developers

Nova supports developers with the tools they need to build more product in less time, while saving them from the mind-numbing work of creating the same base components over and over again.

Getting Started

1. Install Package

Get the Nugget package from : https://artifactstore.belgrid.net/feeds/libraries/Nova/versions

dotnet add package nova-blazor@X.X.X

2. HTML Layout in wwwroot

Styles

Add css in the head of your layout.

<link href="_content/Nova/assets/css/nova.css" rel="stylesheet"/>

Scripts

Add script fot the theme (light/dark) management in the head oy your layout.

<script async>
  try {
  if (localStorage.theme === "dark" || (!(localStorage.theme) && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
  document.documentElement.classList.add("dark");
} else {
  document.documentElement.classList.remove("dark");
}
} catch (_) {
}
</script>

Add script for webassembly and nova at the bottom of the body before

<script src="_content/Nova/assets/js/nova.js"></script>
<script src="_framework/blazor.webassembly.js"></script>

Full sample of the index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>App</title>
  
    <script async>
      try {
        if (localStorage.theme === "dark" || (!(localStorage.theme) && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
          document.documentElement.classList.add("dark");
        } else {
          document.documentElement.classList.remove("dark");
        }
      } catch (_) {
      }
    </script>
  
    <base href="/"/>
    <link href="_content/Nova/assets/css/nova.css" rel="stylesheet"/>
  </head>
  
  <body>
    <div id="app">
      <div id="app-loader" style="position:fixed;inset:0;display:flex;align-items: center;justify-content: center;">
        <div class="nv-loader nv-loader-xl primary is-loading"></div>
      </div>
    </div>
    <div id="blazor-error-ui">
      An unhandled error has occurred.
      <a href="" class="reload">Reload</a>
      <a class="dismiss">🗙</a>
    </div>
    
    <script src="_content/Nova/assets/js/nova.js"></script>
    <script defer src="_framework/blazor.webassembly.js"></script>  
  </body>
</html>

Sample of Main Layout

@inherits LayoutComponentBase
@inject Nova.Services.NVAppStateService AppState;

<NVNVLayout HasSidebarOpened="AppState.IsSidebarVisible()" >
  <NVLayoutHeader>
    <NVStack PX="8" Height="64px" Color="primary">
      <NVButton ML="-5" MR="3" Level="1" Color="primary" Display="block" MD="@(new {Display = "hidden"})" Icon="menu" OnClick="@(() => AppState.ToggleDisplaySidebar())" />
      <NVBlock>LOGO</NVBlock>
      <NVNav Level="1" Color="primary" ML="auto" Gutter="4">
        <NVLink Title="link 1" Href="#">link 1</NVLink>
        <NVLink Title="link 2" Href="#">link 2</NVLink>
        <NVLink Title="link 3" Href="#">link 3</NVLink>
      </NVNav>
    </NVStack>
  </NVLayoutHeader>

  <NVLayoutSidebar>
    <NVSidebar Stack StackVertical Color="white" HFull>
      <NVButton Shrink="0" Grow="0" Level="2" Display="block" ML="auto" MD="@(new {Display = "hidden"})" Icon="x" OnClick="@(() => AppState.DisplaySidebar(false))" />
      <NVNav Vertical Color="primary" Level="1" Overflow="auto">
        <NVLink Title="Search" Href="#" Stack GutterX="3">
          <NVIcon Name="search" Small></NVIcon>
          <NVBlock Display="block" MD="@(new {Display = "hidden"})" XL="@(new {Display = "block"})">Search</NVBlock>
        </NVLink>
        <NVLink Title="Edit" Href="#" Stack GutterX="3">
          <NVIcon Name="edit" Small></NVIcon>
          <NVBlock Display="block" MD="@(new {Display = "hidden"})" XL="@(new {Display = "block"})">Edit</NVBlock>
        </NVLink>
        <Link Title="Delete" Href="#" Stack GutterX="3">
          <NVIcon Name="trash" Small></NVIcon>
          <NVBlock Display="block" MD="@(new {Display = "hidden"})" XL="@(new {Display = "block"})">Delete</NVBlock>
        </Link>
      </NVNav>
    </NVSidebar>
  </NVLayoutSidebar>

  <NVLayoutContent>
    <NVBlock P="8">
      @Body
    </NVBlock>
  </NVLayoutContent>
</NVNVLayout>

<NVOverlays />

@code {
  protected override void OnInitialized()
  {
    base.OnInitialized();
    AppState.DisplaySidebar(false);
  } 
}