List

The lists component is used to display information. List present content in a way that makes it easy to identify a specific item in a collection. They provide a consistent styling for organizing groups of text and images.

Custom select

Use a list into a Dropdpown to create a custom select.

  • Account settings
  • Support
  • License
<NVDropdown Label=@(_selection ?? "Make a Choice")>
  <NVList Select>
    @Item("Account settings")
    @Item("Support")
    @Item("License")
  </NVList>
</NVDropdown>

@code {
  private string _selection;
  private void SetSelection(string value)
  {
    _selection = _selection == value ? null : value;
  }

  private RenderFragment Item(string value)
  {
    return @<NVListItem Stack OnClick="@(() => SetSelection(value))">
             @value
             @if ((_selection == value))
             {
               <NVIcon Name="check" TextColor="orange-500" SMall ML="auto" />
             }
           </NVListItem>;
  }

}

Contact List

  • Calvin Hawkins
    Calvin Hawkins
    calvin.hawkins@example.com
  • Kristen Ramos
    Kristen Ramos
    kristen.ramos@example.com
  • Kristen Ramos
    Ted Fox
    ted.fox@example.com
<NVList Divider>
  <NVListItem Stack GutterX="3">
    <NVAvatar Text="Calvin Hawkins" Url="/img/avatar/women.jpg" />
    <NVStackItemFlex>
      <NVBlock FontWeight="medium">Calvin Hawkins</NVBlock>
      <NVBlock TextColor="gray-400">calvin.hawkins@example.com</NVBlock>
    </NVStackItemFlex>
     <NVButton Level="2" Icon="star"> </NVButton>
  </NVListItem>
  <NVListItem Stack GutterX="3">
    <NVAvatar Text="Kristen Ramos" Url="/img/avatar/women.jpg" />
    <NVStackItemFlex>
      <NVBlock FontWeight="medium">Kristen Ramos</NVBlock>
      <NVBlock TextColor="gray-400">kristen.ramos@example.com</NVBlock>
    </NVStackItemFlex>
     <NVButton Level="2" Icon="star"> </NVButton>
  </NVListItem>
  <NVListItem Stack GutterX="3">
    <NVAvatar Text="Kristen Ramos" Url="/img/avatar/women.jpg" />
    <NVStackItemFlex>
      <NVBlock FontWeight="medium">Ted Fox</NVBlock>
      <NVBlock TextColor="gray-400">ted.fox@example.com</NVBlock>
    </NVStackItemFlex>
     <NVButton Level="2" Icon="star"> </NVButton>
  </NVListItem>
</NVList>
On this page