TabPanel
TabPanel
概要
このビューは、HTML マークアップで TabPanel コントロールを作成する方法を示します。
機能
サンプル
説明
TabPanel コントロールの初期化に使用されるマークアップは、タブごとに 1 つの要素で構成されます。 各子要素には、2 つの子(タブヘッダーとタブコンテンツ)が含まれています。
タブヘッダーにはアンカー要素(a タグ)の使用をお勧めします。その方が 普通の div 要素より意味的にわかりやすいからです。
ソース
IndexController.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: Index public ActionResult Index(IFormCollection collection) { return View(); } } }
Index.cshtml
<c1-tab-panel id="tabGettingStarted"> <div> <a>Africa</a> <div> <ul> <li>Algeria</li> <li>Angola</li> <li>Benin</li> <li>Botswana</li> </ul> </div> </div> <div> <a class="wj-state-active"> 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.Index_Text0)</p> } @section Description{ <p>@Html.Raw(TabPanelRes.Index_Text1)</p> <p>@Html.Raw(TabPanelRes.Index_Text2)</p> }
マニュアル