BitDropdownDemo.razor

@page "/components/dropdown"
@inherits AppComponentBase

<PageOutlet Url="components/dropdown"
            Title="Dropdown"
            Description="An accessible select component for picking one or more options, with a searchable callout that keeps its grouping while filtering, full keyboard navigation, a ComboBox mode with chips, virtualization and rich templating." />

<div>
    <DemoPage Name="Dropdown"
              SecondaryNames="@(["Select", "MultiSelect", "ComboBox"])"
              Description="BitDropdown (also known as Select, MultiSelect or ComboBox) lets users pick one or more options from a list that opens on demand. The callout is a real listbox that keeps its grouping, is searchable with typeahead, stays fully navigable with the keyboard and is announced to a screen reader, and it covers large datasets through virtualization and on-demand loading. The ComboBox mode adds free typing, chips, autocomplete and token separators, every part of the component is templatable, and in a form it offers EditForm validation alongside a hidden native select that carries the value into a plain HTML form post. Three sizes, boxed, borderless and underlined variants, a swipeable panel on small screens and RTL support round it out."
              Parameters="componentParameters"
              SubClasses="componentSubClasses"
              SubEnums="componentSubEnums"
              PublicMembers="componentPublicMembers"
              GitHubUrl="Inputs/Dropdown/BitDropdown.razor"
              GitHubDemoUrl="Inputs/Dropdown/BitDropdownDemo.razor"
              IntroductionVideoUrl="https://videos.bitplatform.dev/bit%20Dropdown.mp4">
        <NotesTemplate>
            <BitText>
                The BitDropdown is a <BitTag Color="BitColor.SecondaryBackground">Multi-API</BitTag> component
                which can accept the list of Items in 3 different ways:
                <br />
                1. The <BitLink Href="#dropdown-item"><BitTag Color="BitColor.SecondaryBackground">BitDropdownItem</BitTag></BitLink> class <br />
                2. A <BitTag Color="BitColor.SecondaryBackground">Custom Generic</BitTag> class <br />
                3. The <BitLink Href="#dropdown-option"><BitTag Color="BitColor.SecondaryBackground">BitDropdownOption</BitTag></BitLink> component
            </BitText>
        </NotesTemplate>
        <IntroductionTemplate>
            <BitScrollablePane>
                <BitText Typography="BitTypography.Body2" Color="BitColor.TertiaryForeground">
                    Music: Music Cocktails, Musician: AlexGuz, URL:
                    <a href="https://open.spotify.com/artist/1u0Nlnljg2xGHJV6X7W4i1"
                       target="_blank" style="color:inherit">
                        https://open.spotify.com/artist/1u0Nlnljg2xGHJV6X7W4i1
                    </a>
                </BitText>
            </BitScrollablePane>
        </IntroductionTemplate>
        <Examples>
            <BitPivot Classes="@(new() { HeaderContainer = "pivot-sticky-header" })" MountAll="RenderForMcpClient">
                <BitPivotItem HeaderText="Item">
                    <_BitDropdownItemDemo />
                </BitPivotItem>

                <BitPivotItem HeaderText="Custom">
                    <_BitDropdownCustomDemo />
                </BitPivotItem>

                <BitPivotItem HeaderText="Option">
                    <_BitDropdownOptionDemo />
                </BitPivotItem>
            </BitPivot>
        </Examples>
    </DemoPage>
</div>