我启用了本地化和全球化配置,需要在 RTL 区域性中添加 RTL 模式。我该怎么做?
将 ASP.Net Core 2.2与剃刀页面和个人帐户配置结合使用
// Configuration Of Localizaion
services.AddLocalization(opts =>
{
opts.ResourcesPath = "CultureResources";
});
//services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);
services.AddMvc()
.AddViewLocalization(opts => { opts.ResourcesPath = "CultureResources"; })
.AddViewLocalization(LanguageViewLocationExpanderFormat.Suffix)
.AddDataAnnotationsLocalization()
.SetCompatibilityVersion(CompatibilityVersion.Version_2_1)
.AddRazorPagesOptions(options =>
{
options.AllowAreas = true;
options.Conventions.AuthorizeAreaFolder("Identity", "/Account/Manage");
options.Conventions.AuthorizeAreaPage("Identity", "/Account/Logout");
});
services.Configure<RequestLocalizationOptions>(opt =>
{
var supportedCulutures = new List<CultureInfo>
{
new CultureInfo("en"),
new CultureInfo("en-US"),
new CultureInfo("ar-EG")
};
opt.DefaultRequestCulture = new RequestCulture("en-US");
// Formating numbers, date, etc.
opt.SupportedCultures = supportedCulutures;
// UI strings that we have localized
opt.SupportedUICultures = supportedCulutures;
});
选择 RTL 文化时启用 RTL 模式
为 RTL 样式创建一个新的 css 文件,例如 rtl.css
body {
direction:rtl;
}
然后在 _layout.cshtml 文件中检查当前区域性文本方向,并在 head 部分包含相关的 css 文件;
@using System.Globalization
@if(CultureInfo.CurrentCulture.TextInfo.IsRightToLeft) {
<link rel="stylesheet" type="text/css" href="rtl.css">
}
对于 .Net Core 5.0
您可以使用 bootstrap-rtl.css并将 lang="ar" 和 dir="rtl" 添加到 html 标签中。喜欢<html lang="ar" dir="rtl">
因此,要使其动态并使用 ltr,请将以下代码添加到 _Layout.cshtml
@{
var culture = Context.Features.Get<Microsoft.AspNetCore.Localization.IRequestCultureFeature>();
var dir = culture.RequestCulture.UICulture.TextInfo.IsRightToLeft ? "rtl" : "ltr";
var twoLetter = culture.RequestCulture.UICulture.TwoLetterISOLanguageName;
}
<!DOCTYPE html>
<html lang="@twoLetter" dir="@dir">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"]</title>
<link href="~/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
@if (dir == "rtl")
{
<link href="~/lib/bootstrap-rtl/css/bootstrap-rtl.css" rel="stylesheet" />
}
更多信息 https://getbootstrap.com/docs/5.0/getting-started/rtl/