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>
}
マニュアル