Microsoft的 .NET 8 UI框架引入了靜態(tài)服務(wù)器端呈現(xiàn)模式（靜態(tài)SSR）——組件在服務(wù)器端呈現(xiàn)，然后返回到客戶端，沒(méi)有任何交互，DevExpress Blazor Drawer組件需要交互式呈現(xiàn)模式來(lái)動(dòng)態(tài)地改變其IsOpen狀態(tài)。

在本文中，我們將回顧在靜態(tài)SSR渲染模式下動(dòng)態(tài)顯示/隱藏DevExpress Blazor Drawer組件的兩種策略：

• 添加查詢參數(shù)來(lái)控制drawer的可見(jiàn)性
• 指定CSS規(guī)則來(lái)控制drawer的可見(jiàn)性

P.S.：DevExpress擁有.NET開(kāi)發(fā)需要的所有平臺(tái)控件，包含600多個(gè)UI控件、報(bào)表平臺(tái)、DevExpress Dashboard eXpressApp 框架、適用于 Visual Studio的CodeRush等一系列輔助工具。

獲取DevExtreme v24.1正式版下載

DevExpress技術(shù)交流群10：532598169      歡迎一起進(jìn)群討論

對(duì)于這個(gè)例子，我們使用的是一個(gè)Microsoft Blazor項(xiàng)目模板創(chuàng)建的Blazor Web應(yīng)用程序。在這個(gè)應(yīng)用程序中，注冊(cè)了適當(dāng)?shù)腄evExpress資源，并用以下代碼替換了MainLayout.razor頁(yè)面中的內(nèi)容。

MainLayout.razor

<style>
.dxbl-drawer > .dxbl-drawer-panel > .dxbl-drawer-body {
padding: 0;
}
</style>

<DxDrawer PanelWidth="250px" IsOpen="@true">
<BodyTemplate>
<div class="sidebar">
<NavMenu />
</div>
</BodyTemplate>
<TargetContent>
<div class="top-row px-4">
Here will be a toggle element.
<a  target="_blank">About</a>
</div>
<article class="content px-4">
@Body
</article>
</TargetContent>
</DxDrawer>

這個(gè)標(biāo)記創(chuàng)建一個(gè)永久可見(jiàn)的drawer，用戶可以使用它在頁(yè)面之間導(dǎo)航，但還不能修改可見(jiàn)性。

第一個(gè)策略：添加查詢參數(shù)來(lái)控制Drawer的可見(jiàn)性

查詢參數(shù)是緊跟頁(yè)面URL的？字符串后面的，這些參數(shù)可以為組件屬性設(shè)置值。

要使用查詢參數(shù)并更改drawer的IsOpen屬性值，您必須：

1. 使用 屬性指定drawer的IsOpen參數(shù)來(lái)自查詢字符串。

<DxDrawer IsOpen="@IsOpen">
...
@code {
[SupplyParameterFromQuery]
public bool IsOpen { get; set; }
}

2. 添加一個(gè)元素來(lái)控制drawer的可見(jiàn)性，將其封裝在導(dǎo)航到當(dāng)前頁(yè)面但切換IsOpen參數(shù)的NavLink組件中。

