目标:
1、在AppBar上加一个Switch开关,实现中英文切换。
效果:
代码:
MainLayout.razor界面代码如下:
@using BlazorComponent.I18n
@using System.Globalization
@inherits LayoutComponentBase
@inject I18n I18n
<MApp Id="inspire">
<CascadingValue Value="@I18n.Culture.ToString()" Name="Culture">
<MNavigationDrawer @bind-Value="_drawer" App>
<!-- Your content -->
<NavMenu/>
</MNavigationDrawer>
<MAppBar Color="deep-purple accent-4"
Dense
Dark App>
<MAppBarNavIcon @onclick="() => _drawer = !_drawer">
</MAppBarNavIcon>
<MToolbarTitle>
@I18n.T("Home")
</MToolbarTitle>
<MSpacer></MSpacer>
<MSwitch Class="mt-5 mr-10" @bind-Value="IsChinese" LeftText="EN" RightText="中" Color="black" TrackColor="#E5E6EB" MinHeight="30"></MSwitch>
</MAppBar>
<MMain>
<CascadingValue Value="this" IsFixed>
@Body
</CascadingValue>
</MMain>
</CascadingValue>
</MApp>
@code {
private CultureInfo? _culture;
private bool _showMobileMenuList;
private bool _hideAppBarNavIcon;
private bool _showSettings;
private string? _project;
bool _drawer = true;
bool _isChinee = true;
public bool IsChinese
{
get { return _isChinee; }
set
{
_isChinee = !_isChinee;
SetLanugae();
}
}
private void SetLanugae()
{
if (_isChinee)
{
I18n.SetCulture(new CultureInfo("zh-CN"));//将语言切换成zh-CN
}
else
{
I18n.SetCulture(new CultureInfo("en-US"));//将语言切换成en-US
}
}
}
Index.razor
@page "/"
@using BlazorComponent.I18n
@inject I18n I18n
<h1>Hello, world!</h1>
Welcome to your new app.
<SurveyPrompt Title="How is Blazor working for you?" />
@I18n.T("Home")
@code{
[CascadingParameter(Name = "Culture")]
private string Culture { get; set; } = null!;
}