From 867d4475e111dda20167be9e0d7e42cba319fd50 Mon Sep 17 00:00:00 2001
From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com>
Date: Tue, 21 Jan 2025 16:44:04 +0200
Subject: [PATCH 01/28] docs(FloatingActionButton): add overview article
---
components/floatingactionbutton/overview.md | 77 +++++++++++++++++++++
1 file changed, 77 insertions(+)
create mode 100644 components/floatingactionbutton/overview.md
diff --git a/components/floatingactionbutton/overview.md b/components/floatingactionbutton/overview.md
new file mode 100644
index 0000000000..c182376873
--- /dev/null
+++ b/components/floatingactionbutton/overview.md
@@ -0,0 +1,77 @@
+---
+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 Blazor Floating Action Button is a UI component that is tied to the most logical action that we expect from a user looking at a particular screen. It floats in the application above other items, and its main action directly corresponds to the content on the screen. Apart from being a single button with a single action, the FloatingActionButton can also be configured to display additional related actions or speed dial actions.
+
+The Floating Action Button comes with built-in customization features that allow the developer to 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 tag to ad 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 configuration
+
+````RAZOR
+
+````
+
+## 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](/blazor-ui/api/Telerik.Blazor.Components.TelerikFloatingActionButton).
+
+@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
+
+| Parameter | Type and Default Value | Description |
+|----------|----------|----------|
+| `Enabled` | `bool` (`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 ` (`Fixed`) | The position of the Floating Action Button relative to the container. |
+| `HorizontalAlign` | `FloatingActionButtonHorizontalAlign` (`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` (`Bottom`) | Determines if the Floating Action Button will touch the parent container with its top or bottom side. |
+| `HorizontalOffset` | `string` (`16px`) | The horizontal offset value added to the button position, creating a blank space between the button and the parent. |
+| `VerticalOffset` | `string` (`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 `
` CSS class rendered on the main wrapping element of the Floating Action Button component. Use it for [styling customizations](slug://themes-override). |
+| `Rounded` | `Telerik.Blazor.ThemeConstants.Badge.Rounded.Full` | Defines how rounded the borders of the Floating Action Button are. |
+| `Size` | `Telerik.Blazor.ThemeConstants.Badge.Size.Medium` | Sets the size of the Floating Action Button. |
+| `ThemeColor` | `Telerik.Blazor.ThemeConstants.Badge.ThemeColor.Primary` | Adjusts the background color of the Floating Action Button. |
+
+
+## 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)
\ No newline at end of file
From 7332125d9b2b1f0173639e32c62da9992bce6b56 Mon Sep 17 00:00:00 2001
From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com>
Date: Tue, 21 Jan 2025 16:44:35 +0200
Subject: [PATCH 02/28] docs(FloatingActionButton): add appearance article
---
components/floatingactionbutton/appearance.md | 125 ++++++++++++++++++
1 file changed, 125 insertions(+)
create mode 100644 components/floatingactionbutton/appearance.md
diff --git a/components/floatingactionbutton/appearance.md b/components/floatingactionbutton/appearance.md
new file mode 100644
index 0000000000..e9758ef733
--- /dev/null
+++ b/components/floatingactionbutton/appearance.md
@@ -0,0 +1,125 @@
+---
+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` (default) |`base`|
+|`Primary`|`primary`|
+|`Secondary`|`secondary`|
+|`Tertiary`|`tertiary`|
+|`Info`|`info`|
+|`Success`|`success`|
+|`Warning`|`warning`|
+|`Error`|`error`|
+|`Dark`|`dark`|
+|`Light`|`light`|
+|`Inverse`|`inverse`|
+
+## Example
+
+````RAZOR
+
+
+
+
+
+
+
+
+@code {
+ private string ThemeColor { get; set; } = ThemeConstants.Badge.ThemeColor.Primary;
+ private List ThemeColors { get; set; } = new List()
+ {
+ "base",
+ "primary",
+ "secondary",
+ "tertiary",
+ "info",
+ "success",
+ "warning",
+ "error",
+ "dark",
+ "light",
+ "inverse"
+ };
+
+ private string Rounded { get; set; } = ThemeConstants.Badge.Rounded.Full;
+ private List RoundedValues { get; set; } = new List()
+ {
+ "sm",
+ "md",
+ "lg",
+ "full"
+ };
+
+ private string Size { get; set; } = ThemeConstants.Badge.Size.Medium;
+ private List Sizes { get; set; } = new List()
+ {
+ "sm",
+ "md",
+ "lg"
+ };
+}
+````
\ No newline at end of file
From 07f06dd0c106d8c79072da5903e8ed5f51ac7bd7 Mon Sep 17 00:00:00 2001
From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com>
Date: Tue, 21 Jan 2025 16:44:58 +0200
Subject: [PATCH 03/28] docs(FloatingActionButton): add position article
---
components/floatingactionbutton/positions.md | 92 ++++++++++++++++++++
1 file changed, 92 insertions(+)
create mode 100644 components/floatingactionbutton/positions.md
diff --git a/components/floatingactionbutton/positions.md b/components/floatingactionbutton/positions.md
new file mode 100644
index 0000000000..28a081e55d
--- /dev/null
+++ b/components/floatingactionbutton/positions.md
@@ -0,0 +1,92 @@
+---
+title: Position
+page_title: Floating Action Button Position
+description: Explore the position and alignment settings of the Floating Action Button for Blazor.
+slug: fab-positions
+tags: telerik,blazor,floating action button,position,align,alignment
+published: True
+position: 2
+---
+
+# Position Settings
+
+You can position and align the Blazor Floating Action Button component relative to its parent container by using the available parameters. The example at the bottom of the page lets you experiment with the available parameters.
+
+## Position
+
+The `PositionMode` parameter accepts a member of the FloatingActionButtonPositionMode enum and controls the CSS position of the FloatingActionButton:
+
+@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
+
+| Enum member | Description |
+|---------------|--------|
+| `Fixed` (default) | Positions the button relative to the viewport. |
+| `Absolute` | Positions the button relative to the nearest positioned ancestor. |
+
+## Alignment
+
+Use the available alignment parameters to control which side of the Floating Action Button touches the parent element:
+
+@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
+
+| Parameter | Type | Enum Members |
+| ----------- | ----------- | ----------- |
+| `HorizontalAlign` | `FloatingActionButtonHorizontalAlign` | `End` (default) `Start` `Center` |
+| `VerticalAlign` | `FloatingActionButtonVerticalAlign` | `Bottom` (default) `Middle` `Top` |
+
+## Example
+
+````RAZOR
+
+
+
+
+
+
+
+
+
+@code {
+ private FloatingActionButtonHorizontalAlign HorizontalAlign { get; set; } = FloatingActionButtonHorizontalAlign.Start;
+ private List HorizontalAligns { get; set; } = new List()
+ {
+ FloatingActionButtonHorizontalAlign.Start,
+ FloatingActionButtonHorizontalAlign.Center,
+ FloatingActionButtonHorizontalAlign.End
+ };
+
+ private FloatingActionButtonVerticalAlign VerticalAlign { get; set; } = FloatingActionButtonVerticalAlign.Top;
+ private List VerticalAligns { get; set; } = new List()
+ {
+ FloatingActionButtonVerticalAlign.Top,
+ FloatingActionButtonVerticalAlign.Middle,
+ FloatingActionButtonVerticalAlign.Bottom
+ };
+}
+````
From b1d83373112068d1798ce0d6f86d20112b81369e Mon Sep 17 00:00:00 2001
From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com>
Date: Tue, 21 Jan 2025 16:45:22 +0200
Subject: [PATCH 04/28] docs(FloatingActionButton): add event article
---
components/floatingactionbutton/events.md | 82 +++++++++++++++++++++++
1 file changed, 82 insertions(+)
create mode 100644 components/floatingactionbutton/events.md
diff --git a/components/floatingactionbutton/events.md b/components/floatingactionbutton/events.md
new file mode 100644
index 0000000000..d985aa2112
--- /dev/null
+++ b/components/floatingactionbutton/events.md
@@ -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
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ private bool IsPopupVisible { get; set; }
+ private TelerikPopup? PopupRef { get; set; }
+
+ private void TogglePopup()
+ {
+ if (IsPopupVisible)
+ {
+ PopupRef?.Hide();
+ }
+ else
+ {
+ PopupRef?.Show();
+ }
+
+ IsPopupVisible = !IsPopupVisible;
+ }
+}
+````
From 02059c65d2deea661330254ef38a971fcb138e6f Mon Sep 17 00:00:00 2001
From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com>
Date: Tue, 21 Jan 2025 16:46:10 +0200
Subject: [PATCH 05/28] docs(FloatingActionButton): add floating action button
to config file
---
_config.yml | 3 +++
1 file changed, 3 insertions(+)
diff --git a/_config.yml b/_config.yml
index ed63f9d0e1..e95aa34cee 100644
--- a/_config.yml
+++ b/_config.yml
@@ -377,6 +377,8 @@ navigation:
title: "Form"
"*flatcolorpicker":
title: "FlatColorPicker"
+ "*/floatingactionbutton":
+ title: "Floating Action Button"
"*floatinglabel":
title: "FloatingLabel"
"*gantt":
@@ -534,6 +536,7 @@ intro_columns:
"Toggle Button": "togglebutton-overview"
"Drawer": "drawer-overview"
"DropDownButton": "dropdownbutton-overview"
+ "Floating Action Button": "fab-overview"
"Menu": "components/menu/overview"
"Context Menu": "contextmenu-overview"
"PanelBar": "panelbar-overview"
From 0b68033cc3acb8462f8cefbb2a16e120759af355 Mon Sep 17 00:00:00 2001
From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com>
Date: Wed, 22 Jan 2025 16:42:02 +0200
Subject: [PATCH 06/28] Update components/floatingactionbutton/overview.md
Co-authored-by: Iva Stefanova Koevska-Atanasova
---
components/floatingactionbutton/overview.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/components/floatingactionbutton/overview.md b/components/floatingactionbutton/overview.md
index c182376873..492b606ed0 100644
--- a/components/floatingactionbutton/overview.md
+++ b/components/floatingactionbutton/overview.md
@@ -10,7 +10,7 @@ position: 0
# Blazor Floating Action Button Overview
-The Blazor Floating Action Button is a UI component that is tied to the most logical action that we expect from a user looking at a particular screen. It floats in the application above other items, and its main action directly corresponds to the content on the screen. Apart from being a single button with a single action, the FloatingActionButton can also be configured to display additional related actions or speed dial actions.
+The Blazor Floating Action Button is a UI component that is tied to the most logical action expected from a user looking at a particular screen. It floats in the application above other items, and its main action directly corresponds to the content on the screen. You can configure the FloatingActionButton to be a single button with a single action, to display additional related actions, or to provide speed dial actions.
The Floating Action Button comes with built-in customization features that allow the developer to 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).
From 484dbda4c152a3dc3c2200927749cb4dacf15b34 Mon Sep 17 00:00:00 2001
From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com>
Date: Wed, 22 Jan 2025 16:42:48 +0200
Subject: [PATCH 07/28] Update components/floatingactionbutton/overview.md
Co-authored-by: Iva Stefanova Koevska-Atanasova
---
components/floatingactionbutton/overview.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/components/floatingactionbutton/overview.md b/components/floatingactionbutton/overview.md
index 492b606ed0..a61f761c9c 100644
--- a/components/floatingactionbutton/overview.md
+++ b/components/floatingactionbutton/overview.md
@@ -12,7 +12,7 @@ position: 0
The Blazor Floating Action Button is a UI component that is tied to the most logical action expected from a user looking at a particular screen. It floats in the application above other items, and its main action directly corresponds to the content on the screen. You can configure the FloatingActionButton to be a single button with a single action, to display additional related actions, or to provide speed dial actions.
-The Floating Action Button comes with built-in customization features that allow the developer to 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).
+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
From c4117d22960209633e95a02b6244553916b837d5 Mon Sep 17 00:00:00 2001
From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com>
Date: Wed, 22 Jan 2025 16:42:56 +0200
Subject: [PATCH 08/28] Update components/floatingactionbutton/overview.md
Co-authored-by: Iva Stefanova Koevska-Atanasova
---
components/floatingactionbutton/overview.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/components/floatingactionbutton/overview.md b/components/floatingactionbutton/overview.md
index a61f761c9c..915d4a1a16 100644
--- a/components/floatingactionbutton/overview.md
+++ b/components/floatingactionbutton/overview.md
@@ -16,7 +16,7 @@ The Floating Action Button comes with built-in customization features that lets
## Creating Blazor Floating Action Button
-1. Use the tag to ad the component to your razor page.
+1. Use the 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 configuration
From 50170a1fd72d95afd0a7d3325a6e1edc25949c00 Mon Sep 17 00:00:00 2001
From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com>
Date: Wed, 22 Jan 2025 16:43:38 +0200
Subject: [PATCH 09/28] Update components/floatingactionbutton/appearance.md
Co-authored-by: Iva Stefanova Koevska-Atanasova
---
components/floatingactionbutton/appearance.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/components/floatingactionbutton/appearance.md b/components/floatingactionbutton/appearance.md
index e9758ef733..1bd6fe0169 100644
--- a/components/floatingactionbutton/appearance.md
+++ b/components/floatingactionbutton/appearance.md
@@ -21,7 +21,7 @@ The `Rounded` parameter applies the `border-radius` CSS rule to the button to ac
|`Small` |`sm`|
|`Medium`|`md`|
|`Large`|`lg`|
-|`Full`|`full`(default)|
+|`Full`|`full` (default)|
## Size
From 475111250bcfcd8770a808a3c98e56cc27e1c9ff Mon Sep 17 00:00:00 2001
From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com>
Date: Wed, 22 Jan 2025 16:43:48 +0200
Subject: [PATCH 10/28] Update components/floatingactionbutton/appearance.md
Co-authored-by: Iva Stefanova Koevska-Atanasova
---
components/floatingactionbutton/appearance.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/components/floatingactionbutton/appearance.md b/components/floatingactionbutton/appearance.md
index 1bd6fe0169..e723c99dec 100644
--- a/components/floatingactionbutton/appearance.md
+++ b/components/floatingactionbutton/appearance.md
@@ -30,7 +30,7 @@ You can increase or decrease the size of the button by setting the `Size` parame
| Class members | Manual declarations |
|---------------|--------|
| `Small` |`sm`|
-| `Medium` |`md`(default)|
+| `Medium` |`md` (default)|
| `Large` |`lg`|
## ThemeColor
From 455fef01c4631bcf047126c76ecc8a74ff3b7f58 Mon Sep 17 00:00:00 2001
From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com>
Date: Wed, 22 Jan 2025 16:44:24 +0200
Subject: [PATCH 11/28] Update components/floatingactionbutton/positions.md
Co-authored-by: Iva Stefanova Koevska-Atanasova
---
components/floatingactionbutton/positions.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/components/floatingactionbutton/positions.md b/components/floatingactionbutton/positions.md
index 28a081e55d..3ee67e4694 100644
--- a/components/floatingactionbutton/positions.md
+++ b/components/floatingactionbutton/positions.md
@@ -14,7 +14,7 @@ You can position and align the Blazor Floating Action Button component relative
## Position
-The `PositionMode` parameter accepts a member of the FloatingActionButtonPositionMode enum and controls the CSS position of the FloatingActionButton:
+The `PositionMode` parameter accepts a member of the `FloatingActionButtonPositionMode` enum and controls the CSS position of the Floating Action Button:
@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
From 1dda3d90c19d29e97ebb0588e586c9472e74bb4a Mon Sep 17 00:00:00 2001
From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com>
Date: Wed, 22 Jan 2025 17:14:54 +0200
Subject: [PATCH 12/28] rename file and add see also sections
---
_config.yml | 2 +-
components/floatingactionbutton/appearance.md | 6 +++++-
.../{positions.md => position-and-alignment.md} | 4 ++++
3 files changed, 10 insertions(+), 2 deletions(-)
rename components/floatingactionbutton/{positions.md => position-and-alignment.md} (96%)
diff --git a/_config.yml b/_config.yml
index e95aa34cee..d8e04d1839 100644
--- a/_config.yml
+++ b/_config.yml
@@ -377,7 +377,7 @@ navigation:
title: "Form"
"*flatcolorpicker":
title: "FlatColorPicker"
- "*/floatingactionbutton":
+ "*floatingactionbutton":
title: "Floating Action Button"
"*floatinglabel":
title: "FloatingLabel"
diff --git a/components/floatingactionbutton/appearance.md b/components/floatingactionbutton/appearance.md
index e723c99dec..d1fb6dc8cc 100644
--- a/components/floatingactionbutton/appearance.md
+++ b/components/floatingactionbutton/appearance.md
@@ -122,4 +122,8 @@ The color of the button is controlled through the `ThemeColor` parameter. You ca
"lg"
};
}
-````
\ No newline at end of file
+````
+
+## See Also
+
+* [Appearance - Design System Docs](https://www.telerik.com/design-system/docs/components/floatingactionbutton/#appearance)
\ No newline at end of file
diff --git a/components/floatingactionbutton/positions.md b/components/floatingactionbutton/position-and-alignment.md
similarity index 96%
rename from components/floatingactionbutton/positions.md
rename to components/floatingactionbutton/position-and-alignment.md
index 3ee67e4694..a41e818fe9 100644
--- a/components/floatingactionbutton/positions.md
+++ b/components/floatingactionbutton/position-and-alignment.md
@@ -90,3 +90,7 @@ Use the available alignment parameters to control which side of the Floating Act
};
}
````
+
+## See Also
+
+* [Positioning - Design System Docs](https://www.telerik.com/design-system/docs/components/floatingactionbutton/#positioning)
\ No newline at end of file
From 08e526645af36fdfbb78a6d285444398ba220a0e Mon Sep 17 00:00:00 2001
From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com>
Date: Wed, 22 Jan 2025 17:43:18 +0200
Subject: [PATCH 13/28] chore(docs): add a11y spec
---
src-a11y/configs/floatingactionbutton.yml | 11 +++++++++++
1 file changed, 11 insertions(+)
create mode 100644 src-a11y/configs/floatingactionbutton.yml
diff --git a/src-a11y/configs/floatingactionbutton.yml b/src-a11y/configs/floatingactionbutton.yml
new file mode 100644
index 0000000000..451eb7ee38
--- /dev/null
+++ b/src-a11y/configs/floatingactionbutton.yml
@@ -0,0 +1,11 @@
+title: Wai-Aria Support
+component: Floating Action Button
+from: /aria/floatingactionbutton_aria.md
+dest: ../components/floatingactionbutton/accessibility/wai-aria-support.md
+slug: fab-accessibility
+position: 5
+after: |
+ ## Keyboard Navigation
+ For details on how the keyboard navigation works in Telerik UI for Blazor, refer to the [Accessibility Overview](slug://accessibility-overview#keyboard-navigation) article.
+ ## See Also
+ * [Accessibility in Telerik UI for Blazor]({%slug accessibility-overview%})
\ No newline at end of file
From ea261072b9fc7001cbec0596a7ea69edae0d13e0 Mon Sep 17 00:00:00 2001
From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com>
Date: Mon, 27 Jan 2025 11:37:14 +0200
Subject: [PATCH 14/28] chore: revert changes in config.yml file
---
_config.yml | 3 ---
1 file changed, 3 deletions(-)
diff --git a/_config.yml b/_config.yml
index d8e04d1839..ed63f9d0e1 100644
--- a/_config.yml
+++ b/_config.yml
@@ -377,8 +377,6 @@ navigation:
title: "Form"
"*flatcolorpicker":
title: "FlatColorPicker"
- "*floatingactionbutton":
- title: "Floating Action Button"
"*floatinglabel":
title: "FloatingLabel"
"*gantt":
@@ -536,7 +534,6 @@ intro_columns:
"Toggle Button": "togglebutton-overview"
"Drawer": "drawer-overview"
"DropDownButton": "dropdownbutton-overview"
- "Floating Action Button": "fab-overview"
"Menu": "components/menu/overview"
"Context Menu": "contextmenu-overview"
"PanelBar": "panelbar-overview"
From d93e357ab87ebffab0d7ebcd2202a6a88b8669b7 Mon Sep 17 00:00:00 2001
From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com>
Date: Mon, 27 Jan 2025 11:38:06 +0200
Subject: [PATCH 15/28] docs(FloatingActionButton): add component to side
navigation
---
docs-builder.yml | 2 ++
1 file changed, 2 insertions(+)
diff --git a/docs-builder.yml b/docs-builder.yml
index ad0b3148a0..d9947fdbdf 100644
--- a/docs-builder.yml
+++ b/docs-builder.yml
@@ -149,6 +149,8 @@ meta:
title: Gauges
"*gantt":
title: Gantt
+ "*floatingactionbutton":
+ title: Floating Action Button
"*floatinglabel":
title: FloatingLabel
"*flatcolorpicker":
From 0c2c1db4fc91fd73db3c699ab7aef5c6d16c0dde Mon Sep 17 00:00:00 2001
From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com>
Date: Mon, 27 Jan 2025 11:38:51 +0200
Subject: [PATCH 16/28] docs(common): add component to introduction page
---
introduction.md | 1 +
1 file changed, 1 insertion(+)
diff --git a/introduction.md b/introduction.md
index bd8eec326d..9c7378173c 100644
--- a/introduction.md
+++ b/introduction.md
@@ -78,6 +78,7 @@ You can watch a YouTube playlist of getting started tutorials for Blazor (videos
+
From 21a6a2503014365b47493f760303e07916e22f49 Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Mon, 27 Jan 2025 11:42:47 +0200
Subject: [PATCH 17/28] Update src-a11y/configs/floatingactionbutton.yml
---
src-a11y/configs/floatingactionbutton.yml | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src-a11y/configs/floatingactionbutton.yml b/src-a11y/configs/floatingactionbutton.yml
index 451eb7ee38..798caac2a2 100644
--- a/src-a11y/configs/floatingactionbutton.yml
+++ b/src-a11y/configs/floatingactionbutton.yml
@@ -2,7 +2,7 @@ title: Wai-Aria Support
component: Floating Action Button
from: /aria/floatingactionbutton_aria.md
dest: ../components/floatingactionbutton/accessibility/wai-aria-support.md
-slug: fab-accessibility
+slug: floatingactionbutton-wai-aria-support
position: 5
after: |
## Keyboard Navigation
From fe55232c8cab24c6b72c700b83395803c72ead90 Mon Sep 17 00:00:00 2001
From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com>
Date: Wed, 29 Jan 2025 13:59:45 +0200
Subject: [PATCH 18/28] chore(docs): remove fab accessibility yml file
---
src-a11y/configs/floatingactionbutton.yml | 11 -----------
1 file changed, 11 deletions(-)
delete mode 100644 src-a11y/configs/floatingactionbutton.yml
diff --git a/src-a11y/configs/floatingactionbutton.yml b/src-a11y/configs/floatingactionbutton.yml
deleted file mode 100644
index 798caac2a2..0000000000
--- a/src-a11y/configs/floatingactionbutton.yml
+++ /dev/null
@@ -1,11 +0,0 @@
-title: Wai-Aria Support
-component: Floating Action Button
-from: /aria/floatingactionbutton_aria.md
-dest: ../components/floatingactionbutton/accessibility/wai-aria-support.md
-slug: floatingactionbutton-wai-aria-support
-position: 5
-after: |
- ## Keyboard Navigation
- For details on how the keyboard navigation works in Telerik UI for Blazor, refer to the [Accessibility Overview](slug://accessibility-overview#keyboard-navigation) article.
- ## See Also
- * [Accessibility in Telerik UI for Blazor]({%slug accessibility-overview%})
\ No newline at end of file
From cba14ab11a7f11d9b84fe4348509604e91f24219 Mon Sep 17 00:00:00 2001
From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com>
Date: Thu, 30 Jan 2025 15:29:34 +0200
Subject: [PATCH 19/28] Update components/floatingactionbutton/overview.md
Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>
---
components/floatingactionbutton/overview.md | 6 +++++-
1 file changed, 5 insertions(+), 1 deletion(-)
diff --git a/components/floatingactionbutton/overview.md b/components/floatingactionbutton/overview.md
index 915d4a1a16..64b5a66014 100644
--- a/components/floatingactionbutton/overview.md
+++ b/components/floatingactionbutton/overview.md
@@ -10,7 +10,11 @@ position: 0
# Blazor Floating Action Button Overview
-The Blazor Floating Action Button is a UI component that is tied to the most logical action expected from a user looking at a particular screen. It floats in the application above other items, and its main action directly corresponds to the content on the screen. You can configure the FloatingActionButton to be a single button with a single action, to display additional related actions, or to provide speed dial actions.
+The Blazor Floating Action Button 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).
From c3ff82958b85e17a8134ee2cb8bcf917191cc1f8 Mon Sep 17 00:00:00 2001
From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com>
Date: Thu, 30 Jan 2025 15:30:06 +0200
Subject: [PATCH 20/28] Update components/floatingactionbutton/overview.md
Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>
---
components/floatingactionbutton/overview.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/components/floatingactionbutton/overview.md b/components/floatingactionbutton/overview.md
index 64b5a66014..3cc04475ca 100644
--- a/components/floatingactionbutton/overview.md
+++ b/components/floatingactionbutton/overview.md
@@ -20,7 +20,7 @@ The Floating Action Button comes with built-in customization features that lets
## Creating Blazor Floating Action Button
-1. Use the tag to add the component to your razor page.
+1. Use the `` 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 configuration
From 7de0325e34ee74e2c9d0715c27e7b1ca6c76dc1b Mon Sep 17 00:00:00 2001
From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com>
Date: Thu, 30 Jan 2025 15:31:31 +0200
Subject: [PATCH 21/28] Update components/floatingactionbutton/overview.md
Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>
---
components/floatingactionbutton/overview.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/components/floatingactionbutton/overview.md b/components/floatingactionbutton/overview.md
index 3cc04475ca..186ac07667 100644
--- a/components/floatingactionbutton/overview.md
+++ b/components/floatingactionbutton/overview.md
@@ -23,7 +23,7 @@ The Floating Action Button comes with built-in customization features that lets
1. Use the `` 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 configuration
+>caption Basic Blazor Floating Action Button
````RAZOR
Date: Thu, 30 Jan 2025 15:31:42 +0200
Subject: [PATCH 22/28] Update components/floatingactionbutton/overview.md
Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>
---
components/floatingactionbutton/overview.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/components/floatingactionbutton/overview.md b/components/floatingactionbutton/overview.md
index 186ac07667..b8fff6bc18 100644
--- a/components/floatingactionbutton/overview.md
+++ b/components/floatingactionbutton/overview.md
@@ -41,7 +41,7 @@ The Blazor Floating Action Button fires events that you can handle and respond t
## 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](/blazor-ui/api/Telerik.Blazor.Components.TelerikFloatingActionButton).
+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)
From 7fa71e19aef17385e5e9d1c38705be56c902c831 Mon Sep 17 00:00:00 2001
From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com>
Date: Thu, 30 Jan 2025 15:31:55 +0200
Subject: [PATCH 23/28] Update components/floatingactionbutton/overview.md
Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>
---
components/floatingactionbutton/overview.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/components/floatingactionbutton/overview.md b/components/floatingactionbutton/overview.md
index b8fff6bc18..ae858693ec 100644
--- a/components/floatingactionbutton/overview.md
+++ b/components/floatingactionbutton/overview.md
@@ -45,7 +45,7 @@ The Blazor Floating Action Button provides various parameters that allow you to
@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
-| Parameter | Type and Default Value | Description |
+| Parameter | Type and Default Value | Description |
|----------|----------|----------|
| `Enabled` | `bool` (`true`) | Whether the Floating Action Button is enabled. |
| `Id` | `string` | The `id` attribute of the Floating Action Button. |
From 60d999db681e38643bbd8b1c80b8c5f66d5175a4 Mon Sep 17 00:00:00 2001
From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com>
Date: Thu, 30 Jan 2025 15:32:17 +0200
Subject: [PATCH 24/28] Update components/floatingactionbutton/overview.md
Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>
---
components/floatingactionbutton/overview.md | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/components/floatingactionbutton/overview.md b/components/floatingactionbutton/overview.md
index ae858693ec..db1b56d2d9 100644
--- a/components/floatingactionbutton/overview.md
+++ b/components/floatingactionbutton/overview.md
@@ -46,8 +46,8 @@ The Blazor Floating Action Button provides various parameters that allow you to
@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
| Parameter | Type and Default Value | Description |
-|----------|----------|----------|
-| `Enabled` | `bool` (`true`) | Whether the Floating Action Button is enabled. |
+| --- | --- | --- |
+| `Enabled` | `bool` (`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. |
From 3eb0dd881980319691049c478e95c1b64a86691e Mon Sep 17 00:00:00 2001
From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com>
Date: Thu, 30 Jan 2025 15:32:38 +0200
Subject: [PATCH 25/28] Update components/floatingactionbutton/overview.md
Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>
---
components/floatingactionbutton/overview.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/components/floatingactionbutton/overview.md b/components/floatingactionbutton/overview.md
index db1b56d2d9..4f4cb9ec33 100644
--- a/components/floatingactionbutton/overview.md
+++ b/components/floatingactionbutton/overview.md
@@ -51,7 +51,7 @@ The Blazor Floating Action Button provides various parameters that allow you to
| `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 ` (`Fixed`) | The position of the Floating Action Button relative to the container. |
+| `PositionMode` | `FloatingActionButtonPositionMode` enum (`Fixed`) | The position of the Floating Action Button relative to the container. |
| `HorizontalAlign` | `FloatingActionButtonHorizontalAlign` (`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` (`Bottom`) | Determines if the Floating Action Button will touch the parent container with its top or bottom side. |
| `HorizontalOffset` | `string` (`16px`) | The horizontal offset value added to the button position, creating a blank space between the button and the parent. |
From f6dbd4b26e17e54f832a58405a773a1f5a2b2dac Mon Sep 17 00:00:00 2001
From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com>
Date: Thu, 30 Jan 2025 15:32:56 +0200
Subject: [PATCH 26/28] Update
components/floatingactionbutton/position-and-alignment.md
Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>
---
components/floatingactionbutton/position-and-alignment.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/components/floatingactionbutton/position-and-alignment.md b/components/floatingactionbutton/position-and-alignment.md
index a41e818fe9..7766a10106 100644
--- a/components/floatingactionbutton/position-and-alignment.md
+++ b/components/floatingactionbutton/position-and-alignment.md
@@ -12,7 +12,7 @@ position: 2
You can position and align the Blazor Floating Action Button component relative to its parent container by using the available parameters. The example at the bottom of the page lets you experiment with the available parameters.
-## Position
+## Position Mode
The `PositionMode` parameter accepts a member of the `FloatingActionButtonPositionMode` enum and controls the CSS position of the Floating Action Button:
From 9159c1b04d97dfb7aefd1f06b25fc76e377e6a98 Mon Sep 17 00:00:00 2001
From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com>
Date: Thu, 30 Jan 2025 15:33:13 +0200
Subject: [PATCH 27/28] Update
components/floatingactionbutton/position-and-alignment.md
Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>
---
components/floatingactionbutton/position-and-alignment.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/components/floatingactionbutton/position-and-alignment.md b/components/floatingactionbutton/position-and-alignment.md
index 7766a10106..d10f31976b 100644
--- a/components/floatingactionbutton/position-and-alignment.md
+++ b/components/floatingactionbutton/position-and-alignment.md
@@ -8,7 +8,7 @@ published: True
position: 2
---
-# Position Settings
+# Position and Alignment
You can position and align the Blazor Floating Action Button component relative to its parent container by using the available parameters. The example at the bottom of the page lets you experiment with the available parameters.
From ff22176a91629481c80ce6ecafa2360cd72401b7 Mon Sep 17 00:00:00 2001
From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com>
Date: Thu, 30 Jan 2025 16:27:34 +0200
Subject: [PATCH 28/28] docs(FloatingActionButton): polish examples and apply
suggestions
---
components/floatingactionbutton/appearance.md | 42 +++++++++----------
components/floatingactionbutton/overview.md | 24 ++++++++---
.../position-and-alignment.md | 16 +++----
3 files changed, 45 insertions(+), 37 deletions(-)
diff --git a/components/floatingactionbutton/appearance.md b/components/floatingactionbutton/appearance.md
index d1fb6dc8cc..ae0bfe76d3 100644
--- a/components/floatingactionbutton/appearance.md
+++ b/components/floatingactionbutton/appearance.md
@@ -89,37 +89,37 @@ The color of the button is controlled through the `ThemeColor` parameter. You ca
Icon="SvgIcon.Play" />
@code {
- private string ThemeColor { get; set; } = ThemeConstants.Badge.ThemeColor.Primary;
+ private string ThemeColor { get; set; } = ThemeConstants.Button.ThemeColor.Primary;
private List ThemeColors { get; set; } = new List()
{
- "base",
- "primary",
- "secondary",
- "tertiary",
- "info",
- "success",
- "warning",
- "error",
- "dark",
- "light",
- "inverse"
+ 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.Badge.Rounded.Full;
+ private string Rounded { get; set; } = ThemeConstants.Button.Rounded.Full;
private List RoundedValues { get; set; } = new List()
{
- "sm",
- "md",
- "lg",
- "full"
+ ThemeConstants.Button.Rounded.Small,
+ ThemeConstants.Button.Rounded.Medium,
+ ThemeConstants.Button.Rounded.Large,
+ ThemeConstants.Button.Rounded.Full
};
- private string Size { get; set; } = ThemeConstants.Badge.Size.Medium;
+ private string Size { get; set; } = ThemeConstants.Button.Size.Medium;
private List Sizes { get; set; } = new List()
{
- "sm",
- "md",
- "lg"
+ ThemeConstants.Button.Size.Small,
+ ThemeConstants.Button.Size.Medium,
+ ThemeConstants.Button.Size.Large
};
}
````
diff --git a/components/floatingactionbutton/overview.md b/components/floatingactionbutton/overview.md
index 4f4cb9ec33..4d4d909c6f 100644
--- a/components/floatingactionbutton/overview.md
+++ b/components/floatingactionbutton/overview.md
@@ -26,9 +26,21 @@ The Floating Action Button comes with built-in customization features that lets
>caption Basic Blazor Floating Action Button
````RAZOR
+Current time: @Result
+ 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
@@ -63,10 +75,10 @@ The following parameters enable you to customize the appearance of the Blazor Fl
| Parameter | Type | Description |
| --- | --- | --- |
-| `Class` | `string` | Defines the `
` CSS class rendered on the main wrapping element of the Floating Action Button component. Use it for [styling customizations](slug://themes-override). |
-| `Rounded` | `Telerik.Blazor.ThemeConstants.Badge.Rounded.Full` | Defines how rounded the borders of the Floating Action Button are. |
-| `Size` | `Telerik.Blazor.ThemeConstants.Badge.Size.Medium` | Sets the size of the Floating Action Button. |
-| `ThemeColor` | `Telerik.Blazor.ThemeConstants.Badge.ThemeColor.Primary` | Adjusts the background color of the Floating Action Button. |
+| `Class` | `string` | Defines the custom CSS class rendered on `