Layout
New

Layout is a component which let you compose an application's page layout.

NVLayoutContent

NVLayoutContent is used to put elements in the content area of the layout.

TypeDefault Value
RenderFragmentnull
HEADER
SIDEBAR

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.

<NVLayout HasSidebarOpened="AppState.IsSidebarVisible()" MaxWidth="100%" MaxHeight="200px" Style="--w-sidebar-opened: 200px">
  <NVLayoutHeader>
    HEADER
  </NVLayoutHeader>

  <NVLayoutSidebar>
    SIDEBAR
  </NVLayoutSidebar>

  <NVLayoutContent>    
    <NVText>
      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.
    </NVText>
  </NVLayoutContent>
</NVLayout>

NVLayoutHeader

NVLayoutHeader is used to put elements in the header area of the layout.

TypeDefault Value
RenderFragmentnull
LOGO
SIDEBAR
CONTENT 
<NVLayout HasSidebarOpened="AppState.IsSidebarVisible()" MaxWidth="100%" MaxHeight="200px" Style="--w-sidebar-opened: 200px">
  <NVLayoutHeader>
    <NVStack PX="8" Color="primary" Height="64px">
      <div>Logo</div>
      <NVNav Color="primary" Level="1" ML="auto">
        <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>
    SIDEBAR
  </NVLayoutSidebar>

  <NVLayoutContent>    
      CONTENT
  </NVLayoutContent>
</App>

NVLayoutSidebar

NVLayoutSidebar is used to put elements in the sidebar area of the layout.

TypeDefault Value
RenderFragmentnull
HEADER
CONTENT 
<NVLayout HasSidebarOpened="AppState.IsSidebarVisible()" MaxWidth="100%" MaxHeight="200px" Style="--w-sidebar-opened: 200px">
  <NVLayoutHeader>
    HEADER
  </NVLayoutHeader>

  <NVLayoutSidebar>
    <NVSidebar>
      <NVNav Level="1" Color="primary">
        <NVLink Title="Search" Href="#">
          <NVIcon MR="2" Name="search" />
          <NVBlock Tag="span" MD=@(new {Display = "hidden"}) XL=@(new {Display = "inline"})>Search</NVBlock>
        </NVLink>
        <NVLink Title="Edit" Href="#">
          <NVIcon MR="2" Name="edit" />
          <NVBlock Tag="span" MD=@(new {Display = "hidden"}) XL=@(new {Display = "inline"})>Edit</NVBlock>
        </NVLink>
        <NVLink Title="Delete" Href="#">
          <NVIcon MR="2" Name="trash" />
          <NVBlock Tag="span" MD=@(new {Display = "hidden"}) XL=@(new {Display = "inline"})>Delete</NVBlock>
        </NVLink>
      </NVNav>
    </NVSidebar>
  </NVLayoutSidebar>

  <NVLayoutContent>    
    CONTENT
  </NVLayoutContent>
</NVLayout>
On this page