如何在 radzen blazor studio 应用程序中将页面方向更改为 RTL

Question

我有一个 radzen blazor studio 的 Web 应用程序。我向应用程序添加了本地化。所以它添加了

CulturePicker.Razor

页面和

CulturePicker.cs

类。

这是

CulturePicker.cs

班

<RadzenDropDown @bind-Value="@culture" TValue="string" Data="@(new [] { new { Text = "العربية (المملكة العربية السعودية)", Value = "ar-SA"}, new { Text = "English", Value = "en" } })"
    TextProperty="Text" ValueProperty="Value" Change="@ChangeCulture" />

这就是

[Change="@ChangeCulture"]

方法

protected void ChangeCulture()
{
    var redirect = new Uri(NavigationManager.Uri).GetComponents(UriComponents.PathAndQuery | UriComponents.Fragment, UriFormat.UriEscaped);

    var query = $"?culture={Uri.EscapeDataString(culture)}&redirectUri={redirect}";

    NavigationManager.NavigateTo("Culture/SetCulture" + query, forceLoad: true);
}

我需要的是，当用户改变文化（语言）时，页面布局（方向）从 RTL 和 LTR 发生变化

Answer 1

首先，我发现radzen-blazor-components-v5已经支持rtl外观，文档中提到

此主要版本中最重要的更新之一是 引入备受期待的从右到左 (RTL) 支持。 所有 Radzen Blazor 组件现在完全支持 RTL 方向.... 启用它，只需 将 dir=”rtl” 属性添加到您的 html 标签中 布局。

按照这个行动计划，我发现这个案例可以在 blazor 应用程序中很好地工作，无论我们是否使用 Radzen。我使用新的 .net 8 blazor Web 应用程序进行了测试，并在是否.razor 组件中添加了下面的代码，并且它有效。您还可以将这些方法添加到您的

ChangeCulture

方法中。

@page "/weather"
@attribute [StreamRendering]
@rendermode InteractiveServer
@inject IJSRuntime JS

<PageTitle>Weather</PageTitle>

<h1>Change Direction</h1>
<button @onclick=SetRTL>
    RTL
</button>
<button @onclick=SetLTR>
    LTR
</button>

@code {
    void SetDIR(string direction)
    {
        if (JS is IJSInProcessRuntime sr)
            sr.InvokeVoid("document.body.setAttribute", "dir", direction);
        else
            JS.InvokeVoidAsync("document.body.setAttribute", "dir", direction);
    }
    void SetRTL() => SetDIR("rtl");
    void SetLTR() => SetDIR("ltr");
}

然后我还使用 Radzen ThemeService 找到了

这个示例

。它需要注入

@inject ThemeService ThemeService

并调用

ThemeService.SetRightToLeft({true/false});

来改变视图。