TabPanel
TabPanel
Overview
This view shows how to create TabPanel control with HTML markup.
Features
Sample
Description
The markup used to initialize TabPanel controls consists of one element per tab. Each child element contains two children: the tab header and the tab content.
We suggest you use anchor elements (tag a) for the tab headers because they are semantically more meaningful than plain div elements.
Source
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> }
Documentation