blazor-webassemblyant-design-blazorant-blazor

Change direction of layout to RTL in Ant Design Blazor


How can I change direction of layout to RTL in Ant Blazor? There is not documentation about this. I mean changing direction to RTL similar the way Ant Blazor website changes direction by a button in header and using ConfigProvider.


Solution

  • After spending much time, I found that Router tag in App.razor should be wrapped inside ConfigProvider tag.

    <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 />
    

    After that you could use ConfigProvider as a CascadingParameter in your razor files.

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