telerik · Tsvetomir-Hr · Feb 3, 2025 · Jan 21, 2025 · Jan 21, 2025 · Jan 21, 2025
@@ -0,0 +1,129 @@
+---
+title: Appearance
+page_title: Floating Action Button Appearance
+description: Explore the appearance settings of the Floating Action Button for Blazor. See the available options that allow you to fully customize the look of the Floating Action Button component. 
+slug: fab-appearance
+tags: telerik,blazor,floating action button, appearance
+published: True
+position: 1
+---
+
+# Appearance Settings
+
+The Floating Action Button component features built-in appearance parameters that allow you to customize virtually every aspect of its look and feel. The example at the bottom of the page lets you experiment with the available parameters.
+
+## Rounded
+
+The `Rounded` parameter applies the `border-radius` CSS rule to the button to achieve curving of the edges. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Button.Rounded` class:
+
+| Class members | Manual declarations |
+|------------|--------|
+|`Small` |`sm`|
+|`Medium`|`md`|
+|`Large`|`lg`|
+|`Full`|`full` (default)|
+
+## Size
+
+You can increase or decrease the size of the button by setting the `Size` parameter to a member of the `Telerik.Blazor.ThemeConstants.Button.Size` class:
+
+| Class members | Manual declarations |
+|---------------|--------|
+| `Small`   |`sm`|
+| `Medium`   |`md` (default)|
+| `Large`   |`lg`|
+
+## ThemeColor
+
+The color of the button is controlled through the `ThemeColor` parameter. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Button.ThemeColor` class:
+
+| Class members | Manual declarations |
+|------------|--------|
+|`Base` <br /> (default) |`base`|
+|`Primary`|`primary`|
+|`Secondary`|`secondary`|
+|`Tertiary`|`tertiary`|
+|`Info`|`info`|
+|`Success`|`success`|
+|`Warning`|`warning`|
+|`Error`|`error`|
+|`Dark`|`dark`|
+|`Light`|`light`|
+|`Inverse`|`inverse`|
+
+## Example
+
+````RAZOR
+<div class="k-flex-basis-auto">
+    <label>
+        Theme Color
+        <TelerikDropDownList Data="@ThemeColors" @bind-Value="@ThemeColor">
+            <DropDownListSettings>
+                <DropDownButtonPopupSettings MaxHeight="auto" />
+            </DropDownListSettings>
+        </TelerikDropDownList>
+    </label>
+    <label>
+        Rounded
+        <TelerikDropDownList Data="@RoundedValues" @bind-Value="@Rounded">
+            <DropDownListSettings>
+                <DropDownButtonPopupSettings MaxHeight="auto" />
+            </DropDownListSettings>
+        </TelerikDropDownList>
+    </label>
+    <label>
+        Size
+        <TelerikDropDownList Data="@Sizes" @bind-Value="@Size">
+            <DropDownListSettings>
+                <DropDownButtonPopupSettings MaxHeight="auto" />
+            </DropDownListSettings>
+        </TelerikDropDownList>
+    </label>
+</div>
+
+<TelerikFloatingActionButton ThemeColor="@ThemeColor"
+                             Rounded="@Rounded"
+                             Size="@Size"
+                             HorizontalAlign="@FloatingActionButtonHorizontalAlign.End"
+                             VerticalAlign="@FloatingActionButtonVerticalAlign.Top"
+                             Icon="SvgIcon.Play" />
+
+@code {
+    private string ThemeColor { get; set; } = ThemeConstants.Button.ThemeColor.Primary;
+    private List<string> ThemeColors { get; set; } = new List<string>()
+    {
+        ThemeConstants.Button.ThemeColor.Base,
+        ThemeConstants.Button.ThemeColor.Primary,
+        ThemeConstants.Button.ThemeColor.Secondary,
+        ThemeConstants.Button.ThemeColor.Tertiary,
+        ThemeConstants.Button.ThemeColor.Info,
+        ThemeConstants.Button.ThemeColor.Success,
+        ThemeConstants.Button.ThemeColor.Warning,
+        ThemeConstants.Button.ThemeColor.Error,
+        ThemeConstants.Button.ThemeColor.Dark,
+        ThemeConstants.Button.ThemeColor.Light,
+        ThemeConstants.Button.ThemeColor.Inverse
+    };
+
+    private string Rounded { get; set; } = ThemeConstants.Button.Rounded.Full;
+    private List<string> RoundedValues { get; set; } = new List<string>()
+    {
+        ThemeConstants.Button.Rounded.Small,
+        ThemeConstants.Button.Rounded.Medium,
+        ThemeConstants.Button.Rounded.Large,
+        ThemeConstants.Button.Rounded.Full
+    };
+
+    private string Size { get; set; } = ThemeConstants.Button.Size.Medium;
+    private List<string> Sizes { get; set; } = new List<string>()
+    {
+        ThemeConstants.Button.Size.Small,
+        ThemeConstants.Button.Size.Medium,
+        ThemeConstants.Button.Size.Large
+    };
+}
+````
+
+## See Also
+
+* [Appearance - Design System Docs](https://www.telerik.com/design-system/docs/components/floatingactionbutton/#appearance)
@@ -0,0 +1,82 @@
+---
+title: Events
+page_title: Floating Action Button - Events
+description: Events of the Floating Action Button for Blazor.
+slug: fab-events
+tags: telerik,blazor,floating action button,events
+published: True
+position: 3
+---
+
+# Button Events
+
+This article explains the events available in the Telerik Floating Action Button for Blazor:
+
+* [OnClick](#onclick)
+
+## OnClick 
+
+The `OnClick` event fires when the user clicks or taps the button.
+
+It receives argument of type [MouseEventArgs](https://docs.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.web.mouseeventargs?view=aspnetcore-5.0).
+
+>caption Handle the button click
+
+````RAZOR
+<TelerikFloatingActionButton Id="floating-action-button"
+                             Icon="@((IsPopupVisible ? SvgIcon.Minus : SvgIcon.Plus))"
+                             VerticalAlign="@FloatingActionButtonVerticalAlign.Top"
+                             HorizontalAlign="@FloatingActionButtonHorizontalAlign.Center"
+                             OnClick="@TogglePopup" />
+
+<TelerikPopup @ref="@PopupRef"
+              AnchorSelector="#floating-action-button"
+              AnimationType="@AnimationType.SlideDown"
+              AnimationDuration="200">
+    <div class="k-d-flex k-flex-col k-gap-1.5 k-p-1.5 k-flex-wrap k-align-content-around">
+        <TelerikButton Icon="@SvgIcon.Download"
+                       Rounded="@ThemeConstants.Button.Rounded.Full"
+                       FillMode="@ThemeConstants.Button.FillMode.Flat"
+                       ThemeColor="@ThemeConstants.Button.ThemeColor.Info"
+                       Size="@ThemeConstants.Button.Size.Large"
+                       Title="Download" />
+        <TelerikButton Icon="@SvgIcon.Trash"
+                       Rounded="@ThemeConstants.Button.Rounded.Full"
+                       FillMode="@ThemeConstants.Button.FillMode.Flat"
+                       ThemeColor="@ThemeConstants.Button.ThemeColor.Error"
+                       Size="@ThemeConstants.Button.Size.Large"
+                       Title="Delete" />
+        <TelerikButton Icon="@SvgIcon.Upload"
+                       Rounded="@ThemeConstants.Button.Rounded.Full"
+                       FillMode="@ThemeConstants.Button.FillMode.Flat"
+                       ThemeColor="@ThemeConstants.Button.ThemeColor.Success"
+                       Size="@ThemeConstants.Button.Size.Large"
+                       Title="Upload" />
+    </div>
+</TelerikPopup>
+
+<style>
+    .k-popup {
+        border-radius: 23px;
+    }
+</style>
+
+@code {
+    private bool IsPopupVisible { get; set; }
+    private TelerikPopup? PopupRef { get; set; }
+
+    private void TogglePopup()
+    {
+        if (IsPopupVisible)
+        {
+            PopupRef?.Hide();
+        }
+        else
+        {
+            PopupRef?.Show();
+        }
+
+        IsPopupVisible = !IsPopupVisible;
+    }
+}
+````
@@ -0,0 +1,93 @@
+---
+title: Overview
+page_title: Floating Action Button Overview
+description: Discover the FloatingActionButton component for Blazor. Learn how to add the component to your app and explore its configuration options, such as positioning and alignment.
+slug: fab-overview
+tags: telerik,blazor,floating action button
+published: True
+position: 0
+---
+
+# Blazor Floating Action Button Overview
+
+The <a href="https://www.telerik.com/blazor-ui/floating-action-button" target="_blank">Blazor Floating Action Button</a> is a UI component that shows over the other page content and may not move during scrolling. The component can perform the most logical action expected from a user looking at a particular screen. You can configure the FloatingActionButton to display:
+
+* A single button with a single action
+* Additional related actions
+* Speed dial actions
+
+The Floating Action Button comes with built-in customization features that lets you fine-tune the [positioning and alignment](slug://fab-positions) of the component, customize its [appearance](slug://fab-appearance), use icons, and attach click [events](slug://fab-events).
+
+## Creating Blazor Floating Action Button
+
+1. Use the `<TelerikFloatingActionButton>` tag to add the component to your razor page.
+2. (optional) Customize the [appearance](slug://fab-appearance) of the Telerik Blazor Floating Action Button.
+
+>caption Basic Blazor Floating Action Button
+
+````RAZOR
+Current time: @Result
+<TelerikFloatingActionButton Size="@ThemeConstants.Button.Size.Large"
+                             VerticalAlign="@FloatingActionButtonVerticalAlign.Top"
+                             HorizontalAlign="@FloatingActionButtonHorizontalAlign.Center"
+                             ThemeColor="@ThemeConstants.Button.ThemeColor.Info"
+                             Icon="@SvgIcon.Clock"
+                             OnClick="@HandleClickEvent" />
+@code {
+    private string Result { get; set; } = DateTime.Now.ToString("HH:MM:ss:fff");
+
+    private void HandleClickEvent()
+    {
+        Result = DateTime.Now.ToString("HH:MM:ss:fff");
+    }
+}
+````
+
+## Position and Alignment
+
+You can control how the Floating Action Button is positioned relative to its associated container. Read more about the [Blazor Floating Action Button positioning...](slug://fab-positions)
+
+## Events
+
+The Blazor Floating Action Button fires events that you can handle and respond to user actions. [Read more about the Blazor Floating Action Button events...](slug://fab-events).
+
+## Floating Action Button Parameters
+
+The Blazor Floating Action Button provides various parameters that allow you to configure the component. Also check the [Floating Action Button public API](slug:Telerik.Blazor.Components.TelerikFloatingActionButton).
+
+@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
+
+| Parameter | Type and Default&nbsp;Value | Description |
+| --- | --- | --- |
+| `Enabled` | `bool` <br /> (`true`) | Whether the Floating Action Button is enabled. |
+| `Id` | `string` | The `id` attribute of the Floating Action Button. |
+| `Icon` | `object` | The icon rendered in the Floating Action Button. Can be set to a predefined Telerik icon or a custom one. | 
+| `Title` | `string` | The `title` attribute of the Floating Action Button. |
+| `PositionMode` | `FloatingActionButtonPositionMode` enum <br /> (`Fixed`) | The position of the Floating Action Button relative to the container. |
+| `HorizontalAlign` | `FloatingActionButtonHorizontalAlign` <br /> (`End`) | Determines if the left or the right side of the Floating Action Button will touch its parent container. [Read more about Floating Action Button positioning.](slug://fab-positions) |
+| `VerticalAlign` | `FloatingActionButtonVerticalAlign` <br /> (`Bottom`) | Determines if the Floating Action Button will touch the parent container with its top or bottom side. |
+| `HorizontalOffset` | `string` <br /> (`16px`) | The horizontal offset value added to the button position, creating a blank space between the button and the parent. |
+| `VerticalOffset` | `string` <br /> (`16px`) | The vertical offset value added to the button position, creating a blank space between the button and the parent. |
+
+### Styling and Appearance
+
+The following parameters enable you to customize the appearance of the Blazor Floating Action Button:
+
+| Parameter | Type | Description |
+| --- | --- | --- |
+| `Class` | `string` | Defines the custom CSS class rendered on `<button class="k-fab">`, which is the main wrapping element of the Floating Action Button component. Use it for [styling customizations](slug://themes-override). |
+| `Rounded` | `string` <br /> `"full"` | Defines how rounded the borders of the Floating Action Button are. Use predefined value constants from the static class `Telerik.Blazor.ThemeConstants.Button.Rounded`. |
+| `Size` | `string` <br /> (`"md"`) | Sets the size of the Floating Action Button. Set it to a predefined value constant from the static class `Telerik.Blazor.ThemeConstants.Button.Size`. |
+| `ThemeColor` | `string` <br /> (`"primary"`) | Adjusts the background color of the Floating Action Button. Use predefined values from the static class `Telerik.Blazor.ThemeConstants.Button.ThemeColor`. |
+
+
+## Next Steps
+
+* [Explore the Floating Action Button Positioning and Alignment Settings](slug://fab-positions)
+* [Customize the Floating Action Button Appearance](slug://fab-appearance)
+
+## See Also
+
+* [Live Demo: Floating Action Button](https://demos.telerik.com/blazor-ui/floatingactionbutton/overview)
+* [Floating Action Button Events](slug://fab-events)
+* [Floating Action Button API Reference](/blazor-ui/api/Telerik.Blazor.Components.TelerikFloatingActionButton)