Tab Strip

Controls

Rate this demo

Thank you for your post!
Submit a support ticket
If you have an active license or trial, you have access to dedicated support from Telerik’s developers. Response time is 24h for active licenses and 72h for trials, Mon-Fri.
Post in the forums
If you don’t have access to support or would like to help other people by sharing your problem, reach out to our active community in the forums.

TabStrip - Orientation and Alignment

TabStrip representing different types of orientation.
Orientation Configurator



TabStrip representing different types of alignment.

You can customize the way tabs are rendered by setting the Orientation property of RadTabStrip. Accepted values are:

HorizontalTop:
RadTabStrip is above the content (e.g. RadMultiPage). Child tabs (if any) are shown below parent tabs.
HorizontalBottom
RadTabStrip is below the content (e.g. RadMultiPage). Child tabs (if any) are shown above parent tabs.
VerticalRight:
RadTabStrip is on the right side of the content (e.g. RadMultiPage). Child tabs (if any) are shown on the left side of parent tabs.
VerticalLeft:
RadTabStrip is on the left side of the content (e.g. RadMultiPage). Child tabs (if any) are shown on the right side of parent tabs.

RadTabStrip supports two layouts - Horizontal (default) and Vertical.

In Horizontal layout, the Align property allows you to specify the way tabs position themselves:

  • Left - tabs will be left aligned;
  • Right - tabs will be right aligned;
  • Center - tabs will be centered;
  • Justify - tabs will be proportionally resized to full-up the width of the tabstrip.

In Vertical layout, the values of the Align property are as follows:

  • Left - tabs will be aligned to the top;
  • Right - tabs will be aligned to the bottom;
  • Center - tabs will be positioned in the middle;
  • Justify - tabs will be proportionally resized to full-up the height of the tabstrip.
