Styling and CSS

The TabPanel control has a simple layout, which makes it easy to style using CSS. For example, tabs appear above the content by default, but you can use CSS to change their position and show the below or vertically stacked, to the left or to the right of the content.

You can also choose whether or not to use animation when switching tabs.

Africa America Asia Europe Oceania

Algeria
Angola
Benin
Botswana

Canada
Chile
Mexico
United States

China
Korea
India
Japan

Austria
England
France
Germany
Netherlands
Switzerland

Australia
Fiji
New Zealand
Samoa

Options

Tab Position

Tab Alignment

isAnimated

Custom Headers

// This file locates: "Scripts/Lesson/C1Nav/TabPanelStyling.js".
c1.documentReady(function () {
    var theTabPanel = wijmo.Control.getControl('#theTabPanel');
    // change tab position
    var tabPosition = new wijmo.input.ComboBox('#tabPosition', {
        itemsSource: 'Left,Right,Above,Below'.split(','),
        selectedIndexChanged: function (s, e) {
            var host = theTabPanel.hostElement;
            s.itemsSource.forEach(function (pos, index) {
                var clsName = 'tabs-' + pos.toLowerCase();
                wijmo.toggleClass(host, clsName, index == s.selectedIndex);
            });
        },
        selectedIndex: 2, // above is the default
    });
 
    // toggle animation
    document.getElementById('isAnimated').addEventListener('click', function (e) {
        theTabPanel.isAnimated = e.target.checked;
    });
 
    // toggle custom headers
    document.getElementById('customHeaders').addEventListener('click', function (e) {
        wijmo.toggleClass(theTabPanel.hostElement, 'custom-headers', e.target.checked);
    });
 
    //  change tab alignment
    var tabAlign = new wijmo.input.ComboBox('#tabAlign', {
        itemsSource: 'Left,Center,Right'.split(','),
        selectedIndexChanged: function (s, e) {
            var host = theTabPanel.hostElement,
                headers = host.querySelector('.wj-tabheaders');
            headers.style.textAlign = s.text;
        }
    });
});

// This file locates: "Content/css/Lesson/C1Nav/TabPanelStyling.css".
.wj-tabpanel {
    padding: 0 12px;
}
 
.wj-tabpane {
    padding: 12px;
}
 
.wj-tabheader:hover {
    outline: 2px solid rgba(90, 160, 215, .5);
}
 
/* custom-headers */
.wj-tabpanel.custom-headers .wj-tabpanes {
    border: none;
}
 
.wj-tabpanel.custom-headers > div > .wj-tabheaders {
    background: black;
    color: white;
    border: none;
}
 
.wj-tabpanel.custom-headers .wj-tabheaders .wj-tabheader.wj-state-active {
    background: white;
    color: black;
}
 
.wj-tabpanel.custom-headers .wj-tabheaders .wj-tabheader:not(.wj-state-active) {
    font-weight: normal;
}
 
.wj-tabpanel.custom-headers .wj-tabheaders .wj-tabheader.wj-state-active:after {
    display: none; /* hide underline */
}
 
/* tabs on the left */
.wj-tabpanel.tabs-left > div {
    display: flex;
    align-items: center;
}
 
.wj-tabpanel.tabs-left .wj-tabheaders {
    display: flex;
    flex-direction: column;
    min-width: 8em;
    border-right: 1px solid #ddd;
}
 
    .wj-tabpanel.tabs-left .wj-tabheaders .wj-tabheader {
        text-align: right;
    }
 
.wj-tabpanel.tabs-left .wj-tabpanes {
    display: flex;
    flex-grow: 1;
    border-top: none;
    overflow-x: hidden;
}
 
/* tabs on the right */
.wj-tabpanel.tabs-right > div {
    display: flex;
    align-items: center;
}
 
.wj-tabpanel.tabs-right .wj-tabheaders {
    display: flex;
    flex-direction: column;
    min-width: 8em;
    border-left: 1px solid #ddd;
    order: 1;
}
 
    .wj-tabpanel.tabs-right .wj-tabheaders .wj-tabheader {
        text-align: left;
    }
 
.wj-tabpanel.tabs-right .wj-tabpanes {
    display: flex;
    flex-grow: 1;
    border-top: none;
    overflow-x: hidden;
    order: 0;
}
 
/* tabs below */
.wj-tabpanel.tabs-below > div {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
 
.wj-tabpanel.tabs-below .wj-tabheaders {
    order: 1; /* headers after panes */
}
 
.wj-tabpanel.tabs-below .wj-tabpanes {
    order: 0;
}
 
.wj-tabpanel.tabs-below .wj-tabheaders .wj-tabheader.wj-state-active:after {
    top: 0;
    bottom: unset;
}

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1NavController : Controller
    {
        // GET: Adding
        public ActionResult TabPanelStyling()
        {
            return View();
        }
    }
}

<h1>
    @Html.Raw(Resources.C1Nav.TabPanelStyling_Title)
</h1>
<p>
    @Html.Raw(Resources.C1Nav.TabPanelStyling_Text1)
</p>
<p>
    @Html.Raw(Resources.C1Nav.TabPanelStyling_Text2)
</p>
 
<div id="theTabPanel" class="custom-tab">
    <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>
</div>
@Html.C1().TabPanel("#theTabPanel")
 
<h4>
    Options
</h4>
<div class="options">
    <label for="tabPosition">
        Tab Position
    </label>
    <div id="tabPosition"></div>
</div>
<div class="options">
    <label for="tabAlign">
        Tab Alignment
    </label>
    <div id="tabAlign"></div>
</div>
<div class="options">
    <label for="isAnimated">
        isAnimated
    </label>
    <input id="isAnimated" type="checkbox" checked="checked">
</div>
<div class="options">
    <label for="customHeaders">
        Custom Headers
    </label>
    <input id="customHeaders" type="checkbox">
</div>