MasaBlazor Day1

一、模仿Ant Design Pro设计页面

ant design pro地址：分析页 - Ant Design Pro

设计应用栏

<MApp>
    <MAppBar App Color="black">
        <MImage Src="https://cdn.masastack.com/stack/images/logo/MASABlazor/logo-h-en-1.png" MaxHeight="80" MaxWidth="150"></MImage>
        <MSpacer></MSpacer>
        <MButton Icon MaxHeight="30" MaxWidth="30">
            <MIcon Small>mdi-magnify</MIcon>
        </MButton>
        <MButton Icon MaxHeight="30" MaxWidth="30">
            <MIcon Small>mdi-help-circle-outline</MIcon>
        </MButton>
        <MButton Icon MaxHeight="30" MaxWidth="30">
            <MIcon Small>mdi-bell-outline</MIcon>
        </MButton>
    </MAppBar>
</MApp>

页面设计如下：但是button按钮icon没有显示出来

颜色问题，不知道为什么颜色选择不了。

 代码如下：

<MApp>
    <MAppBar App Color="#E1BEE7">
        <MImage Src="https://cdn.masastack.com/stack/images/logo/MASABlazor/logo-h-en-1.png" MaxHeight="80" MaxWidth="150"></MImage>
        <MSpacer></MSpacer>
        <MButton Icon MaxHeight="30" MaxWidth="30">
            <MIcon Small> mdi-magnify</MIcon>
        </MButton>
        <MButton Icon MaxHeight="30" MaxWidth="30">
            <MIcon Small>mdi-help-circle-outline</MIcon>
        </MButton>
        <MButton Icon MaxHeight="30" MaxWidth="30">
            <MIcon Small>mdi-bell-outline</MIcon>
        </MButton>
        <div>
            <MAvatar>
                <MImage Src="https://cdn.masastack.com/stack/images/website/masa-blazor/doddgu.png" MaxHeight="80" MaxWidth="150"></MImage>
            </MAvatar>
        </div>
        <MMenu OpenOnHover Top OffsetY>
            <ActivatorContent>

                <MButton @attributes="@context.Attrs">Lin Lin</MButton>
                
            </ActivatorContent>

            <ChildContent>
                <MList Dense>
                    <MListItemGroup @bind-Value="_selectedItem"
                                    Color="primary">
                        @foreach (var item in _items)
                        {
                            <MListItem>
                                <MListItemIcon>
                                    <MIcon>
                                        @item.Icon
                                    </MIcon>
                                </MListItemIcon>
                                <MListItemContent>
                                    <MListItemTitle>@item.Text</MListItemTitle>
                                </MListItemContent>
                            </MListItem>
                        }
                    </MListItemGroup>
                </MList>
            </ChildContent>
        </MMenu>
    </MAppBar>
</MApp>

@code {
    private StringNumber _selectedItem = 1;
    private Item[] _items = new Item[]
    {
       new Item { Text= "测试1", Icon= "mdi-clock" },
       new Item { Text= "测试2", Icon= "mdi-account" },
       new Item { Text= "测试3", Icon= "mdi-flag" }
    };

    class Item
    {
        public string Text { get; set; }
        public string Icon { get; set; }
    }

    static List<Menu> menus = new()
    {
        new Menu(){ Label = "Home" ,Icon ="mdi-home",Value = "Home"},
        new Menu()
        {
             Label = "Users" ,
             Icon ="mdi-account-circle",
             Value = "Users",
             SubMenus = new List<Menu>()
             {
                new()
                {
                     Label = "Admin",
                     SubMenus = new List<Menu>()
                     {
                        new(){Label = "Management" ,Icon ="mdi-account-outline",Value = "Management"},
                        new(){Label = "Home" ,Icon ="mdi-cog-outline", Value = "Settings"},
                     }
                },
                new()
                {
                    Label = "Actions",
                    SubMenus = new List<Menu>()
                    {
                        new Menu(){ Label = "Home" ,Icon ="mdi-home",Value = "Home"},
                    }
                }
             },
        }
    };
    StringNumber selectedKey = "Management";

    void Click(Menu item)
    {

    }

    class Menu
    {
        public string Label { get; set; }
        public string Icon { get; set; }
        public string Value { get; set; }
        public List<Menu> SubMenus { get; set; }
    }
}