Skip to content

Commit 7ba2f9d

Browse files
Tsvetomir-Hrikoevskadimodi
authored
Docs Floating Action Button (#2715)
* docs(FloatingActionButton): add overview article * docs(FloatingActionButton): add appearance article * docs(FloatingActionButton): add position article * docs(FloatingActionButton): add event article * docs(FloatingActionButton): add floating action button to config file * Update components/floatingactionbutton/overview.md Co-authored-by: Iva Stefanova Koevska-Atanasova <koevska@progress.com> * Update components/floatingactionbutton/overview.md Co-authored-by: Iva Stefanova Koevska-Atanasova <koevska@progress.com> * Update components/floatingactionbutton/overview.md Co-authored-by: Iva Stefanova Koevska-Atanasova <koevska@progress.com> * Update components/floatingactionbutton/appearance.md Co-authored-by: Iva Stefanova Koevska-Atanasova <koevska@progress.com> * Update components/floatingactionbutton/appearance.md Co-authored-by: Iva Stefanova Koevska-Atanasova <koevska@progress.com> * Update components/floatingactionbutton/positions.md Co-authored-by: Iva Stefanova Koevska-Atanasova <koevska@progress.com> * rename file and add see also sections * chore(docs): add a11y spec * chore: revert changes in config.yml file * docs(FloatingActionButton): add component to side navigation * docs(common): add component to introduction page * Update src-a11y/configs/floatingactionbutton.yml * chore(docs): remove fab accessibility yml file * Update components/floatingactionbutton/overview.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * Update components/floatingactionbutton/overview.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * Update components/floatingactionbutton/overview.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * Update components/floatingactionbutton/overview.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * Update components/floatingactionbutton/overview.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * Update components/floatingactionbutton/overview.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * Update components/floatingactionbutton/overview.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * Update components/floatingactionbutton/position-and-alignment.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * Update components/floatingactionbutton/position-and-alignment.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * docs(FloatingActionButton): polish examples and apply suggestions --------- Co-authored-by: Iva Stefanova Koevska-Atanasova <koevska@progress.com> Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>
1 parent 6805d20 commit 7ba2f9d

File tree

6 files changed

+399
-0
lines changed

6 files changed

+399
-0
lines changed

‎components/floatingactionbutton/appearance.md

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
---
2+
title: Appearance
3+
page_title: Floating Action Button Appearance
4+
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.
5+
slug: fab-appearance
6+
tags: telerik,blazor,floating action button, appearance
7+
published: True
8+
position: 1
9+
---
10+
11+
# Appearance Settings
12+
13+
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.
14+
15+
## Rounded
16+
17+
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:
18+
19+
| Class members | Manual declarations |
20+
|------------|--------|
21+
|`Small` |`sm`|
22+
|`Medium`|`md`|
23+
|`Large`|`lg`|
24+
|`Full`|`full` (default)|
25+
26+
## Size
27+
28+
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:
29+
30+
| Class members | Manual declarations |
31+
|---------------|--------|
32+
| `Small` |`sm`|
33+
| `Medium` |`md` (default)|
34+
| `Large` |`lg`|
35+
36+
## ThemeColor
37+
38+
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:
39+
40+
| Class members | Manual declarations |
41+
|------------|--------|
42+
|`Base` <br /> (default) |`base`|
43+
|`Primary`|`primary`|
44+
|`Secondary`|`secondary`|
45+
|`Tertiary`|`tertiary`|
46+
|`Info`|`info`|
47+
|`Success`|`success`|
48+
|`Warning`|`warning`|
49+
|`Error`|`error`|
50+
|`Dark`|`dark`|
51+
|`Light`|`light`|
52+
|`Inverse`|`inverse`|
53+
54+
## Example
55+
56+
````RAZOR
57+
<div class="k-flex-basis-auto">
58+
<label>
59+
Theme Color
60+
<TelerikDropDownList Data="@ThemeColors" @bind-Value="@ThemeColor">
61+
<DropDownListSettings>
62+
<DropDownButtonPopupSettings MaxHeight="auto" />
63+
</DropDownListSettings>
64+
</TelerikDropDownList>
65+
</label>
66+
<label>
67+
Rounded
68+
<TelerikDropDownList Data="@RoundedValues" @bind-Value="@Rounded">
69+
<DropDownListSettings>
70+
<DropDownButtonPopupSettings MaxHeight="auto" />
71+
</DropDownListSettings>
72+
</TelerikDropDownList>
73+
</label>
74+
<label>
75+
Size
76+
<TelerikDropDownList Data="@Sizes" @bind-Value="@Size">
77+
<DropDownListSettings>
78+
<DropDownButtonPopupSettings MaxHeight="auto" />
79+
</DropDownListSettings>
80+
</TelerikDropDownList>
81+
</label>
82+
</div>
83+
84+
<TelerikFloatingActionButton ThemeColor="@ThemeColor"
85+
Rounded="@Rounded"
86+
Size="@Size"
87+
HorizontalAlign="@FloatingActionButtonHorizontalAlign.End"
88+
VerticalAlign="@FloatingActionButtonVerticalAlign.Top"
89+
Icon="SvgIcon.Play" />
90+
91+
@code {
92+
private string ThemeColor { get; set; } = ThemeConstants.Button.ThemeColor.Primary;
93+
private List<string> ThemeColors { get; set; } = new List<string>()
94+
{
95+
ThemeConstants.Button.ThemeColor.Base,
96+
ThemeConstants.Button.ThemeColor.Primary,
97+
ThemeConstants.Button.ThemeColor.Secondary,
98+
ThemeConstants.Button.ThemeColor.Tertiary,
99+
ThemeConstants.Button.ThemeColor.Info,
100+
ThemeConstants.Button.ThemeColor.Success,
101+
ThemeConstants.Button.ThemeColor.Warning,
102+
ThemeConstants.Button.ThemeColor.Error,
103+
ThemeConstants.Button.ThemeColor.Dark,
104+
ThemeConstants.Button.ThemeColor.Light,
105+
ThemeConstants.Button.ThemeColor.Inverse
106+
};
107+
108+
private string Rounded { get; set; } = ThemeConstants.Button.Rounded.Full;
109+
private List<string> RoundedValues { get; set; } = new List<string>()
110+
{
111+
ThemeConstants.Button.Rounded.Small,
112+
ThemeConstants.Button.Rounded.Medium,
113+
ThemeConstants.Button.Rounded.Large,
114+
ThemeConstants.Button.Rounded.Full
115+
};
116+
117+
private string Size { get; set; } = ThemeConstants.Button.Size.Medium;
118+
private List<string> Sizes { get; set; } = new List<string>()
119+
{
120+
ThemeConstants.Button.Size.Small,
121+
ThemeConstants.Button.Size.Medium,
122+
ThemeConstants.Button.Size.Large
123+
};
124+
}
125+
````
126+
127+
## See Also
128+
129+
* [Appearance - Design System Docs](https://www.telerik.com/design-system/docs/components/floatingactionbutton/#appearance)

‎components/floatingactionbutton/events.md

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
---
2+
title: Events
3+
page_title: Floating Action Button - Events
4+
description: Events of the Floating Action Button for Blazor.
5+
slug: fab-events
6+
tags: telerik,blazor,floating action button,events
7+
published: True
8+
position: 3
9+
---
10+
11+
# Button Events
12+
13+
This article explains the events available in the Telerik Floating Action Button for Blazor:
14+
15+
* [OnClick](#onclick)
16+
17+
## OnClick
18+
19+
The `OnClick` event fires when the user clicks or taps the button.
20+
21+
It receives argument of type [MouseEventArgs](https://docs.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.web.mouseeventargs?view=aspnetcore-5.0).
22+
23+
>caption Handle the button click
24+
25+
````RAZOR
26+
<TelerikFloatingActionButton Id="floating-action-button"
27+
Icon="@((IsPopupVisible ? SvgIcon.Minus : SvgIcon.Plus))"
28+
VerticalAlign="@FloatingActionButtonVerticalAlign.Top"
29+
HorizontalAlign="@FloatingActionButtonHorizontalAlign.Center"
30+
OnClick="@TogglePopup" />
31+
32+
<TelerikPopup @ref="@PopupRef"
33+
AnchorSelector="#floating-action-button"
34+
AnimationType="@AnimationType.SlideDown"
35+
AnimationDuration="200">
36+
<div class="k-d-flex k-flex-col k-gap-1.5 k-p-1.5 k-flex-wrap k-align-content-around">
37+
<TelerikButton Icon="@SvgIcon.Download"
38+
Rounded="@ThemeConstants.Button.Rounded.Full"
39+
FillMode="@ThemeConstants.Button.FillMode.Flat"
40+
ThemeColor="@ThemeConstants.Button.ThemeColor.Info"
41+
Size="@ThemeConstants.Button.Size.Large"
42+
Title="Download" />
43+
<TelerikButton Icon="@SvgIcon.Trash"
44+
Rounded="@ThemeConstants.Button.Rounded.Full"
45+
FillMode="@ThemeConstants.Button.FillMode.Flat"
46+
ThemeColor="@ThemeConstants.Button.ThemeColor.Error"
47+
Size="@ThemeConstants.Button.Size.Large"
48+
Title="Delete" />
49+
<TelerikButton Icon="@SvgIcon.Upload"
50+
Rounded="@ThemeConstants.Button.Rounded.Full"
51+
FillMode="@ThemeConstants.Button.FillMode.Flat"
52+
ThemeColor="@ThemeConstants.Button.ThemeColor.Success"
53+
Size="@ThemeConstants.Button.Size.Large"
54+
Title="Upload" />
55+
</div>
56+
</TelerikPopup>
57+
58+
<style>
59+
.k-popup {
60+
border-radius: 23px;
61+
}
62+
</style>
63+
64+
@code {
65+
private bool IsPopupVisible { get; set; }
66+
private TelerikPopup? PopupRef { get; set; }
67+
68+
private void TogglePopup()
69+
{
70+
if (IsPopupVisible)
71+
{
72+
PopupRef?.Hide();
73+
}
74+
else
75+
{
76+
PopupRef?.Show();
77+
}
78+
79+
IsPopupVisible = !IsPopupVisible;
80+
}
81+
}
82+
````

‎components/floatingactionbutton/overview.md

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
---
2+
title: Overview
3+
page_title: Floating Action Button Overview
4+
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.
5+
slug: fab-overview
6+
tags: telerik,blazor,floating action button
7+
published: True
8+
position: 0
9+
---
10+
11+
# Blazor Floating Action Button Overview
12+
13+
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:
14+
15+
* A single button with a single action
16+
* Additional related actions
17+
* Speed dial actions
18+
19+
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).
20+
21+
## Creating Blazor Floating Action Button
22+
23+
1. Use the `<TelerikFloatingActionButton>` tag to add the component to your razor page.
24+
2. (optional) Customize the [appearance](slug://fab-appearance) of the Telerik Blazor Floating Action Button.
25+
26+
>caption Basic Blazor Floating Action Button
27+
28+
````RAZOR
29+
Current time: @Result
30+
<TelerikFloatingActionButton Size="@ThemeConstants.Button.Size.Large"
31+
VerticalAlign="@FloatingActionButtonVerticalAlign.Top"
32+
HorizontalAlign="@FloatingActionButtonHorizontalAlign.Center"
33+
ThemeColor="@ThemeConstants.Button.ThemeColor.Info"
34+
Icon="@SvgIcon.Clock"
35+
OnClick="@HandleClickEvent" />
36+
@code {
37+
private string Result { get; set; } = DateTime.Now.ToString("HH:MM:ss:fff");
38+
39+
private void HandleClickEvent()
40+
{
41+
Result = DateTime.Now.ToString("HH:MM:ss:fff");
42+
}
43+
}
44+
````
45+
46+
## Position and Alignment
47+
48+
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)
49+
50+
## Events
51+
52+
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).
53+
54+
## Floating Action Button Parameters
55+
56+
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).
57+
58+
@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
59+
60+
| Parameter | Type and Default&nbsp;Value | Description |
61+
| --- | --- | --- |
62+
| `Enabled` | `bool` <br /> (`true`) | Whether the Floating Action Button is enabled. |
63+
| `Id` | `string` | The `id` attribute of the Floating Action Button. |
64+
| `Icon` | `object` | The icon rendered in the Floating Action Button. Can be set to a predefined Telerik icon or a custom one. |
65+
| `Title` | `string` | The `title` attribute of the Floating Action Button. |
66+
| `PositionMode` | `FloatingActionButtonPositionMode` enum <br /> (`Fixed`) | The position of the Floating Action Button relative to the container. |
67+
| `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) |
68+
| `VerticalAlign` | `FloatingActionButtonVerticalAlign` <br /> (`Bottom`) | Determines if the Floating Action Button will touch the parent container with its top or bottom side. |
69+
| `HorizontalOffset` | `string` <br /> (`16px`) | The horizontal offset value added to the button position, creating a blank space between the button and the parent. |
70+
| `VerticalOffset` | `string` <br /> (`16px`) | The vertical offset value added to the button position, creating a blank space between the button and the parent. |
71+
72+
### Styling and Appearance
73+
74+
The following parameters enable you to customize the appearance of the Blazor Floating Action Button:
75+
76+
| Parameter | Type | Description |
77+
| --- | --- | --- |
78+
| `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). |
79+
| `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`. |
80+
| `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`. |
81+
| `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`. |
82+
83+
84+
## Next Steps
85+
86+
* [Explore the Floating Action Button Positioning and Alignment Settings](slug://fab-positions)
87+
* [Customize the Floating Action Button Appearance](slug://fab-appearance)
88+
89+
## See Also
90+
91+
* [Live Demo: Floating Action Button](https://demos.telerik.com/blazor-ui/floatingactionbutton/overview)
92+
* [Floating Action Button Events](slug://fab-events)
93+
* [Floating Action Button API Reference](/blazor-ui/api/Telerik.Blazor.Components.TelerikFloatingActionButton)

0 commit comments

Comments
 (0)