CodeBeam.MudBlazor.Extensions/docs/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/ComboBox/Examples/ComboBoxExample1.razor at 1ef1e2b95e60968fc8936582f4fcadc8e2be3619 · CodeBeamOrg/CodeBeam.MudBlazor.Extensions · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
@namespace MudExtensions.Docs.Examples

<MudGrid>
    <MudItem xs="12" sm="8" Class="d-flex gap-4 align-center justify-center" Style="height: 500px">
        <MudComboBox @ref="_combobox" @bind-Value="@_value" @bind-Text="@_text" @bind-SelectedValues="@_selectedValues" Variant="Variant.Text" Label="Text" Placeholder="@(_placeholder ? "Placeholder" : null)" Editable="_editable" Disabled="_disabled" ReadOnly="_readonly" MultiSelection="@_multiselection"
                autocomplete="new-password"
                Margin="_margin" Dense="_dense" Color="_color" Clearable="_clearable" SelectValueOnTab="_selectValueOnTab" Bordered="true" ShowCheckbox="false"
                HelperText="@(_helperText ? "Helper Text" : null)" HelperTextOnFocus="_helperTextOnFocus">
            <MudComboBoxItem Value="@("Foo")" Text="Foo">Foo</MudComboBoxItem>
            <MudComboBoxItem Value="@("Bar")" Text="Bar">Bar</MudComboBoxItem>
            <MudComboBoxItem Value="@("Fizz")" Text="Fizz">Fizz</MudComboBoxItem>
            <MudComboBoxItem Value="@("Buzz")" Text="Buzz">Buzz</MudComboBoxItem>
            @foreach (var state in states)
            {
                <MudComboBoxItem Value="@state" Text="@state">@state</MudComboBoxItem>
            }
        </MudComboBox>
        <MudComboBox @bind-Value="@_value" @bind-Text="@_text" @bind-SelectedValues="@_selectedValues" Variant="Variant.Outlined" Label="Outlined" Placeholder="@(_placeholder ? "Placeholder" : null)" Editable="_editable" Disabled="_disabled" ReadOnly="_readonly" MultiSelection="@_multiselection"
                     autocomplete="new-password"
                     Margin="_margin" Dense="_dense" Color="_color" Clearable="_clearable" SelectValueOnTab="_selectValueOnTab"
                     HelperText="@(_helperText ? "Helper Text" : null)" HelperTextOnFocus="_helperTextOnFocus">
            <MudComboBoxItem Value="@("Foo")">Foo</MudComboBoxItem>
            <MudComboBoxItem Value="@("Bar")">Bar</MudComboBoxItem>
            <MudComboBoxItem Value="@("Fizz")">Fizz</MudComboBoxItem>
            <MudComboBoxItem Value="@("Buzz")">Buzz</MudComboBoxItem>
            @foreach (var state in states)
            {
                <MudComboBoxItem Value="@state" Text="@state">@state</MudComboBoxItem>
            }
        </MudComboBox>
        <MudComboBox @bind-Value="@_value" @bind-Text="@_text" @bind-SelectedValues="@_selectedValues" Variant="Variant.Filled" Label="Filled" Placeholder="@(_placeholder ? "Placeholder" : null)" Editable="_editable" Disabled="_disabled" ReadOnly="_readonly" MultiSelection="@_multiselection"
                     autocomplete="new-password"
                     Margin="_margin" Dense="_dense" Color="_color" Clearable="_clearable" SelectValueOnTab="_selectValueOnTab"
                     HelperText="@(_helperText ? "Helper Text" : null)" HelperTextOnFocus="_helperTextOnFocus">
            <MudComboBoxItem Value="@("Foo")">Foo</MudComboBoxItem>
            <MudComboBoxItem Value="@("Bar")">Bar</MudComboBoxItem>
            <MudComboBoxItem Value="@("Fizz")">Fizz</MudComboBoxItem>
            <MudComboBoxItem Value="@("Buzz")">Buzz</MudComboBoxItem>
            @foreach (var state in states)
            {
                <MudComboBoxItem Value="@state" Text="@state">@state</MudComboBoxItem>
            }
        </MudComboBox>
    </MudItem>

    <MudItem xs="12" sm="4">
        <MudStack Spacing="4">
            <MudText>Item Count: @(_combobox?.Items.Count ?? 0)</MudText>
            <MudText>Value: @_value</MudText>
            <MudText>Text: @_text</MudText>
            <MudText>Selected Values (@(_selectedValues?.Count() ?? 0)): @(string.Join(", ", _selectedValues ?? new List<string>()))</MudText>
            <MudSelectExtended @bind-Value="_margin" ItemCollection="@(Enum.GetValues<Margin>())" Variant="Variant.Outlined" Label="Margin" Margin="Margin.Dense" Dense="true" />
            <MudSelectExtended @bind-Value="_dense" ItemCollection="@(Enum.GetValues<Dense>())" Variant="Variant.Outlined" Label="Dense" Margin="Margin.Dense" Dense="true" />
            <MudSelectExtended @bind-Value="_color" ItemCollection="@(Enum.GetValues<Color>())" Variant="Variant.Outlined" Label="Color" Margin="Margin.Dense" Dense="true" />
            <MudSwitchM3 @bind-Value="@_disabled" Label="Disabled" Color="Color.Secondary" />
            <MudSwitchM3 @bind-Value="@_readonly" Label="ReadOnly" Color="Color.Secondary" />
            <MudSwitchM3 @bind-Value="@_multiselection" Label="Multiselection" Color="Color.Secondary" />
            <MudSwitchM3 @bind-Value="@_editable" Label="Editable" Color="Color.Secondary" />
            <MudSwitchM3 @bind-Value="@_selectValueOnTab" Label="SelectValueOnTab" Color="Color.Secondary" />
            <MudSwitchM3 @bind-Value="@_placeholder" Label="Placeholder" Color="Color.Secondary" />
            <MudSwitchM3 @bind-Value="@_clearable" Label="Clearable" Color="Color.Secondary" />
            <MudSwitchM3 @bind-Value="@_helperText" Label="HelperText" Color="Color.Secondary" />
            <MudSwitchM3 @bind-Value="@_helperTextOnFocus" Label="HelperTextOnFocus" Color="Color.Secondary" />
        </MudStack>
    </MudItem>
