TabPanel
TabPanel
右から左（RTL）
TabPanel コントロールは右から左のレンダリングを自動的にサポートします。
機能
サンプル
説明
ページの右から左にコンテンツをレンダリングする言語もあります（典型的な例はアラビア語とヘブライ語）。 HTML は、「dir」属性を使用してこれに適応しています。任意の要素で「dir」を「rtl」に設定すると、要素のコンテンツが右から左に配置されます。
TabPanel は、これを自動的にサポートします。コントロールをホストする要素で「dir」属性が「rtl」に設定されている場合は、 タブを右から左に揃えてパネルがレンダリングします。コントロールのプロパティを設定する必要はありません。
「dir」属性値は継承されるので、たとえばそれを body タグなどに設定すると、 TabPanel を含めたページ全体が右から左にレンダリングされます。
CSS には、「dir」要素属性と同じ機能を持つ「direction」属性もあります。 「dir」属性は CSS ルール内で使用できるなどのいくつかの理由で、一般には「dir」属性の方が適切だと考えられています。
ソース
RightToLeftController.cs
using MvcExplorer.Models;
using Microsoft.AspNetCore.Mvc;
using System.Linq;
using System.Collections.Generic;
using Microsoft.AspNetCore.Http;
namespace MvcExplorer.Controllers
{
public partial class TabPanelController : Controller
{
// GET: RightToLeft
public ActionResult RightToLeft(IFormCollection collection)
{
return View();
}
}
}
RightToLeft.cshtml
<c1-tab-panel id="tabRtl" dir="rtl">
<div>
<a>Africa</a>
<div>
<ul>
<li>Algeria</li>
<li>Angola</li>
<li>Benin</li>
<li>Botswana</li>
</ul>
</div>
</div>
<div>
<a>America</a>
<div>
<ul>
<li>Canada</li>
<li>Chile</li>
<li>Mexico</li>
<li>United States</li>
</ul>
</div>
</div>
<div>
<a>Asia</a>
<div>
<ul>
<li>China</li>
<li>Korea</li>
<li>India</li>
<li>Japan</li>
</ul>
</div>
</div>
<div>
<a>Europe</a>
<div>
<ul>
<li>Austria</li>
<li>England</li>
<li>France</li>
<li>Germany</li>
<li>Netherlands</li>
<li>Switzerland</li>
</ul>
</div>
</div>
<div>
<a>Oceania</a>
<div>
<ul>
<li>Australia</li>
<li>Fiji</li>
<li>New Zealand</li>
<li>Samoa</li>
</ul>
</div>
</div>
</c1-tab-panel>
@section Summary{
<p>@Html.Raw(TabPanelRes.RightToLeft_Text0)</p>
}
@section Description{
<p>@Html.Raw(TabPanelRes.RightToLeft_Text1)</p>
<p>@Html.Raw(TabPanelRes.RightToLeft_Text2)</p>
<p>@Html.Raw(TabPanelRes.RightToLeft_Text3)</p>
<p>@Html.Raw(TabPanelRes.RightToLeft_Text4)</p>
}
マニュアル