igniteui-blazor-examples/samples/inputs/badge/icon/App.razor at 5e963e439aa3840b2968d0f56d37ecebb1835343 · IgniteUI/igniteui-blazor-examples · 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
@using IgniteUI.Blazor.Controls

<link href="_content/IgniteUI.Blazor/themes/light/material.css" rel="stylesheet" />

<div class="badge-icon">
    @foreach (var item in Badges)
    {
        <div class="badge-icon-item" @key="item.Label">
            <div class="icon-wrapper">
                <IgbBadge Variant="@item.Variant" class="@($"badge-{item.Label}")">
                    <IgbIcon IconName="@item.Icon" Collection="material" />
                </IgbBadge>
            </div>
            <span>@item.Label</span>
        </div>
    }
    <div class="badge-icon-item">
        <div class="icon-wrapper avatar-wrapper">
            <IgbAvatar Initials="AZ" Shape="AvatarShape.Circle" Size="SizableComponentSize.Small" />
            <IgbBadge Variant="@StyleVariant.Danger" Outlined="true">
                <IgbIcon @ref="iconRef" IconName="close" Collection="material" />
            </IgbBadge>
        </div>
        <span>on avatar</span>
    </div>
</div>

@code {
    private const string CheckIcon = "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/></svg>";
    private const string FavoriteBorderIcon = "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z'/></svg>";
    private const string NotificationsIcon = "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z'/></svg>";
    private const string StarBorderIcon = "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='m22 9.24-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28z'/></svg>";
    private const string SettingsIcon = "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.49.49 0 0 0-.59-.22l-2.39.96a7.03 7.03 0 0 0-1.62-.94l-.36-2.54a.48.48 0 0 0-.48-.41h-3.84a.48.48 0 0 0-.48.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96a.49.49 0 0 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.48-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32a.49.49 0 0 0-.12-.61l-2.01-1.58zM12 15.6A3.6 3.6 0 1 1 12 8.4a3.6 3.6 0 0 1 0 7.2z'/></svg>";
    private const string CloseIcon = "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/></svg>";

    private IgbIcon iconRef;

    private class BadgeItem
    {
        public string Icon { get; set; }
        public StyleVariant Variant { get; set; }
        public string Label { get; set; }
    }

    private static readonly BadgeItem[] Badges = new[]
    {
        new BadgeItem { Icon = "check", Variant = StyleVariant.Success, Label = "check" },
        new BadgeItem { Icon = "favorite_border", Variant = StyleVariant.Danger, Label = "favorite" },
        new BadgeItem { Icon = "notifications", Variant = StyleVariant.Info, Label = "notification" },
        new BadgeItem { Icon = "star_border", Variant = StyleVariant.Warning, Label = "star" },
        new BadgeItem { Icon = "settings", Variant = StyleVariant.Info, Label = "settings" }
    };

    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender && iconRef != null)
        {
            iconRef.EnsureReady().ContinueWith(_ =>
            {
                iconRef.RegisterIconFromText("check", CheckIcon, "material");
                iconRef.RegisterIconFromText("favorite_border", FavoriteBorderIcon, "material");
                iconRef.RegisterIconFromText("notifications", NotificationsIcon, "material");
                iconRef.RegisterIconFromText("star_border", StarBorderIcon, "material");
                iconRef.RegisterIconFromText("settings", SettingsIcon, "material");
                iconRef.RegisterIconFromText("close", CloseIcon, "material");
            });
        }
    }
}