Skip to content

[Docs] Added RTL section to CodeSetup.md #2242

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
vnbaaij merged 1 commit into from
Jun 22, 2024
Merged

[Docs] Added RTL section to CodeSetup.md #2242

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 28 additions & 0 deletions examples/Demo/Shared/wwwroot/docs/CodeSetup.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,6 +119,34 @@ This is literally all you need in your views to use Fluent UI Blazor components.
The **Fluent UI Blazor** components are built on FAST's (Adaptive UI) technology, which enables design customization and personalization, while automatically
maintaining accessibility. This is accomplished through setting various "design tokens". The library exposes all design tokens, which you can use both from code as in a declarative way in your `.razor` pages. The different ways of working with design tokens are described in the [design tokens](https://www.fluentui-blazor.net/DesignTokens) page.

### For Right-To-Left languages

One of the most common design tokens is the `Direction` design token. It is required to make the application components visually configured for the right-to-left languages. In order to implement such configuration you need to use the `Direction` design token together with the `FluentDesignTheme` component in the main layout of your Right-to-Left pages:

```csharp
@* MainRtlLayout.razor *@

@using Microsoft.FluentUI.AspNetCore.Components.DesignTokens
@inject Direction DirectionDesignToken
@inherits LayoutComponentBase
...
@Body
...
<FluentDesignTheme Direction="@Direction" />
@code {
LocalizationDirection Direction { get; set; }
protected override async Task OnAfterRenderAsync(bool f)
{
await base.OnAfterRenderAsync(f);
if(!f)
return;
await DirectionDesignToken.WithDefault("rtl");
Direction = LocalizationDirection.RightToLeft;
StateHasChanged();
}
}
```

## Blazor Hybrid
You can use this library in **Blazor Hybrid** (MAUI/WPF/Windows Forms) projects. Setup is almost the same as described in the "Getting started" section above, but to get everything to work you'll need to take one extra step (for now) as described below:

Expand Down