</MudGrid>

    @code{
    MudComboBox<string?>? _combobox;
    string? _value;
    string? _text;
    IEnumerable<string>? _selectedValues;
    Margin _margin;
    Dense _dense = Dense.Standard;
    Color _color = Color.Primary;
    bool _disabled;
    bool _readonly;
    bool _multiselection;
    bool _placeholder;
    bool _editable = true;
    bool _clearable = true;
    bool _selectValueOnTab;
    bool _helperText;
    bool _helperTextOnFocus;

    private string[] states =
    {
        "Alabama", "Alaska", "American Samoa", "Arizona",
        "Arkansas", "California", "Colorado", "Connecticut",
        "Delaware", "District of Columbia", "Federated States of Micronesia",
        "Florida", "Georgia", "Guam", "Hawaii", "Idaho",
        "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky",
        "Louisiana", "Maine", "Marshall Islands", "Maryland",
        "Massachusetts", "Michigan", "Minnesota", "Mississippi",
        "Missouri", "Montana", "Nebraska", "Nevada",
        "New Hampshire", "New Jersey", "New Mexico", "New York",
        "North Carolina", "North Dakota", "Northern Mariana Islands", "Ohio",
        "Oklahoma", "Oregon", "Palau", "Pennsylvania", "Puerto Rico",
        "Rhode Island", "South Carolina", "South Dakota", "Tennessee",
        "Texas", "Utah", "Vermont", "Virgin Island", "Virginia",
        "Washington", "West Virginia", "Wisconsin", "Wyoming",
    };

    protected override void OnAfterRender(bool firstRender)
    {
        base.OnAfterRender(firstRender);
        if (firstRender)
            StateHasChanged();
    }
}