@inject NavigationManager NavigationManager
<style>
.drawer-toggler {
position: absolute;
appearance: none;
cursor: pointer;
width: 2rem;
height: 2rem;
top: 0.75rem;
left: 0.75rem;
border: 1px solid rgba(50, 50, 50, 0.1);
background: url("data:image/svg+xml,%3csvg xmlns='//www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2850, 50, 50, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(50, 50, 50, 0.1);
}
</style>

...
@* Here will be a toggle element. *@
<NavLink href="@(new Uri(NavigationManager.Uri).LocalPath + "?IsOpen=" + (!IsOpen).ToString())">
<input type="checkbox" title="Navigation menu" class="drawer-toggler"/>
</NavLink>
...

這樣用戶就可以點(diǎn)擊切換按鈕來(lái)顯示/隱藏drawer，但是當(dāng)用戶導(dǎo)航到另一個(gè)頁(yè)面時(shí)，drawer將消失。要解決此限制，請(qǐng)向?qū)Ш芥溄犹砑觍IsOpen`查詢參數(shù)，如下所示。

3. 在NavMenu組件中添加IsOpen參數(shù)。

MainLayout.razor

<NavMenu IsOpen="@IsOpen" />

4. 用以下代碼替換NavMenu.razor文件中的代碼。

NavMenu.razor

<div class="top-row ps-3 navbar navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="">BlazorApp</a>
</div>
</div>

<nav class="flex-column">
<div class="nav-item px-3">
<NavLink class="nav-link" href="@GetUrlWithParameter("")" Match="NavLinkMatch.All">
<span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home
</NavLink>
</div>

<div class="nav-item px-3">
<NavLink class="nav-link" href="@GetUrlWithParameter("weather")">
<span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Weather
</NavLink>
</div>
</nav>

@code {
[Parameter] public Boolean IsOpen { get; set; }

string GetUrlWithParameter(string url) {
return url + "?IsOpen=" + IsOpen.ToString();
}
}

現(xiàn)在用戶可以通過(guò)導(dǎo)航菜單復(fù)選框控制drawer的可見(jiàn)性。

注意：此方法在DevExpress Blazor項(xiàng)目模板（v24.1.6+）中使用。

第二個(gè)策略：指定CSS規(guī)則來(lái)控制Drawer的可見(jiàn)性

CSS規(guī)則允許您根據(jù)其他組件的狀態(tài)有條件地對(duì)元素應(yīng)用樣式，使用這種方法，我們將根據(jù)復(fù)選框狀態(tài)切換drawer可見(jiàn)性（將其寬度設(shè)置為0）。要實(shí)現(xiàn)此功能，您必須：

1. 添加一個(gè)復(fù)選框元素來(lái)切換drawer的可見(jiàn)性。

<style>
.drawer-toggler {
position: absolute;
appearance: none;
cursor: pointer;
width: 2rem;
height: 2rem;
top: 0.75rem;
left: 0.75rem;
border: 1px solid rgba(50, 50, 50, 0.1);
background: url("data:image/svg+xml,%3csvg xmlns='//www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2850, 50, 50, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(50, 50, 50, 0.1);
}
</style>

...
@* Here will be a toggle element. *@
<input type="checkbox" title="Navigation menu" class="drawer-toggler" checked />
...

2. 添加以下CSS規(guī)則，在未選中復(fù)選框時(shí)將drawer面板寬度設(shè)置為零。

.dxbl-drawer:has(.drawer-toggler:not(:checked)) .dxbl-drawer-panel {
width: 0 !important;
}

這樣，用戶就可以單擊復(fù)選框來(lái)顯示/隱藏drawer。

完整代碼如下：

<style>
.dxbl-drawer > .dxbl-drawer-panel > .dxbl-drawer-body {
padding: 0;
}

.drawer-toggler {
position: absolute;
appearance: none;
cursor: pointer;
width: 2rem;
height: 2rem;
top: 0.75rem;
left: 0.75rem;
border: 1px solid rgba(50, 50, 50, 0.1);
background: url("data:image/svg+xml,%3csvg xmlns='//www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2850, 50, 50, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(50, 50, 50, 0.1);
}

.dxbl-drawer:has(.drawer-toggler:not(:checked)) .dxbl-drawer-panel {
width: 0 !important;
}
</style>

<DxDrawer PanelWidth="250px" IsOpen="@true">
<BodyTemplate>
<div class="sidebar">
<NavMenu />
</div>
</BodyTemplate>
<TargetContent>
<div class="top-row px-4">
<input type="checkbox" title="Navigation menu" class="drawer-toggler" checked />
<a  target="_blank">About</a>
</div>
<article class="content px-4">
@Body
</article>
</TargetContent>
</DxDrawer>

為了幫助您入門(mén)，我們創(chuàng)建了一個(gè)示例，演示如何使用CSS來(lái)控制Drawer的可見(jiàn)性，以及如何修改移動(dòng)設(shè)備上的組件配置。您可以從我們的GitHub倉(cāng)庫(kù)下載這個(gè)例子：。

更多產(chǎn)品需求，歡迎咨詢“”~

更多DevExpress線上公開(kāi)課、中文教程資訊請(qǐng)上中文網(wǎng)獲取