New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

    Appearance

    • Demo Configurator
    Shape
    Size
    Theme Color
    The RadFloatingActionButton Appearance demo shows different configuration settings that control the appearance of the widget. For additional information about the new styling, see the FloatingActionButton Appearance article.
    • DefaultCS.aspx
    • DefaultCS.aspx.cs
    <%@ Page Language="c#" AutoEventWireup="true"  Inherits="Telerik.Web.Examples.FloatingActionButton.Appearance.DefaultCS" CodeFile="DefaultCS.aspx.cs" %>
     
    <%@ 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>
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
        <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="ConfiguratorPanel1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="ConfiguratorPanel1" />
                        <telerik:AjaxUpdatedControl ControlID="RadFloatingActionButton1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadWindowManager runat="server"></telerik:RadWindowManager>
        <div class="demo-container" style="height: 300px; position: relative;">
            <telerik:RadWindowManager runat="server"></telerik:RadWindowManager>
            <telerik:RadFloatingActionButton runat="server" ID="RadFloatingActionButton1" Icon="home" Text="Home" PositionMode="Absolute" Align="MiddleStart">
               <AlignOffsetSettings X="150" />
            </telerik:RadFloatingActionButton>
        </div>
     
        <qsf:ConfiguratorPanel ID="ConfiguratorPanel1" runat="server">
            <Views>
                <qsf:View>
                    <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Title="Shape" Size="Narrow">
     
                        <ul class="fb-group">
                            <li>
                                <qsf:ComboBox ID="ShapeOptions" runat="server" AutoPostBack="true" Size="Wide" OnSelectedIndexChanged="ShapeOptions_SelectedIndexChanged">
                                    <Items>
                                        <telerik:RadComboBoxItem Text="Rectangle" Value="Rectangle" />
                                        <telerik:RadComboBoxItem Text="Square" Value="Square" />
                                        <telerik:RadComboBoxItem Text="Pill" Value="Pill" Selected="true" />
                                    </Items>
                                </qsf:ComboBox>
                            </li>
                        </ul>
                    </qsf:ConfiguratorColumn>
                    <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Title="Size" Size="Narrow">
                        <ul class="fb-group">
                            <li>
                                <qsf:ComboBox ID="SizeOptions" runat="server" AutoPostBack="true" Size="Wide" OnSelectedIndexChanged="SizeOptions_SelectedIndexChanged">
                                    <Items>
                                        <telerik:RadComboBoxItem Text="Small" Value="Small" />
                                        <telerik:RadComboBoxItem Text="Medium" Value="Medium" Selected="true" />
                                        <telerik:RadComboBoxItem Text="Large" Value="Large" />
                                        <telerik:RadComboBoxItem Text="None" Value="None" />
                                    </Items>
                                </qsf:ComboBox>
                            </li>
                        </ul>
                    </qsf:ConfiguratorColumn>
                    <qsf:ConfiguratorColumn ID="ConfiguratorColumn3" runat="server" Title="Theme Color" Size="Narrow">
                        <ul class="fb-group">
                            <li>
                                <qsf:ComboBox ID="ThemeColorOptions" runat="server" AutoPostBack="true" Size="Wide" OnSelectedIndexChanged="ThemeColorOptions_SelectedIndexChanged">
                                    <Items>
                                        <telerik:RadComboBoxItem Text="Primary" Value="Primary" />
                                        <telerik:RadComboBoxItem Text="Secondary" Value="Secondary" Selected="true" />
                                        <telerik:RadComboBoxItem Text="Tertiary" Value="Tertiary" />
                                        <telerik:RadComboBoxItem Text="Info" Value="Info" />
                                        <telerik:RadComboBoxItem Text="Success" Value="Success" />
                                        <telerik:RadComboBoxItem Text="Warning" Value="Warning" />
                                        <telerik:RadComboBoxItem Text="Error" Value="Error" />
                                    </Items>
                                </qsf:ComboBox>
                            </li>
                        </ul>
                    </qsf:ConfiguratorColumn>
                </qsf:View>
            </Views>
        </qsf:ConfiguratorPanel>
        </form>
    </body>
    </html>

    Support & Learning Resources

    Find Assistance