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

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

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

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

獲取DevExtreme v24.1正式版下載

DevExpress技術交流群10：532598169      歡迎一起進群討論

對于這個例子，我們使用的是一個Microsoft Blazor項目模板創(chuàng)建的Blazor Web應用程序。在這個應用程序中，注冊了適當?shù)腄evExpress資源，并用以下代碼替換了MainLayout.razor頁面中的內(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>

這個標記創(chuàng)建一個永久可見的drawer，用戶可以使用它在頁面之間導航，但還不能修改可見性。

第一個策略：添加查詢參數(shù)來控制Drawer的可見性

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

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

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

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

2. 添加一個元素來控制drawer的可見性，將其封裝在導航到當前頁面但切換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>
...

這樣用戶就可以點擊切換按鈕來顯示/隱藏drawer，但是當用戶導航到另一個頁面時，drawer將消失。要解決此限制，請向導航鏈接添加`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)在用戶可以通過導航菜單復選框控制drawer的可見性。

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

第二個策略：指定CSS規(guī)則來控制Drawer的可見性

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

1. 添加一個復選框元素來切換drawer的可見性。

<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ī)則，在未選中復選框時將drawer面板寬度設置為零。

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

這樣，用戶就可以單擊復選框來顯示/隱藏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>

為了幫助您入門，我們創(chuàng)建了一個示例，演示如何使用CSS來控制Drawer的可見性，以及如何修改移動設備上的組件配置。您可以從我們的GitHub倉庫下載這個例子：。

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

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