时间戳

首页 > 解决方案 > Blazor 使用 HTML 和 CSS 最小化 .NET 中的聊天窗口

c# - Blazor 使用 HTML 和 CSS 最小化 .NET 中的聊天窗口

问题描述

我是使用 Blazor 的新手，通常会在 JS 中执行此操作，但 blazor 使用 C#，如果可能的话，我正在尝试实现此功能，使用 HTML 按钮最小化我的聊天窗口，但我不确定如何处理这个问题。

目前我有我的 HTML 聊天框

<div class="chatbox-holder">
        <div class="chatbox">
            <div class="chatbox-top">
                <div class="chatbox-avatar">
                    <img src="../NewFolder/avatar.png"/>
                </div>
                <div class="chat-partner-name">
                    <span class="status online"></span>
                    <a target="_blank">Joe</a>
                </div>
                <button class="minimize-window" @onclick(minimize)></button>

            </div>

在这里，我设置按钮类并使用@onclick 来触发最小化功能。

我的 CSS 正在设置按钮大小

.minimize-window {
    height: 25px;
    width: 25px;
}

现在我在这里声明了一个 blazor 组件作为一个函数，但我不确定 C# 在最小化这个窗口方面是如何工作的，我觉得我错过了一些我必须使用的代码。


@functions {
    void minimize()
    {

    }
}

标签： c#htmlcss.netblazor

解决方案

您必须设置一个 C# 变量来保留聊天框的状态。

@functions {
    bool isMinimized = false;
    void minimize()
    {
         isMinimized = true;
    }
    void maximize()
    {
         isMinimized = false;
    }
}

现在您可以使用此变量来呈现所需的 html 或只设置一个 css 类。类似的东西

@if (isMinimized)
{
    <div class="chatbox-holder">
        <button class="maximize-window" @onclick(maximize)></button>
     </div>
}else{
<div class="chatbox-holder">
        <div class="chatbox">
            <div class="chatbox-top">
                <div class="chatbox-avatar">
                    <img src="../NewFolder/avatar.png"/>
                </div>
                <div class="chat-partner-name">
                    <span class="status online"></span>
                    <a target="_blank">Joe</a>
                </div>
                <button class="minimize-window" @onclick(minimize)></button>

            </div>
     </div>
 </div>
}

推荐阅读