Mudblazor

Community Support

Discord

Gitter

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

Gitter

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective

RTL Languages

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

Note that RTL language support is still under development!

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.

Setting the RightToLeft property in MudLayout

Note that you should use MudLayout only once in your application.

ا

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

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

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

Show code example
Edit on TryMudBlazor
Copy Code
<MudLayout 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>
</MudLayout>
<MudSwitch @bind-Checked="@_rightToLeft" Label="Toggle Right to Left" Color="Color.Primary" Class="mud-float-left mt-n5"/>
@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 alligned. The label still remains right alligned on the other hand.

Text

Telephone

Email

Hide code example
Edit on TryMudBlazor
Copy Code
<MudLayout 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>
</MudLayout>
@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 should 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 🗙