TabStrip - Orientation and Alignment

Demo Configurator

Orientation options


Alignment Options


Isolate this demo as a stand-alone application

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.
<%@ Page AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="TabStrip.Examples.Functionality.OrientationAndAlignment.DefaultCS"Language="c#"  %>

<%@ 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>Telerik ASP.NET Example</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
        <div class="demo-container no-bg size-narrow">
            <div class="demo-content">
                <h2>TabStrip representing different types of orientation.</h2>
                <telerik:RadTabStrip runat="server" ID="RadTabStrip1" Orientation="HorizontalTop" Width="400px"
                    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>
                <telerik:RadMultiPage runat="server" ID="RadMultiPage1" SelectedIndex="0"
                    CssClass="multiPage" Width="400px">
                    <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"
                    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>
    </telerik:RadAjaxPanel>
    <telerik:RadAjaxPanel ID="RadAjaxPanel2" runat="server">
        <div class="demo-container no-bg size-narrow">
            <h2>TabStrip representing different types of alignment.</h2>
            <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>
    </telerik:RadAjaxPanel>

    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Title="Orientation options" Size="Narrow">
                    <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:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Title="Alignment Options" Size="Wide">
                    <asp:RadioButtonList ID="AlignmentOptions" runat="server" AutoPostBack="True"
                        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:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?