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

Basic Usage

Summer Mix 2022
DJ Peril

Notes:

This demo shows the basic usage of the RadFloatingActionButton control. You can customize the shape, size, color, alignment and position, text and icon, and also configure the speed dial items of the FloatingActionButton through the built-in options.
  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • scripts.js
  • styles.css
<%@ Page Language="vb" AutoEventWireup="true"  Inherits="Telerik.Web.Examples.FloatingActionButton.BasicUsage.DefaultVB" CodeFile="DefaultVB.aspx.vb" %>

<%@ 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 href="styles.css" rel="stylesheet" />
    <script src="scripts.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadWindowManager runat="server"></telerik:RadWindowManager>
    <div class="demo-container">
        <div class="flex-container">
            <telerik:RadCard runat="server" ID="RadCard1" Orientation="Vertical">
                <telerik:CardImageComponent runat="server" src="https://demos.telerik.com/kendo-ui/content/shared/images/photos/4.jpg"></telerik:CardImageComponent>
                <telerik:CardBodyComponent runat="server">
                    <telerik:RadFloatingActionButton runat="server" ID="fabText" Text="Add to Queue" PositionMode="Absolute" Align="TopEnd">
                        <AlignOffsetSettings Y="237" />
                        <ClientEvents OnClick="addToQueueClick" />
                    </telerik:RadFloatingActionButton>
                    <telerik:CardTitleComponent runat="server">Summer Mix 2022</telerik:CardTitleComponent>
                    <telerik:CardSubtitleComponent runat="server">DJ Peril</telerik:CardSubtitleComponent>
                </telerik:CardBodyComponent>
            </telerik:RadCard>

            <div class="notes-wrap">
                <h2>Notes: </h2>
                <telerik:RadTextBox ID="RadTextBox1" runat="server"
                    TextMode="MultiLine"
                    Width="100%"
                    Rows="6"
                    Wrap="true"
                    Text="DevReach 2019 Day 2 Morning Keynote: 'Technical Leadership: Lessons Learned at NASA'">
                </telerik:RadTextBox>
                <div id="notes-overlay" class="k-overlay"></div>
                <telerik:RadFloatingActionButton runat="server" ID="FabSpeedDial" Icon="cog" PositionMode="Absolute">
                    <ClientEvents OnExpand="OnExpand" OnCollapse="OnCollapse" />
                    <Items>
                        <telerik:FloatingActionButtonItem Label="Save" Icon="save" OnClientClicked="saveClickHandler" />
                        <telerik:FloatingActionButtonItem Label="Share" Icon="share" OnClientClicked="shareClickHandler" />
                    </Items>
                </telerik:RadFloatingActionButton>
            </div>
        </div>
    </div>

    </form>
</body>
</html>

Support & Learning Resources

Find Assistance