Blazor 创建 Facebook 通知或 StackOverflow 通知等组件

Question

在 blazor NET 8 中，我想实现单击桌面 Facebook 通知时出现的“弹出”框或与 StackOverflow 中的相同。 我尝试使用模式，但它阻止了其他地方的点击，它隐藏了网站的其余部分。 我只想要一个像 StackOverflow 通知中那样的窗口。 至少迈出大步。

在 blazor 中我有类似的东西：

@if (ShowNotificationPopup)
{
    <div class="modal-backdrop fade show" @onclick="ToggleNotificationPopup"></div>
    <div class="modal fade show" tabindex="-1" style="display: block;">
        <NotificationPopup OnClose="ToggleNotificationPopup" />
    </div>
}

使用 Razor 组件，例如：

    <h3>NotificationPopup</h3>

<!-- NotificationPopup.razor -->
<div class="modal-dialog modal-dialog-centered modal-sm" id="notificationModal" tabindex="-1" role="dialog" aria-labelledby="notificationModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="notificationModalLabel">Notifications</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- Your notification content here -->
                <p>Notification 1</p>
                <p>Notification 2</p>
                <!-- Replace with actual notification content -->
            </div>
            <!-- Add footer or additional content if needed -->
            <button @onclick="ClosePopup">Close</button>
        </div>
    </div>
</div>

@code {
    [Parameter] public EventCallback OnClose { get; set; }

    private async Task ClosePopup()
    {
        await OnClose.InvokeAsync();
    }
}

Answer 1

我已经成功创建了与 Facebook 或 StackOverflow 相同的组件：

在 MainLayout.razor 中

  @inherits LayoutComponentBase
  <PageTitle>BlazorAuthServer</PageTitle>
<div class="page">
<div class="sidebar">
    <NavMenu />
</div>

<main>
    <div class="top-row px-4 auth">
        <LoginDisplay />
        <button class="nav-link btn btn-link text-dark position-relative" @onclick="ToggleNotificationPopup" id="notificationButton">
            <i class="oi oi-bell" style="color: blue; block-size:stretch"></i> <!-- Icône de notification -->
            <span class="notification-badge position-absolute top-100 start-100 translate-middle badge rounded-pill bg-danger">
                @if(!ShowNotificationPopup){
                @NotificationCount <!-- Nombre de notifications -->
                }
            </span>
            @if (ShowNotificationPopup)
            {
                <div class="centered-div">
                    <NotificationPopup @bind-ShowPopup="@ShowNotificationPopup" />
                </div>
            }
        </button>
        
        <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
    </div>

    <article class="content px-4">
        @Body
    </article>
</main>
</div>
  @code { 
private int NotificationCount = 3; // number of notifications

private bool ShowNotificationPopup { get; set; } = false;

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    
}

private void ToggleNotificationPopup()
{
    // Toggle the visibility of the notification popup
    ShowNotificationPopup = !ShowNotificationPopup;
}

}

在组件中（这是完整的代码）：

    <!-- NotificationPopup.razor -->
@if (showPopup)
{
    <div class="floating-popup">
        <div class="popup-content">
            <!-- Your notification content here -->
            <p>Notification 1</p>
            <p>Notification 2</p>
            <p>Notification 1</p>
            <p>Notification 2</p>
            <p>Notification 1</p>
            <p>Notification 2</p>
            <p>Notification 1</p>
            <p>Notification 2</p>
        </div>
    </div>
}

@code {
    [Parameter] public bool showPopup { get; set; }
    [Parameter]
    public EventCallback<bool> ShowPopupChanged { get; set; }

}

最后是CSS：

.floating-popup {
    position: fixed;
    background-color: white;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    max-width: 400px;
    max-height: 12rem;
    text-align: justify;
    color: red;
}

.floating-popup .popup-content {
    max-height: 11rem; 
    overflow-y: auto; 
    max-width: 8rem;
}

.popup-content {
    background-color: white;
    padding: 20px;
    border-radius: 5px;
}

.centered-div {
    position: absolute;
    top:3rem; /* Size of the Menu css top row*/
    left: -1rem;/*position X*/
    transform: translate(-50%, -50%);
    background-color: blue;
}