CodeBeam.MudBlazor.Extensions/docs/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/SelectExtended/Examples/SelectExtendedExample4.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
@namespace MudExtensions.Docs.Examples

<MudGrid>
    <MudItem xs="12" sm="6">
        <MudSelectExtended Label="Select Player" ToStringFunc="@(new Func<Tuple<string, string, bool>, string?>(StringFunc))" Placeholder="Standard" Variant="Variant.Outlined" AnchorOrigin="Origin.BottomCenter">
            @foreach (var item in _players)
            {
                <MudSelectItemExtended Value="item">@(item.Item1 + " - Total Score: " + item.Item2)</MudSelectItemExtended>
            }
        </MudSelectExtended>
    </MudItem>

    <MudItem xs="12" sm="6">
        <MudSelectExtended ItemCollection="_players" ValuePresenter="ValuePresenter.ItemContent" Placeholder="Template & ItemContent" Label="Select Player" Variant="Variant.Outlined" AnchorOrigin="Origin.BottomCenter">
            <ItemTemplate>
                <MudStack Class="mud-width-full" Justify="Justify.SpaceBetween">
                    <MudText><b>@context.Value?.Item1</b></MudText>
                    <MudStack Row="true" Justify="Justify.SpaceBetween" AlignItems="AlignItems.Center">
                        <MudStack Row="true">
                            <MudIcon Icon="@Icons.Material.Outlined.Person" />
                            <MudText>@(context.Value?.Item3 == true ? "Retired" : "Active")</MudText>
                            </MudStack>
                            <MudChip T="string" Color="Color.Info" Variant="Variant.Outlined">Total Score: @context.Value?.Item2</MudChip>
                        </MudStack>
                    </MudStack>
                </ItemTemplate>
            </MudSelectExtended>
        </MudItem>

        <MudItem xs="12" sm="6">
            <MudSelectExtended ItemCollection="_players" EnableSelectedItemStyle="false" ValuePresenter="ValuePresenter.Chip" MultiSelection="true" Placeholder="Both Templates & MultiSelection" Label="Select Player" Variant="Variant.Outlined" AnchorOrigin="Origin.BottomCenter">
                <ItemTemplate>
                    <MudStack Class="mud-width-full" Justify="Justify.SpaceBetween">
                        <MudText><b>@context.Value?.Item1</b></MudText>
                        <MudStack Row="true" Justify="Justify.SpaceBetween" AlignItems="AlignItems.Center">
                            <MudStack Row="true">
                                <MudIcon Icon="@Icons.Material.Outlined.Person" />
                                <MudText>@(context.Value?.Item3 == true ? "Retired" : "Active")</MudText>
                            </MudStack>
                            <MudChip T="string" Color="Color.Info" Variant="Variant.Outlined">Total Score: @context.Value?.Item2</MudChip>
                        </MudStack>
                    </MudStack>
                </ItemTemplate>

                <ItemSelectedTemplate>
                    <MudStack Class="mud-width-full" Justify="Justify.SpaceBetween" AlignItems="AlignItems.Center">
                        <MudText><b>@context.Value?.Item1</b></MudText>
                        <MudStack Row="true" Justify="Justify.SpaceBetween" AlignItems="AlignItems.Center">
                            <MudStack Row="true">
                                <MudIcon Icon="@Icons.Material.Outlined.Person" />
                                @*<MudText>@(context.Value.Item3 == true ? "Retired" : "Active")</MudText>*@
                            </MudStack>
                            <MudChip T="string" Color="Color.Info" Variant="Variant.Outlined">Total Score: @context.Value?.Item2</MudChip>
                        </MudStack>
                    </MudStack>
                </ItemSelectedTemplate>
            </MudSelectExtended>
        </MudItem>

        <MudItem xs="12" sm="6">
            <MudSelectExtended Label="Select Player" ToStringFunc="@(new Func<Tuple<string, string, bool>, string?>(StringFunc))" Placeholder="Disabled Template" Variant="Variant.Outlined" AnchorOrigin="Origin.BottomCenter">
                <ChildContent>
                @foreach (var item in _players)
                {
                    <MudSelectItemExtended Value="item" Disabled="@(item.Item1.Contains("LeBron") ? false : true)">@(item.Item1 + " - Total Score: " + item.Item2)</MudSelectItemExtended>
                }
            </ChildContent>

            <ItemDisabledTemplate>
                <MudStack Row="true">
                    <MudText>@context.Value?.Item1</MudText>
                    <MudText>Player is unavailable</MudText>
                </MudStack>
            </ItemDisabledTemplate>
        </MudSelectExtended>
    </MudItem>
</MudGrid>

@code {
    Tuple<string, string, bool>[] _players = new Tuple<string, string, bool>[]
    {
       new Tuple<string, string, bool>("Kareem Abdul-Jabbar", "38.387", true),
       new Tuple<string, string, bool>("LeBron James", "37.062", false),
       new Tuple<string, string, bool>("Karl Malone", "36.928", true),
       new Tuple<string, string, bool>("Kobe Bryant", "33.643", true),
       new Tuple<string, string, bool>("Michael Jordan", "32.292", true),
    };

    private string? StringFunc(Tuple<string, string, bool> tuple)
    {
        if (tuple == null)
        {
            return null;
        }
        return tuple.Item1 + " - Total Score: " + tuple.Item2;
    }
}