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.
Get the Nugget package from : https://artifactstore.belgrid.net/feeds/libraries/Nova/versions
dotnet add package nova-blazor@X.X.X
Add css in the head of your layout.
<link href="_content/Nova/assets/css/nova.css" rel="stylesheet"/>
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>
<!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>
@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);
}
}