在 Ant Design Blazor 中将布局方向更改为 RTL答案

【问题标题】：Change direction of layout to RTL in Ant Design Blazor在 Ant Design Blazor 中将布局方向更改为 RTL
【发布时间】：2022-02-25 21:02:03
【问题描述】：

如何在 Ant Blazor 中将布局方向更改为 RTL？没有关于此的文档。我的意思是将方向更改为 RTL，类似于 Ant Blazor 网站通过标题中的按钮和使用 ConfigProvider 更改方向的方式。

【问题讨论】：

标签： blazor-webassembly ant-design-blazor ant-blazor

【解决方案1】：

花了很多时间，我发现App.razor中的Router标签应该包含在ConfigProvider标签中。

<ConfigProvider>
   <Router AppAssembly="@typeof(App).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
    </Found>
    <NotFound>
        <PageTitle>Not found</PageTitle>
        <LayoutView Layout="@typeof(MainLayout)">
            <p role="alert">Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
   </Router>
</ConfigProvider>
<AntContainer />

之后，您可以在剃刀文件中使用 ConfigProvider 作为 CascadingParameter。

[CascadingParameter] public ConfigProvider ConfigProvider { get; set; }

【讨论】：

【解决方案2】：

你只需要把html标签改成这样：

 <html dir="rtl" data-direction="rtl">

它会改变方向到rtl

【讨论】：

不是改变控制方向
一些控制方向在css中没有很好的定义这个技巧只适用于rtl，因为它在ant blazor文档中实现和使用，所以为了更准确你可以下载ant design原始css文件