TabPanel Right to Left

Some languages render content from the right to the left of the page(Arabic and Hebrew are typical examples). HTML accommodates this with the 'dir' attribute. Setting 'dir' to 'rtl' on any element causes the element's content to flow from right to left.

The TabPanel supports this automatically. If the element hosting the control has the 'dir' attribute set to 'rtl', the panel will render with tabs aligned from right to left. You don't have to set any properties on the control.

Note that the 'dir' attribute value is inherited, so if you set it on the body tag for example, the entire page will be rendered from right to left, including the TabPanel.

Note also that CSS has a 'direction' attribute that performs the same function as the 'dir' element attribute. The 'dir' attribute is generally considered more appropriate for several reasons, including the fact that it can be used in CSS rules.

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

TabPanelRightToLeftController.cs
TabPanelRightToLeft.cshtml

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

<h1>
    @Html.Raw(Resources.C1Nav.TabPanelRightToLeft_Title)
</h1>
<p>
    @Html.Raw(Resources.C1Nav.TabPanelRightToLeft_Text1)
</p>
<p>
    @Html.Raw(Resources.C1Nav.TabPanelRightToLeft_Text2)
</p>
<p>
    @Html.Raw(Resources.C1Nav.TabPanelRightToLeft_Text3)
</p>
<p>
    @Html.Raw(Resources.C1Nav.TabPanelRightToLeft_Text4)
</p>
 
<div 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>
</div>
@Html.C1().TabPanel("#tabRtl")