NavPanel
Notes
To use this component, you need to install the
Bit.BlazorUI.Extras
nuget package, as described in the Optional steps of the
Getting started page.
Usage
Basic
FitWidth
FullWidth
NoToggle
Icon
SearchBoxPlaceholder
HideSearchBox
EmptyListMessage
Templates
NavPanel header
Event
Clicked item:
Toggled item:
Toggled item:
Color
Style & Class
RTL
API
BitNavPanel parameters
Name |
Type |
Default value |
Description |
---|---|---|---|
Accent | BitColor? | null | The accent color of the nav. |
ChevronDownIcon | string? | null | The custom icon name of the chevron-down element of the BitNav component. |
Classes | BitNavPanelClassStyles? | null | Custom CSS classes for different parts of the nav panel. |
Color | BitColor? | null | The general color of the nav. |
EmptyListTemplate | RenderFragment? | null | The custom template for when the search result is empty. |
EmptyListMessage | string? | null | The custom message for when the search result is empty. |
FitWidth | bool | false | Renders the nav panel with fit-content width. |
Footer | RenderFragment? | null | The custom template to render as the footer of the nav panel. |
FullWidth | bool | false | Renders the nav panel with full (100%) width. |
Header | RenderFragment? | null | The custom template to render as the header of the nav panel. |
HeaderTemplate | RenderFragment<TItem>? | null | Used to customize how content inside the group header is rendered. |
HeaderTemplateRenderMode | BitNavItemTemplateRenderMode | BitNavItemTemplateRenderMode.Normal | The render mode of the custom HeaderTemplate. |
HideSearchBox | bool | false | If true, the search box is hidden. |
IconNavUrl | string? | null | Renders an anchor wrapping the icon to navigate to the specified url. |
IconUrl | string? | null | The icon url to show in the header of the nav panel. |
IndentValue | int | 16 | The indentation value in px for each level of depth of child item. |
IndentPadding | int | 27 | The indentation padding in px for items without children (compensation space for chevron icon). |
IndentReversedPadding | int | 4 | The indentation padding in px for items in reversed mode. |
IsOpen | bool | false | Determines if the nav panel is open in small screens. |
IsToggled | bool | false | Determines if the nav panel is in the toggled state. |
Items | IList<TItem> | [] | A collection of items to display in the nav panel. |
ItemTemplate | RenderFragment<TItem>? | null | Used to customize how content inside the item is rendered. |
ItemTemplateRenderMode | BitNavItemTemplateRenderMode | BitNavItemTemplateRenderMode.Normal | The render mode of the custom ItemTemplate. |
NavClasses | BitNavClassStyles? | null | Custom CSS classes for different parts of the nav component of the nav panel. |
NavStyles | BitNavClassStyles? | null | Custom CSS styles for different parts of the nav component of the nav panel. |
NoPad | bool | false | Disables the padded mode of the nav panel. |
NoToggle | bool | false | Disables the toggle feature of the nav panel. |
OnItemClick | EventCallback<TItem> | Event fired up when an item is clicked. | |
OnItemToggle | EventCallback<TItem> | Callback invoked when a group header is clicked and Expanded or Collapse. | |
OnSelectItem | EventCallback<TItem> | Callback invoked when an item is selected. | |
RenderType | BitNavRenderType | BitNavRenderType.Normal | The way to render nav items. |
Reselectable | bool | false | Enables recalling the select events when the same item is selected. |
ReversedChevron | bool | false | Reverses the location of the expander chevron. |
SearchBoxClasses | BitSearchBoxClassStyles? | null | Custom CSS classes for different parts of the search box of the nav panel. |
SearchBoxPlaceholder | string? | null | The placeholder of the input element of the search box of the nav panel. |
SearchBoxStyles | BitSearchBoxClassStyles? | null | Custom CSS styles for different parts of the search box of the nav panel. |
SingleExpand | bool | false | Enables the single-expand mode in the BitNav. |
Styles | BitNavPanelClassStyles? | null | Custom CSS styles for different parts of the nav panel. |
Top | int | 0 | The top CSS property value of the root element of the nav panel in px. |
BitComponentBase parameters
Name |
Type |
Default value |
Description |
---|---|---|---|
AriaLabel | string? | null | The aria-label of the control for the benefit of screen readers. |
Class | string? | null | Custom CSS class for the root element of the component. |
Dir | BitDir? | null | Determines the component direction. |
HtmlAttributes | Dictionary<string, object> | new Dictionary<string, object>() | Capture and render additional attributes in addition to the component's parameters. |
Id | string? | null | Custom id attribute for the root element. if null the UniqueId will be used instead. |
IsEnabled | bool | true | Whether or not the component is enabled. |
Style | string? | null | Custom CSS style for the root element of the component. |
Visibility | BitVisibility | BitVisibility.Visible | Whether the component is visible, hidden or collapsed. |
BitComponentBase public members
Name |
Type |
Default value |
Description |
---|---|---|---|
UniqueId | Guid | Guid.NewGuid() | The readonly unique id of the root element. it will be assigned to a new Guid at component instance construction. |
RootElement | ElementReference | The ElementReference of the root element. |
BitNavPanelClassStyles properties
Name |
Type |
Default value |
Description |
---|---|---|---|
Overlay | string? | null | Custom CSS classes/styles for the overlay of the BitNavPanel. |
Root | string? | null | Custom CSS classes/styles for the root element of the BitNavPanel. |
Container | string? | null | Custom CSS classes/styles for the container of the BitNavPanel. |
Header | string? | null | Custom CSS classes/styles for the header container of the BitNavPanel. |
HeaderIcon | string? | null | Custom CSS classes/styles for the header icon of the BitNavPanel. |
ToggleButton | string? | null | Custom CSS classes/styles for the toggle button of the BitNavPanel. |
SearchBox | string? | null | Custom CSS classes/styles for the search box of the BitNavPanel. |
ToggleSearchButton | string? | null | Custom CSS classes/styles for the toggle search button of the BitNavPanel. |
EmptyListMessage | string? | null | Custom CSS classes/styles for the empty list message of the BitNavPanel. |
Nav | string? | null | Custom CSS classes/styles for the nav component of the BitNavPanel. |
BitColor enum
Name |
Value |
Description |
---|---|---|
Primary | 0 | Info Primary general color. |
Secondary | 1 | Secondary general color. |
Tertiary | 2 | Tertiary general color. |
Info | 3 | Info general color. |
Success | 4 | Success general color. |
Warning | 5 | Warning general color. |
SevereWarning | 6 | SevereWarning general color. |
Error | 7 | Error general color. |
PrimaryBackground | 8 | Primary background color. |
SecondaryBackground | 9 | Secondary background color. |
TertiaryBackground | 10 | Tertiary background color. |
PrimaryForeground | 11 | Primary foreground color. |
SecondaryForeground | 12 | Secondary foreground color. |
TertiaryForeground | 13 | Tertiary foreground color. |
PrimaryBorder | 14 | Primary border color. |
SecondaryBorder | 15 | Secondary border color. |
TertiaryBorder | 16 | Tertiary border color. |
BitVisibility enum
Name |
Value |
Description |
---|---|---|
Visible | 0 | The content of the component is visible. |
Hidden | 1 | The content of the component is hidden, but the space it takes on the page remains (visibility:hidden). |
Collapsed | 2 | The component is hidden (display:none). |
BitDir enum
Name |
Value |
Description |
---|---|---|
Ltr | 0 | Ltr (left to right) is to be used for languages that are written from the left to the right (like English). |
Rtl | 1 | Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic). |
Auto | 2 | Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element. |
Feedback
You can give us your feedback through our GitHub repo by filing a new Issue or starting a new Discussion.
Or you can review / edit this page on GitHub.
Or you can review / edit this component on GitHub.
- On this page