Switch to Blazor wasm
Toggle light/dark theme
GitHub repository
Toggle right-to-left/left-to-right

Community Support

Discord

GitHub Discussions

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective

Community Support

Discord

GitHub Discussions

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective

Toggle right-to-left/left-to-right
Show code example
Edit on TryMudBlazor
Copy Code
Hide code example
Edit on TryMudBlazor
Copy Code
Hide code example
Edit on TryMudBlazor
Copy Code
MudBlazor

Community Support

Discord

GitHub Discussions

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective


Switch to Blazor wasm
Toggle light/dark theme
GitHub repository
Toggle right-to-left/left-to-right

Community Support

Discord

GitHub Discussions

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective

RTL Languages

Right-to-Left (RTL) specific styling options.

Explanation

Right-to-Left script is used in languages like arabic and hebrew where writing starts from the right of the page and continues to the left. The UI has to be mirrored horizontally because of that.

You can check out the docs in RTL styling by clicking on the

Toggle right-to-left/left-to-right
icon on the top right in the appbar.

MudRTLProvider

Wrap your code inside a MudRTLProvider. Note that MudThemeProvider, MudDialogProvider and MudSnackbarProvider must be children of MudRTLProvider in order to support RTL. Your MainLayout.razor can look something like this:

<MudRTLProvider/>
    <MudThemeProvider/>
    <MudDialogProvider/>
    <MudSnackbarProvider/>

    <MudLayout>
        <MudMainContent>
            @Body
        </MudMainContent>
    </MudLayout>
</MudRTLProvider>

Example

By setting RightToLeft="true" you can change the layout to RTL.

ا

استريا كرواتيا

شبه الجزيرة في أوروبا

التقطت هذه الصورة في قرية صغيرة في استرا كرواتيا

Show code example
Edit on TryMudBlazor
Copy Code
<MudRTLProvider RightToLeft="@_rightToLeft">
    <MudCard Class="mb-2" Style="width: 400px">
        <MudCardHeader>
            <CardHeaderAvatar>
                <MudAvatar Color="Color.Secondary">@Localizer("CardAvatarLetter")</MudAvatar>
            </CardHeaderAvatar>
            <CardHeaderContent>
                <MudText Typo="Typo.body1">@Localizer("CardHeader")</MudText>
                <MudText Typo="Typo.body2">@Localizer("CardSubHeader")</MudText>
            </CardHeaderContent>
            <CardHeaderActions>
                <MudIconButton Icon="@Icons.Material.Filled.Settings" Color="Color.Default" />
            </CardHeaderActions>
        </MudCardHeader>
        <MudCardMedia Image="_content/MudBlazor.Docs/images/content-template-pilars.png" Height="250" />
        <MudCardContent>
            <MudText Typo="Typo.body2">@Localizer("CardDescription")</MudText>
        </MudCardContent>
        <MudCardActions>
            <MudIconButton Icon="@Icons.Material.Filled.Favorite" Color="Color.Default" />
            <MudIconButton Icon="@Icons.Material.Filled.Share" Color="Color.Default" />
        </MudCardActions>
    </MudCard>
</MudRTLProvider>
<MudSwitch @bind-Checked="@_rightToLeft" Label="Toggle Right to Left" Color="Color.Primary" Class="mud-float-left"/>
@code {
    private bool _rightToLeft = true;

    //This translation is for demonstration purposes only. In a real application, you should use a IStringLocalizer etc.
    private string Localizer(string key)
    {
        //This is just a google translation. If you have a better translation, feel free to share it with us  :)
        if (key.Equals("CardAvatarLetter"))
            return _rightToLeft ? "ا" : "I";
        else if (key.Equals("CardHeader"))
            return _rightToLeft ? "استريا كرواتيا" : "Istra Croatia";
        else if (key.Equals("CardSubHeader"))
            return _rightToLeft ? "شبه الجزيرة في أوروبا" : "Peninsula in Europe";
        else if (key.Equals("CardDescription"))
            return _rightToLeft ? "التقطت هذه الصورة في قرية صغيرة في استرا كرواتيا" : "This photo was taken in a small village in Istra Croatia.";
        return "";
    }
}

Text Fields

Text Fields with InputType.Email or InputType.Telephone remain left-aligned, with the label remaining right-aligned.

Text

Telephone

Email

Hide code example
Edit on TryMudBlazor
Copy Code
<MudRTLProvider RightToLeft="true">
    <MudGrid>
        <MudItem xs="12" sm="4">
            <MudText Align="Align.Left">Text</MudText>
            <MudTextField Label="الاسم الأول" Variant="Variant.Outlined" @bind-Value="@_name" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Person"></MudTextField>
        </MudItem>
        <MudItem xs="12" sm="4">
            <MudText Align="Align.Left">Telephone</MudText>
            <MudTextField InputType="InputType.Telephone" Label="رقم الهاتف" Variant="Variant.Outlined" @bind-Value="@_telephone" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Smartphone"></MudTextField>
        </MudItem>
        <MudItem xs="12" sm="4">
            <MudText Align="Align.Left">Email</MudText>
            <MudTextField InputType="InputType.Email" Label="البريد الإلكتروني" Variant="Variant.Outlined" @bind-Value="@_email" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Email"></MudTextField>
        </MudItem>
    </MudGrid>
</MudRTLProvider>
@code {
    private string _name { get; set; } = "John Smith";
    private string _email { get; set; } = "mail@example.com";
    private long? _telephone { get; set; } = 1618033988;
}

Border Radius

If your application needs to support both left-to-right and right-to-left languages, make use of start and end border radiuses instead of left and right. Some other components like MudDrawer also support start and end properties.

.rounded-s-xl

.rounded-e-xl

.rounded-ts-xl

.rounded-te-xl

.rounded-bs-xl

.rounded-be-xl

Hide code example
Edit on TryMudBlazor
Copy Code
<div class="mud-theme-primary py-4 px-6 mx-4 rounded-s-xl">
    <MudText Align="Align.Center">.rounded-s-xl</MudText>
</div>
<div class="mud-theme-secondary py-4 px-6 mx-4 rounded-e-xl">
    <MudText Align="Align.Center">.rounded-e-xl</MudText>
</div>
<div class="mud-theme-tertiary py-4 px-6 mx-4 rounded-ts-xl">
    <MudText Align="Align.Center">.rounded-ts-xl</MudText>
</div>
<div class="mud-theme-info py-4 px-6 mx-4 rounded-te-xl">
    <MudText Align="Align.Center">.rounded-te-xl</MudText>
</div>
<div class="mud-theme-warning py-4 px-6 mx-4 rounded-bs-xl">
    <MudText Align="Align.Center">.rounded-bs-xl</MudText>
</div>
<div class="mud-theme-error py-4 px-6 mx-4 rounded-be-xl">
    <MudText Align="Align.Center">.rounded-be-xl</MudText>
</div>

Other useful css classes

  • .mud-flip-x-rtl - Flips the element horizontally when in rtl mode (Can be used for icons which should be flipped in rtl mode)
  • .mud-rtl and .mud-ltr - Changes a specific element to use left-to-right or right-to-left styling
  • .mud-float-start and .mud-float-end - Places an element on the start or end side of its container
  • margin/padding with start/end - See Spacing for more information
An error has occurred. This application may no longer respond until reloaded. Reload 🗙