Product Bundles
DevCraft
All Telerik .NET tools and Kendo UI JavaScript components in one package. Now enhanced with:
Web
Mobile
Document Management
Desktop
Reporting
Testing & Mocking
CMS
UI/UX Tools
Debugging
Free Tools
Support and Learning
Productivity and Design Tools
New to Telerik UI for ASP.NET AJAX? Download free 30-day trial
In Horizontal layout, the Align property allows you to specify the way tabs position themselves:
In Vertical layout, the values of the Align property are as follows:
<%@ 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> <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 RenderMode="Lightweight" 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 RenderMode="Lightweight" 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 RenderMode="Lightweight" 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>