igniteui-blazor-examples/samples/inputs/badge/dot/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
70
71
72
73
74
75
76
77
78
79
80
@using IgniteUI.Blazor.Controls

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

<div class="badge-dot">
    <div class="dot-example icon-example">
        <div class="icon-circle">
            <IgbIcon @ref="iconRef" IconName="notifications" Collection="material" />
        </div>
        <IgbBadge Dot="true" Outlined="true" Variant="@StyleVariant.Danger" />
    </div>
    <div class="dot-example notifications-card">
        <div class="notification-row">
            <span class="row-indicator">
                <IgbBadge Dot="true" Variant="@StyleVariant.Info" />
            </span>
            <span class="row-title">Contract renewal</span>
            <span class="row-time unread">09:12</span>
            <IgbIcon class="row-chevron" IconName="chevron_right" Collection="material" />
        </div>
        <div class="notification-row">
            <span class="row-indicator"></span>
            <span class="row-title">Weekly digest</span>
            <span class="row-time">Yesterday</span>
            <IgbIcon class="row-chevron" IconName="chevron_right" Collection="material" />
        </div>
    </div>
    <div class="dot-example avatar-example">
        <IgbAvatar Src="https://dl.infragistics.com/x/img/avatars/avatar-profile-04.png"
                   Shape="AvatarShape.Circle"
                   Size="SizableComponentSize.Small" />
        <IgbBadge Dot="true" Outlined="true" Variant="@StyleVariant.Danger" />
    </div>
    <div class="dot-example nav-card">
        <div class="nav-item active">
            <span class="nav-icon">
                <IgbIcon IconName="home" Collection="material" />
            </span>
            <span class="nav-label">Home</span>
        </div>
        <div class="nav-item">
            <span class="nav-icon">
                <IgbIcon IconName="facebookMessenger" Collection="material" />
                <IgbBadge Dot="true" Variant="@StyleVariant.Info" />
            </span>
            <span class="nav-label">Chat</span>
        </div>
        <div class="nav-item">
            <span class="nav-icon">
                <IgbIcon IconName="person" Collection="material" />
            </span>
            <span class="nav-label">Profile</span>
        </div>
    </div>
</div>

@code {
    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-1z'/></svg>";
    private const string ChevronRightIcon = "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'/></svg>";
    private const string HomeIcon = "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/></svg>";
    private const string PersonIcon = "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/></svg>";
    private const string FacebookMessengerIcon = "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2C6.36 2 2 6.13 2 11.7c0 2.91 1.19 5.44 3.14 7.19.16.15.26.35.27.57l.05 1.78c.02.57.61.94 1.13.71l1.98-.87c.17-.07.36-.09.54-.04 1 .27 2.05.42 3.14.42 5.64 0 10-4.13 10-9.7S17.64 2 12 2zm6 7.46-2.94 4.66c-.47.74-1.47.93-2.18.4l-2.34-1.75a.6.6 0 0 0-.72 0l-3.16 2.4c-.42.32-.97-.18-.69-.63l2.94-4.66c.47-.74 1.47-.93 2.18-.4l2.34 1.75c.21.16.51.16.72 0l3.16-2.4c.42-.32.97.18.69.63z'/></svg>";

    private IgbIcon iconRef;

    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender && iconRef != null)
        {
            iconRef.EnsureReady().ContinueWith(_ =>
            {
                iconRef.RegisterIconFromText("notifications", NotificationsIcon, "material");
                iconRef.RegisterIconFromText("chevron_right", ChevronRightIcon, "material");
                iconRef.RegisterIconFromText("home", HomeIcon, "material");
                iconRef.RegisterIconFromText("person", PersonIcon, "material");
                iconRef.RegisterIconFromText("facebookMessenger", FacebookMessengerIcon, "material");
            });
        }
    }
}