Dropdown - bit BlazorUI

Dropdown

A dropdown is a list in which the selected item is always visible while other items are visible on demand by clicking a dropdown button. Dropdowns are typically used for forms.

Notes

The BitDropdown is a Multi-API component which can accept the list of Items in 3 different ways: BitDropdownItem class, a custom Generic class, and BitDropdownOption component.

Usage

Implementation

BitDropdown parameters
Name
Type
Default value
Description
AutoFocusSearchBox bool false Enables auto-focusing of the SearchBox input when the callout is open.
CaretDownIconName string ChevronDown The icon name of the chevron down element of the dropdown. The default value is ChevronDown.
CaretDownTemplate RenderFragment? null The custom template for the chevron down element of the dropdown.
ChildContent RenderFragment? null The content of the Dropdown, a list of BitDropdownOption components.
Classes BitDropdownClassStyles? null Custom CSS classes for different parts of the BitDropdown.
DefaultValue string? null The default key value that will be initially used to set selected item if the Value parameter is not set.
DefaultValues List<string> new List<string>() The default key value that will be initially used to set selected items in multi select mode if the Values parameter is not set.
DropDirection BitDropDirection BitDropDirection.TopAndBottom Determines the allowed drop directions of the callout.
IsMultiSelect bool false Enables the multi select mode.
IsOpen bool false Determines the opening state of the callout. (two-way bound)
IsRequired bool false Enables the required mode of the dropdown.
IsReselectable bool false Enables calling the select events when the same item is selected in single select mode.
IsResponsive bool false Enables the responsive mode of the component for small screens.
IsRtl bool false Enables the RTL direction for the component.
Items ICollection<TItem>? null The list of items to display in the callout.
ItemSize int 35 The height of each item in pixels for virtualization.
ItemsProvider BitDropdownItemsProvider<TItem>? null The function providing items to the list for virtualization.
ItemTemplate RenderFragment<TItem>? null The custom template for rendering the items of the dropdown.
Label string? null The text of the label element of the dropdown.
LabelTemplate RenderFragment? null The custom template for the label of the dropdown.
MultiSelectDelimiter string , The delimiter for joining the values to create the text of the dropdown in multi select mode.
NameSelectors BitDropdownNameSelectors<TItem, TValue>? null Names and selectors of the custom input type properties.
OnChange EventCallback<TItem[]> The callback that called when selected items change.
OnClick EventCallback<MouseEventArgs> The click callback for the dropdown.
OnSearch EventCallback<string> The callback that is called when the search value changes.
OnSelectItem EventCallback<TItem> The callback that called when an item gets selected.
Options RenderFragment? null Alias of ChildContent.
OverscanCount int 3 Determines how many additional items are rendered before and after the visible region.
Placeholder string? null The placeholder text of the dropdown.
PlaceholderTemplate RenderFragment<BitDropdown<TItem, TValue>>? null The custom template for the placeholder of the dropdown.
SearchBoxPlaceholder string? null The placeholder text of the SearchBox input.
SearchFunction Func<ICollection<TItem>, string, ICollection<TItem>>? null Custom search function to be used in place of the default search algorithm.
SelectedItem TItem? null The selected item in single select mode. (two-way bound)
SelectedItems List<TItem> new List<TItem>() The selected items in multi select mode. (two-way bound)
ShowClearButton bool false Shows the clear button when an item is selected.
ShowSearchBox bool false Shows the SearchBox element in the callout.
Styles BitDropdownClassStyles? null Custom CSS styles for different parts of the BitDropdown.
Title string? null The title to show when the mouse hovers over the dropdown.
TextTemplate RenderFragment<<TItem, TValue>>? null The custom template for the text of the dropdown.
Values ICollection<TValue?> null The key values of the selected items in multi select mode. (two-way bound)
Virtualize bool false Enables virtualization to render only the visible items.
VirtualizePlaceholder RenderFragment<PlaceholderContext>? null The template for items that have not yet been rendered in virtualization mode.
BitInputBase parameters
Name
Type
Default value
Description
DisplayName string? null Gets or sets the display name for this field.
InputHtmlAttributes IReadOnlyDictionary<string, object>? null Gets or sets a collection of additional attributes that will be applied to the created element.
Value TValue? null Gets or sets the value of the input. This should be used with two-way binding.
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.
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.
BitDropdownNameSelectors<TItem, TValue> properties
Name
Type
Default value
Description
AriaLabel BitNameSelectorPair<TItem, string?> new(nameof(BitDropdownItem<TValue>.AriaLabel)) The AriaLabel field name and selector of the custom input class.
Class BitNameSelectorPair<TItem, string?> new(nameof(BitDropdownItem<TValue>.Class)) The CSS Class field name and selector of the custom input class.
Id BitNameSelectorPair<TItem, string?> new(nameof(BitDropdownItem<TValue>.Id)) The Id field name and selector of the custom input class.
Data BitNameSelectorPair<TItem, object?> new(nameof(BitDropdownItem<TValue>.Data)) The Data field name and selector of the custom input class.
IsEnabled BitNameSelectorPair<TItem, bool> new(nameof(BitDropdownItem<TValue>.IsEnabled)) The IsEnabled field name and selector of the custom input class.
IsHidden BitNameSelectorPair<TItem, bool> new(nameof(BitDropdownItem<TValue>.IsHidden)) The IsHidden field name and selector of the custom input class.
IsSelected BitNameSelectorPair<TItem, bool> new(nameof(BitDropdownItem<TValue>.IsSelected)) The IsSelected field name and selector of the custom input class.
ItemType BitNameSelectorPair<TItem, BitDropdownItemType> new(nameof(BitDropdownItem<TValue>.ItemType)) The ItemType field name and selector of the custom input class.
Style BitNameSelectorPair<TItem, string?> new(nameof(BitDropdownItem<TValue>.Style)) The CSS Style field name and selector of the custom input class.
Text BitNameSelectorPair<TItem, string?> new(nameof(BitDropdownItem<TValue>.Text)) The Text field name and selector of the custom input class.
Title BitNameSelectorPair<TItem, string?> new(nameof(BitDropdownItem<TValue>.Title)) The Title field name and selector of the custom input class.
Value BitNameSelectorPair<TItem, TValue?> new(nameof(BitDropdownItem<TValue>.Value)) The Value field name and selector of the custom input class.
BitNameSelectorPair<TItem, TProp> properties
Name
Type
Default value
Description
Name string Custom class property name.
Selector Func<TItem, TProp?>? Custom class property selector.
BitDropdownClassStyles properties
Name
Type
Default value
Description
Root string? null Custom CSS classes/styles for the root element of the BitDropdown.
Label string? null Custom CSS classes/styles for the label of the BitDropdown.
Container string? null Custom CSS classes/styles for the main container of the BitDropdown.
TextContainer string? null Custom CSS classes/styles for the text container of the BitDropdown.
ClearButton string? null Custom CSS classes/styles for the clear button of the BitDropdown.
CaretDownIcon string? null Custom CSS classes/styles for the caret down icon of the BitDropdown.
Overlay string? null Custom CSS classes/styles for the overlay of the BitDropdown.
Callout string? null Custom CSS classes/styles for the callout of the BitDropdown.
ResponsiveLabelContainer string? null Custom CSS classes/styles for the responsive panel's label container of the BitDropdown.
ResponsiveLabel string? null Custom CSS classes/styles for the responsive panel label of the BitDropdown.
ResponsiveCloseButton string? null Custom CSS classes/styles for the responsive panel's close button of the BitDropdown.
ResponsiveCloseIcon string? null Custom CSS classes/styles for the responsive panel's close icon of the BitDropdown.
SearchBoxContainer string? null Custom CSS classes/styles for the search box container of the BitDropdown.
SearchBoxIconContainer string? null Custom CSS classes/styles for the search box's icon container of the BitDropdown.
SearchBoxIcon string? null Custom CSS classes/styles for the search box icon of the BitDropdown.
SearchBoxInput string? null Custom CSS classes/styles for the search box input of the BitDropdown.
SearchBoxClearButtonContainer string? null Custom CSS classes/styles for the search box's clear button container of the BitDropdown.
SearchBoxClearButton string? null Custom CSS classes/styles for the search box's clear button of the BitDropdown.
SearchBoxClearIcon string? null Custom CSS classes/styles for the search box's clear icon of the BitDropdown.
ScrollContainer string? null Custom CSS classes/styles for the scroll container of the BitDropdown.
ItemHeader string? null Custom CSS classes/styles for the item header of the BitDropdown.
ItemWrapper string? null Custom CSS classes/styles for the item wrapper of the multi-select BitDropdown.
ItemButton string? null Custom CSS classes/styles for the item button of the BitDropdown.
ItemCheckBox string? null Custom CSS classes/styles for the item check box of the multi-select BitDropdown.
ItemCheckIcon string? null Custom CSS classes/styles for the item check icon of the multi-select BitDropdown.
ItemText string? null Custom CSS classes/styles for the item text of the BitDropdown.
ItemDivider string? null Custom CSS classes/styles for the item divider of the BitDropdown.
BitDropdownItemType enum
Name
Value
Description
Normal 0 Dropdown items are being rendered as a normal item.
Header 1 Dropdown items are being rendered as a header, they cannot be selected.
Divider 2 Dropdown items are being rendered as a divider, just draw a line.
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).