简介ðð»
你好！在这篇文章中，我为您提供了一个有趣的教程。在这里，我们将使用Glazor进行交互性构建一个漂亮的，完全可重复使用的对话框组件，以及用于造型的普通CSS，我不使用TailWind CSS之类的原因是因为您必须在项目中添加尾风您想使用对话框，因此，我使用标准CSS，以便随后可以将对话框放入 Razor class Library ，只需在您的Blazor Project中引用库，然后添加组件您喜欢，它会直接起来。
ð注意：如果要获取组件的源代码，可以在此处查看我的github上此帖子的github存储库：https://github.com/rasheed-k-mozaffar/CoolDialog
开始项目
为了简单起见，我创建了一个新的 jullazor websembly空应用程序用于本教程的项目，现在，如果您想准确地遵循我要做的事情，然后开始做。以下内容：
- 创建一个空的大火WASM项目
- 通过在 index.html 中删除此语句，启用CSS隔离，wwwroot中的根文件：
<link href="CoolDialog.styles.css" rel="stylesheet" />
ðâ€i命名了我的项目cooldialog，因此您在代码中看到它的原因，该行默认情况下会发表评论，因此，如果您想启用CSS隔离，请确保取消注释。
- 添加Bootstrap图标的CDN链接
ðâ¡此步骤是可选的，但是我想在一分钟内使用一个图标进行关闭的对话框按钮，但是如果您想跟随，请前往https://icons.getbootstrap.com/，请一路滚动向下，复制CDN链接，然后将其粘贴到 index.html
的头上
index.html 的头应该看起来像这样：
<head>
<meta charset="utf-8" />
<title>CoolDialog</title>
<base href="/" />
<link href="css/app.css" rel="stylesheet" />
<!--Add Bootstrap Icons CDN Link-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
<!--Enable Css Isolation-->
<link href="CoolDialog.styles.css" rel="stylesheet" />
</head>
- 因为我们喜欢干净的结构，我们将创建一个称为组件的新文件夹，它将是我们保存剃须刀组件以及它们的
组件范围CSS 文件。
项目结构应该看起来像这样：
我们准备开始ð
在我们的组件目录中，创建两个文件，一个用于对话框，另一个用于其样式。
我们将首先添加对话框的HTML骨架，将以下标记添加到对话框中。RAZOR组件：
<div class="overlay">
<div class="dialog">
<div class="dialog-header">
<div> </div>
<div>
<div class="close">
<i class="bi bi-x-lg"> </i>
</div>
</div>
</div>
<div class="dialog-body">
</div>
<div class="dialog-footer">
</div>
</div>
</div>
我们这里有几个部分：
1：覆盖：对话框周围的所有内容。
2：对话框：对话框的容器本身。
3：对话框标题：对话框的顶部。
4：对话框主体：对话框的主要内容。
5：对话框页脚：动作按钮或只是空。
让我们添加CSS，以下片段显示对话框的样式：
.overlay {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(0,0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.dialog {
width: 750px;
background-color: white;
border-radius: 10px;
padding: 1rem;
}
.dialog .dialog-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 2rem;
}
.dialog .dialog-body {
padding: 2rem;
}
.dialog .dialog-footer {
padding: 2rem;
}
.close {
height: 40px;
width: 40px;
background-color: transparent;
transition: 0.25s ease;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.close:hover {
background-color: #DDD;
}
ðâ€请随时查看CSS并根据您的需求进行更改，并且，如果您还要在重复使用该组件的同时控制CSS，则可以使用C＃为它们使用一些内联样式和动态值。
注意这些行：
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
第二行的原因是因为 Safari 需要它，如果您要使用Safari，就不会出现 Blur 。但是，它在Edge和Chrome上的工作正常，因此请确保添加它，因为它使覆盖层看起来不错。
是时候使事情互动ð
到目前为止，我们所做的只是普通的HTML和CSS，现在我们将添加一些C＃以在对话框中添加互动性，我们将通过使用 RenderFragment 类型来重新使用它，这将使我们能够重复使用对话框，并且根据需要，我们也能够使用页脚来重建其内部部分，因此让我们开始。
首先，我们需要一堆参数，例如标题（标题），是否打开了，是身体的UI段，而另一个则为页脚，因此请添加一个代码指令> dialog.razor 组件文件，在其中，添加以下参数：
@code {
[Parameter] public string? Title { get; set; }
[Parameter] public RenderFragment? BodyContent { get; set; }
[Parameter] public RenderFragment? FooterContent { get; set; }
[Parameter] public bool Opened { get; set; }
[Parameter] public EventCallback CloseButtonClicked { get; set; }
private void CloseDialog()
{
Opened = false;
CloseButtonClicked.InvokeAsync();
}
}
在谈论上一个代码之前，请创建一个IF语句包装所有对话框标记：
@if(Opened)
{
// Dialog markup goes here
}
这将检查是否打开等于true，然后将显示对话框，否则，对话框将不会出现。
对于代码目录中编写的代码，让我们看看它的作用。暂时忽略封闭式方法，而专注于参数， title 是一个简单的字符串， bodycontent 和 footercortent 是类型渲染范围，这允许在我们试图渲染的对话框组件中编写一些标记，这使得在不同地方重复使用相同的组件，同时保持一般功能存在，例如打开对话框，关闭它及其样式。
现在，我们需要将这些参数插入HTML。简而言之，我将在对话框的每个部分显示摘要！
标题部分
<div class="dialog-header">
<div>
<h2>@Title</h2>
</div>
<div @onclick="CloseDialog">
<div class="close">
<i class="bi bi-x-lg"> </i>
</div>
</div>
</div>
身体部分
<div class="dialog-body">
@BodyContent
</div>
最后，页脚部分：
<div class="dialog-footer">
@FooterContent
</div>
对于关闭按钮，我们将一个事件连接到了单击按钮时，将会发生的事情是，对话框将关闭，因为打开将变成 false false 因此，主if语句内部内部的条件将导致错误，因此不会呈现对话框，并且将触发事件回调，但是该回调是供以后使用的，我们将在以后进行讨论。<<<<<<<<<<<< /p>
现在我们可以使用对话框，让我们首先添加一种在我们想要的时候打开它的方法，我们将在 index.razor （我们的项目的主页）内部执行此操作。<<<<<<<<<<<<<<< /p>
以下是 index.razor 的内容：
@page "/"
<h1>Hello, world!</h1>
<button class="cool-button" @onclick="ShowDialog">Open Dialog</button>
<Dialog Title="Hello World!" Opened="dialogShown">
<BodyContent>
<p style="font-size: 13px;">
Lorem, ipsum dolor sit amet consectetur...
</p>
</BodyContent>
<FooterContent>
<button class="ok-button">Ok</button>
</FooterContent>
</Dialog>
@code {
private bool dialogShown = false;
private void ShowDialog()
{
dialogShown = true;
}
}
代码添加一个按钮并将其挂钩到事件中，单击时，对话框应打开，然后我添加组件本身，为其提供所需的参数，例如 title 。参数打开将根据由私有变量控制的值对话提供的值，此变量将控制我们是否要打开对话框。
在对话框中，我们有此标记：
<BodyContent>
// paragraph
</BodyContent>
<FooterContent>
// Ok button
</FooterContent>
这些是渲染片段，它将允许我们控制对话框的内容，在这些标签内部，您可以添加任何您想要的内容，这就是我们可以制作可重复使用的组件的方式，我只是添加了一个简单的段落和一个按钮这无济于事，但是如果您愿意，可以在对话框内添加整个表单，并添加更多的动作按钮，例如提交，取消，并链接到其他页面或动作。
如何处理对话框的关闭ð«
请记住，我们添加为参数的事件回调，该事件可以帮助我们清除对话框中的内容。假设您在对话框中有一个表单，并且用户在字段内输入了一些内容，然后决定取消并关闭对话框，因此，我们应该有一个备份事件，我们可以使用该事件来清除这些字段，并确保我们的对话框正确地关闭，现在在这里我没有对话框中的表单，我想在这里做的是挂接该事件，以便变量对话框将 closeclattonclicked 事件发生射击时为fals。
我可以通过为参数提供事件来做到这一点，如以下内容：
<Dialog Title="Hello World!" Opened="dialogShown" CloseButtonClicked="@(() => dialogShown = false)">
这将确保我的变量恢复为原始状态，即 false 。
结果ð§
结论
在这篇文章中，您已经了解了如何创建一个可重复使用的对话框，但不仅如此，您还可以在许多即将到来的项目中使用的组件，您要做的就是对其进行一些调整以符合符合一个标准项目，而且它可以很好地工作，此外，您已经看到了我们如何使用 RenderFragment 和组件参数等功能制作可重复使用的组件，如果您有任何疑问或建议，请确保离开他们在下面的评论中！