C# VB
Show code in new window Demo isolation steps
<%@ Page AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="TabStrip.Examples.Functionality.OrientationAndAlignment.DefaultCS"Language="c#"  %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>ASP.NET TabStrip Demo - Orientation and Alignment</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />

    <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" Skin="Silk" DecoratedControls="All" />

    <qsf:InformationBox ID="InformationBox1" runat="server">
        TabStrip representing different types of orientation.
    </qsf:InformationBox>

    <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">

        <div class="exampleWrapper">
            <telerik:RadTabStrip runat="server" ID="RadTabStrip1" Orientation="HorizontalTop"
                SelectedIndex="0" MultiPageID="RadMultiPage1" CssClass="tabstrip" Skin="Glow">
                <Tabs>
                    <telerik:RadTab Text="Corporate">
                    </telerik:RadTab>
                    <telerik:RadTab Text="Products">
                    </telerik:RadTab>
                    <telerik:RadTab Text="Services">
                    </telerik:RadTab>
                </Tabs>
            </telerik:RadTabStrip>
            <telerik:RadMultiPage runat="server" ID="RadMultiPage1" SelectedIndex="0"
                Width="400px" CssClass="multiPage">
                <telerik:RadPageView runat="server" ID="RadPageView1" >
                    <img src="Images/Corporate.png" alt="corporate" />
                </telerik:RadPageView>
                <telerik:RadPageView runat="server" ID="RadPageView2" >
                    <img src="Images/Products.png" alt="products" />
                </telerik:RadPageView>
                <telerik:RadPageView runat="server" ID="RadPageView3" >
                    <img src="Images/Services.png" alt="services"/>
                </telerik:RadPageView>
            </telerik:RadMultiPage>
            <telerik:RadTabStrip runat="server" ID="RadTabStrip2" Orientation="HorizontalTop" CssClass="tabstrip"
                SelectedIndex="0" MultiPageID="RadMultiPage1" Skin="Glow">
                <Tabs>
                    <telerik:RadTab Text="Corporate">
                    </telerik:RadTab>
                    <telerik:RadTab Text="Products">
                    </telerik:RadTab>
                    <telerik:RadTab Text="Services">
                    </telerik:RadTab>
                </Tabs>
            </telerik:RadTabStrip>
        </div>

        <div class="configuratorWrapper">
            <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Title="Orientation Configurator"
                Orientation="Vertical" Expanded="True">
                <asp:Label ID="Label1" Style="display: block; padding: 10px 5px;" runat="server"
                    AssociatedControlID="OrientationOptions">Orientation options:</asp:Label>
                <asp:RadioButtonList runat="server" ID="OrientationOptions" OnSelectedIndexChanged="ChangeOrientation"
                    AutoPostBack="true">
                    <asp:ListItem Text="HorizontalTop" Selected="true"></asp:ListItem>
                    <asp:ListItem Text="HorizontalBottom"></asp:ListItem>
                    <asp:ListItem Text="VerticalLeft"></asp:ListItem>
                    <asp:ListItem Text="VerticalRight"></asp:ListItem>
                </asp:RadioButtonList>
            </qsf:ConfiguratorPanel>
        </div>

    </telerik:RadAjaxPanel>

    <div style="clear: both"></div>

    <qsf:InformationBox ID="InformationBox2" runat="server">
        TabStrip representing different types of alignment.
    </qsf:InformationBox>

    <telerik:RadAjaxPanel ID="RadAjaxPanel2" runat="server">

        <div class="exampleWrapper">
            <telerik:RadTabStrip runat="server" ID="RadTabStrip3" SelectedIndex="0" Skin="Glow">
                <Tabs>
                    <telerik:RadTab Text="Products">
                        <Tabs>
                            <telerik:RadTab Text="Telerik UI for ASP.NET">
                            </telerik:RadTab>
                            <telerik:RadTab Text="Telerik UI for WinForms">
                            </telerik:RadTab>
                            <telerik:RadTab Text="Telerik Reporting">
                            </telerik:RadTab>
                            <telerik:RadTab Text="Sitefinity CMS">
                            </telerik:RadTab>
                        </Tabs>
                    </telerik:RadTab>
                    <telerik:RadTab Text="Services">
                        <Tabs>
                            <telerik:RadTab Text="Enterprise Services">
                            </telerik:RadTab>
                            <telerik:RadTab Text="Enterprise Account Manager">
                            </telerik:RadTab>
                            <telerik:RadTab Text="On-site Training">
                            </telerik:RadTab>
                            <telerik:RadTab Text="GoToMeeting Sessions">
                            </telerik:RadTab>
                        </Tabs>
                    </telerik:RadTab>
                    <telerik:RadTab Text="Corporate">
                        <Tabs>
                            <telerik:RadTab Text="Corporate Info">
                            </telerik:RadTab>
                            <telerik:RadTab Text="Press Center">
                            </telerik:RadTab>
                            <telerik:RadTab Text="Customers">
                            </telerik:RadTab>
                            <telerik:RadTab Text="Awards">
                            </telerik:RadTab>
                        </Tabs>
                    </telerik:RadTab>
                </Tabs>
            </telerik:RadTabStrip>
        </div>

        <div class="configuratorWrapper">
            <qsf:ConfiguratorPanel runat="server" ID="ConfiguratorPanel2" Orientation="Vertical" Expanded="True" Title="Alignment Configurator">
                <asp:Label ID="Label2" Style="display: block; padding: 10px 5px;" runat="server"
                    AssociatedControlID="AlignmentOptions">Alignment Options:</asp:Label>
                <asp:RadioButtonList ID="AlignmentOptions" runat="server" AutoPostBack="True" CssClass="text"
                    OnSelectedIndexChanged="ChangeAlignment">
                    <asp:ListItem Value="Left" Selected="True">Left</asp:ListItem>
                    <asp:ListItem Value="Center">Center</asp:ListItem>
                    <asp:ListItem Value="Right">Right</asp:ListItem>
                    <asp:ListItem Value="Justify">Justify</asp:ListItem>
                </asp:RadioButtonList>
            </qsf:ConfiguratorPanel>
        </div>

    </telerik:RadAjaxPanel>

    </form>
</body>
</html>
Telerik UI for ASP.NET AJAX Q3'14 Release is here