Skip to content

Commit b1df3a1

Browse files
pepinho24attilaantaldonchoMilkovM
authored
Floatingactionbutton documentation (#421)
* docs(floationgactionbutton): create documentation structure * docs(floatingactionbutton): add overview article content * docs(floatingactionbutton): add getting-started article content * docs(floatingactionbutton): add alignment article * docs(floatingactionbutton): add appearance article * docs(floatingactionbutton): add items article * docs(floatingactionbutton): remove and fix leftovers * docs(floatingactionbutton): add server-side programming overview * docs(floatingactionbutton): add client-side programming articles * docs(floatingactionbutton): apply minor changes to the structure * docs(floatingactionbutton): add accessibility articles * docs(floatingactionbutton): fix page header client-side programming * docs(floatingactionbutton): add sample in client-side events article * docs(floatingactionbutton): add the control in the introduction site map Co-authored-by: Attila Antal <[email protected]> Co-authored-by: donchoMilkovM <[email protected]>
1 parent bb9757c commit b1df3a1

18 files changed

+666
-0
lines changed

‎_config.yml

+4
Original file line numberDiff line numberDiff line change
@@ -281,6 +281,9 @@ navigation:
281281
"controls/filter":
282282
title: "Filter"
283283
position: 1
284+
"controls/floatingactionbutton":
285+
title: "FloatingActionButton"
286+
position: 1
284287
"controls/formdecorator":
285288
title: "Form Decorator"
286289
position: 1
@@ -2022,6 +2025,7 @@ intro_columns:
20222025
"CheckBox": "checkbox/overview"
20232026
"CheckBoxList": "checkboxlist/overview"
20242027
"Drawer": "drawer/overview"
2028+
"FloatingActionButton": "floatingactionbutton/overview"
20252029
"ImageButton": "imagebutton/overview"
20262030
"LinkButton": "linkbutton/overview"
20272031
"Menu": "menu/overview"

‎controls/floatingactionbutton/accessibility-and-internationalization/keyboard-support.md

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
---
2+
title: Keyboard Support
3+
page_title: Keyboard Support - RadFloatingActionButton
4+
description: Check our Web Forms article about Keyboard Support.
5+
slug: floatingactionbutton/accessibility-and-internationalization/keyboard-support
6+
tags: keyboard,support
7+
published: True
8+
position: 1
9+
---
10+
11+
# Keyboard Support
12+
13+
The keyboard navigation of the RadFloatingActionButton is always available.
14+
15+
>caption Keyboard legend
16+
17+
- `Alt + w` focus the RadFloatingActionButton control
18+
- `Enter` or `Space` opens the speed-dial popup and moves the focus to first item or triggers click handler
19+
- `Up arrow` moves focus to the previous item
20+
- `Down arrow` moves focus to the next item
21+
- `Esc` closes the speed-dial popup
22+
- `Home` moves the focus to the first item
23+
- `End` moves the focus to the last item
24+
25+
Test the keyboard support of RadFloatingActionButton in the dedicated [live demo](https://demos.telerik.com/aspnet-ajax/floatingactionbutton/keyboardnavigation/defaultcs.aspx)
26+
27+
28+
# See Also
29+
30+
* [Keyboad support demo](https://demos.telerik.com/aspnet-ajax/floatingactionbutton/keyboardnavigation/defaultcs.aspx)
31+
32+
33+

‎controls/floatingactionbutton/accessibility-and-internationalization/right-to-left-support.md

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
---
2+
title: Right-to-left Support
3+
page_title: Right-to-left Support - RadFloatingActionButton
4+
description: Check our Web Forms article about Right-to-left Support.
5+
slug: floatingactionbutton/accessibility-and-internationalization/right-to-left-support
6+
tags: right-to-left,support
7+
published: True
8+
position: 0
9+
---
10+
11+
# Right-to-left Support
12+
13+
The RadFloatingActionButton supports right-to-left (RTL) language locales. In order to turn on the RTL support, you should set the *dir="rtl"* and add the *"k-rtl"* class to the parent element of the Control. The *"k-rtl"* class is needed to ensure the proper orientation of the Icons.
14+
15+
Check out the **[Right-To-Left support Demo for the RadFloatingActionButton](https://demos.telerik.com/aspnet-ajax/floatingactionbutton/rtl/defaultcs.aspx)**
16+
17+
For example you can wrap the FloatingActionButton in a &lt;div dir="rtl" class="k-rtl"&gt; element
18+
19+
````ASP.NET
20+
<div dir="rtl" class="k-rtl">
21+
<telerik:RadFloatingActionButton runat="server" ID="fabText" Text="Bookmark" Icon="bookmark" Shape="Pill" Size="Small" PositionMode="Absolute" Align="TopEnd">
22+
</telerik:RadFloatingActionButton>
23+
</div>
24+
````
25+
26+
27+
# See Also
28+
29+
* [Right-to-Left Support demo](https://demos.telerik.com/aspnet-ajax/floatingactionbutton/rtl/defaultcs.aspx)
30+
31+

‎controls/floatingactionbutton/accessibility-and-internationalization/wai-aria-support.md

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
---
2+
title: WAI-ARIA Support
3+
page_title: WAI-ARIA Support - RadFloatingActionButton
4+
description: Check our Web Forms article about WAI-ARIA Support.
5+
slug: floatingactionbutton/accessibility-and-internationalization/wai-aria-support
6+
tags: wai-aria,support
7+
published: True
8+
position: 2
9+
---
10+
11+
# WAI-ARIA Support
12+
13+
**RadFloatingActionButton** follows the WAI-ARIA Authoring Practices for implementing the keyboard navigation for its component role.
14+
15+
The FloatingActionButton uses the *aria-disabled* property to mark the disabled state of the Control or of any of its items when disabled.
16+
17+
>note An issue with the use of WAI-ARIA in HTML documents is that they don’t validate. When you run a HTML document containing ARIA attributes through the W3C Validator it shows errors in the results for any ARIA attributes. The DOCTYPE declarations do not include any information about the WAI ARIA attributes and you cannot have a valid document which includes elements, attributes, and attribute values, not detailed in its DTD’s.
18+
>
19+
20+
21+
# See Also
22+
23+
* [WAI-ARIA basic information](https://www.w3.org/WAI/intro/aria)
24+
25+

‎controls/floatingactionbutton/accessibility-and-internationalization/wcag-2.1-and-section-508-accessibility-compliance.md

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
---
2+
title: WCAG 2.1 and Section 508 Accessibility Compliance
3+
page_title: WCAG 2.1 and Section 508 Accessibility Compliance - RadFloatingActionButton
4+
description: Check our Web Forms article about WCAG 2.1 and Section 508 Accessibility Compliance.
5+
slug: floatingactionbutton/accessibility-and-internationalization/wcag-2.1-and-section-508-accessibility-compliance
6+
tags: wcag,2.1,and,section,508,accessibility,compliance
7+
published: True
8+
position: 3
9+
---
10+
11+
# WCAG 2.1 and Section 508 Accessibility Compliance
12+
13+
## XHTML 1.1
14+
15+
**RadFloatingActionButton** is fully compliant with the XHTML 1.1 requirement.
16+
17+
## Compliance Level
18+
19+
1. Telerik RadFloatingActionButton is Level **AA** compliant (in conformance with the **W3C Web Accessibility Guidelines 2.1**).
20+
21+
1. Telerik RadFloatingActionButton satisfies the requirements of **"Section 508"** for software accessibility. As a result, the component can be used in US Federal Institutions and other organizations, which require software to be accessible to people with disabilities.
22+
23+
## Section 508
24+
25+
The USA federal mandate requires that information technology be made accessible to people with disabilities. Much of Section 508 compliance concerns making Web sites, intranets, and web-enabled applications accessible. Section 508 compliance has since become a major prerequisite not only in government related software, but also in most enterprise and corporate software solutions.
26+
27+
## W3C Web Content Accessibility Guidelines 2.1
28+
29+
The main goal of these guidelines is to encourage developers in creating applications providing accessible contents. Moreover, adhering to these guidelines will also make web content more accessible to all kind of users, using different devices and interfaces: desktop browser, voice browser, mobile phone, automobile-based personal computer, etc.
30+
31+
In accordance with these guidelines W3C defines three levels of conformance developers may implement in order to provide some level of content compliance to their products:
32+
33+
* **Conformance Level "A"**
34+
35+
* **Conformance Level "Double-A"**
36+
37+
* **Conformance Level "Triple-A"**
38+
39+
For more details on W3C "Web Content Accessibility Guidelines 2.1" see [Web Content Accessibility Guidelines (WCAG) 2.1](https://www.w3.org/TR/WCAG/)
40+
41+
In our attempt to make our products compliant, each web-control we develop and its QSF strive to obtain at least one of conformance levels listed above.
42+
43+
**RadFloatingActionButton** also has full support for keyboard navigation.
44+
45+
46+
# See Also
47+
48+
* [Keyboard Support]({%slug floatingactionbutton/accessibility-and-internationalization/keyboard-support%})
49+
50+
51+

‎controls/floatingactionbutton/client-side-programming/events.md

+105
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
---
2+
title: Events
3+
page_title: RadFloatingActionButton Client-side Events
4+
description: Check our Web Forms article about the API of RadFloatingActionButton object.
5+
slug: floatingactionbutton/client-side-programming/events
6+
tags: overview
7+
published: True
8+
position: 1
9+
---
10+
11+
# Events
12+
13+
This article lists the client-side events of the **RadFloatingActionButton** and how to use them.
14+
15+
All events follow the MS AJAX client events convention and receive two arguments:
16+
17+
1. `sender` - the [RadFloatingActionButton]({%slug floatingactionbutton/client-side-programming/overview%}) instance that raised the event.
18+
1. `event arguments` - event-specific data provided to the developer.
19+
20+
RadFloatingActionButton is a wrapper over the Kendo UI FloatingActionButton widget and so it exposes the [client events](https://docs.telerik.com/kendo-ui/api/javascript/ui/floatingactionbutton#events) and data it does. You can find a list below.
21+
22+
>note The event data is wrapped according to the MS AJAX conventions and the fields you can see in the underlying Kendo Widget are available through a method like `get_<fieldName>()` in the `event arguments` argument of the handler (that is, the second argument the event handler receives). To cancel a cancelable event, you must call its `args.set_cancel(true);` method.
23+
24+
The exceptions are the OnInitialize and OnLoad events that are specific to the MS AJAX framework.
25+
26+
>caption Listing 1: The client-side events exposed by RadFloatingActionButton
27+
28+
* **OnInitialize** — Fired just before the RadFloatingActionButton client-side object is initialized.
29+
30+
* **OnLoad** — Fired when RadFloatingActionButton is initialized.
31+
32+
* [OnClick](https://docs.telerik.com/kendo-ui/api/javascript/ui/floatingactionbutton/events/click) — Fires when the user clicks on a the FloatingActionButton. (Cancelable event)
33+
34+
* [OnExpand](https://docs.telerik.com/kendo-ui/api/javascript/ui/floatingactionbutton/events/collapse) — Fires when the speed-dial popup is opened and its animation is finished.. Available only when Items are defined.
35+
36+
* [OnCollapse](https://docs.telerik.com/kendo-ui/api/javascript/ui/floatingactionbutton/events/collapse) — Fires when the speed-dial popup is closed and its animation is finished. Available only when Items are defined.
37+
38+
* Item's Click event - each Item defined in the RadFloatingActionButton exposes its own Click event that fires when the item itself is being clicked.
39+
40+
## Examples
41+
42+
>caption Example 1: Store a reference to the client-side object through the OnLoad event
43+
44+
````ASP.NET
45+
<script>
46+
var floatingButton, kendoFloatingActionButton;
47+
function OnLoad(sender, args) {
48+
floatingButton = sender; //the RadFloatingActionButton
49+
kendoFloatingActionButton = sender.get_kendoWidget(); //the underlying Kendo FloatingActionButton
50+
}
51+
</script>
52+
<telerik:RadFloatingActionButton runat="server" ID="RadFloatingActionButton">
53+
<ClientEvents OnLoad="OnLoad" />
54+
</telerik:RadFloatingActionButton>
55+
````
56+
57+
>caption Example 2: Get the data associated with the clicked item
58+
59+
````ASPX
60+
<script>
61+
function floatingButtonExpanded(sender, args) {
62+
alert("Floating button Expanded!")
63+
}
64+
function floatingButtonCollapsed(sender, args) {
65+
alert("Floating button Collapsed!")
66+
}
67+
</script>
68+
<telerik:RadFloatingActionButton runat="server" Size="Large" ID="RadFloatingActionButton1" Icon="share" PositionMode="Absolute" Align="BottomCenter">
69+
<ClientEvents OnExpand="floatingButtonExpanded" OnCollapse="floatingButtonCollapsed" />
70+
<AlignOffsetSettings X="0" Y="100" />
71+
<Items>
72+
<telerik:FloatingActionButtonItem Label="Download" Icon="download"></telerik:FloatingActionButtonItem>
73+
<telerik:FloatingActionButtonItem Label="Print" Icon="print"></telerik:FloatingActionButtonItem>
74+
<telerik:FloatingActionButtonItem Label="Email" Icon="email"></telerik:FloatingActionButtonItem>
75+
</Items>
76+
</telerik:RadFloatingActionButton>
77+
````
78+
79+
>caption Example 3: Get the data associated with the clicked item
80+
81+
````ASPX
82+
<script>
83+
function dialItemClicked(eventArguments) {
84+
alert('"' + eventArguments.item.label +'" item Clicked.');
85+
}
86+
</script>
87+
<telerik:RadFloatingActionButton runat="server" Size="Large" ID="RadFloatingActionButton1" Icon="share" PositionMode="Absolute" Align="BottomCenter">
88+
<AlignOffsetSettings X="0" Y="100" />
89+
<Items>
90+
<telerik:FloatingActionButtonItem Label="Download" Icon="download" OnClientClicked="dialItemClicked"></telerik:FloatingActionButtonItem>
91+
<telerik:FloatingActionButtonItem Label="Print" Icon="print" OnClientClicked="dialItemClicked"></telerik:FloatingActionButtonItem>
92+
<telerik:FloatingActionButtonItem Label="Email" Icon="email" OnClientClicked="dialItemClicked"></telerik:FloatingActionButtonItem>
93+
</Items>
94+
</telerik:RadFloatingActionButton>
95+
````
96+
97+
See live sample of handling the client events in our [Client-side events demo](https://demos.telerik.com/aspnet-ajax/floatingactionbutton/events/defaultcs.aspx)
98+
99+
100+
# See Also
101+
102+
* [RadFloatingActionButton Client-side Object]({%slug floatingactionbutton/client-side-programming/overview%})
103+
* [Client-side events demo](https://demos.telerik.com/aspnet-ajax/floatingactionbutton/events/defaultcs.aspx)
104+
105+

‎controls/floatingactionbutton/client-side-programming/overview.md

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
---
2+
title: Overview
3+
page_title: RadFloatingActionButton object
4+
description: Check our Web Forms article about the API of RadFloatingActionButton object.
5+
slug: floatingactionbutton/client-side-programming/overview
6+
tags: overview
7+
published: True
8+
position: 0
9+
---
10+
11+
12+
# RadFloatingActionButton object
13+
14+
This article lists the client-side API of **RadFloatingActionButton** and shows how to use it.
15+
16+
To use the API, you must first [get a reference to the control's client-side object]({%slug general-information/get-client-side-reference%}). For example:
17+
18+
````JavaScript
19+
var floatingActionButtonObject = $find("<%=RadFloatingActionButton1.ClientID %>");
20+
````
21+
22+
RadFloatingActionButton is a server-side wrapper over the Kendo UI FloatingActionButton Widget. Thus, it exposes [the API of the underlying Kendo widget](https://docs.telerik.com/kendo-ui/api/javascript/ui/floatingactionbutton). To get a reference to the Kendo widget instance, you can do either of the following:
23+
24+
* Use the `get_kendoWidget()` method of the MS AJAX wrapper:
25+
26+
**JavaScript**
27+
28+
var floatingActionButtonObject = $find("<%=RadFloatingActionButton1.ClientID %>"); //the standard script control object
29+
var kendoFloatingActionButton = floatingActionButtonObject.get_kendoWidget(); //the Kendo widget
30+
31+
32+
* Get the Kendo Widget in its usual way. Make sure to use the `$telerik.$` jQuery reference:
33+
34+
**JavaScript**
35+
36+
var kendoFloatingActionButton = $telerik.$("#<%=RadFloatingActionButton1.ClientID %>").data("kendoFloatingActionButton");
37+
38+
39+
In addition to using the Kendo methods directly, you can also use their wrappers that follow the MS AJAX convention through the RadFloatingActionButton client object.
40+
41+
>caption Table1: Client-side methods exposed by the MS AJAX RadFloatingActionButton object
42+
43+
| Name | Parameters | Return Type | Description |
44+
| ------ | ------ | ------ | ------ |
45+
| **dispose** |none|none|Destroys the underlying Kendo widget (calls its [destroy](https://docs.telerik.com/kendo-ui/api/javascript/ui/floatingactionbutton/methods/destroy) method). Once you call it, you will not be able to use the widget or control.|
46+
| **show** |none|none|Shows the FloatingActionButton if it is hidden. |
47+
| **hide** |none|none|Hide the FloatingActionButton. |
48+
| **disable** |none|none|Disables the FloatingActionButton. |
49+
| **enable** |none|none|Enables the FloatingActionButton. |
50+
| **get_items** |none|Array|Returns the collection of speed-dial items in the button. |
51+
| **get_text** |none|String|Returns the text of the FloatingActionButton|
52+
| **set_text** |String|none|Sets the text of the FloatingActionButton|
53+
| **get_icon** |none|String|Returns the icon name of the FloatingActionButton|
54+
| **set_icon** |String|none|Sets the icon name of the FloatingActionButton|
55+
| **get_shape** |none|Number|Returns the enumeration index of the FloatingActionButton shape|
56+
| **set_shape** |Number|none|Sets the shape of the FloatingActionButton by its enumeration index|
57+
| **get_size** |none|Number|Returns the enumeration index of the FloatingActionButton size|
58+
| **set_size** |Number|none|Sets the size of the FloatingActionButton by its enumeration index|
59+
| **repaint** |Boolean|none| Repaints the control. The "force" argument determines whether the resizing routine should be executed even if the respective widget's outer dimensions have not changed.|
60+
61+
62+
# See Also
63+
64+
* [RadFloatingActionButton Client-side Events]({%slug floatingactionbutton/client-side-programming/events%})
65+
* [Live Demo - RadFloatingActionButton Client-side API](https://demos.telerik.com/aspnet-ajax/floatingactionbutton/api/defaultcs.aspx)
66+
* [Kendo UI FloatingActionButton widget API](https://docs.telerik.com/kendo-ui/api/javascript/ui/floatingactionbutton)
67+
68+

‎controls/floatingactionbutton/functionality/alignment.md

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
---
2+
title: Alignment
3+
page_title: Alignment - RadFloatingActionButton
4+
description: Check our Web Forms article about the Alignment of RadFloatingActionButton.
5+
slug: floatingactionbutton/functionality/alignment
6+
published: True
7+
position: 1
8+
---
9+
10+
# Alignment
11+
12+
The RadFloatingActionButton exposes the `Align` and `PositionMode` properties and the `AlignOffsetSettings` inner tag as configuration options. These three options work together and allow you to position the FloatingActionButton component precisely as per the application requirements.
13+
14+
Test the different positioning options in the **[Alignment Demo for the RadFloatingActionButton](https://demos.telerik.com/aspnet-ajax/floatingactionbutton/alignment/defaultcs.aspx)**
15+
16+
## Align
17+
18+
The `Align` property specifies the position of the FloatingActionButton relative to its container. When using this option it is important to ensure that the FloatingActionButton container has a CSS position other than static and allows overflow content. The available alignment options are:
19+
20+
- "TopStart": positions the button at top left corner of the container.
21+
- "TopCenter": positions the button at top center of the container.
22+
- "TopEnd": positions the button at top right corner of the container.
23+
- "MiddleStart": positions the button at middle left of the container.
24+
- "MiddleEnd": positions the button at middle right of the container.
25+
- "BottomStart": positions the button at bottom left corner of the container.
26+
- "BottomCenter": positions the button at top center of the container.
27+
- "BottomEnd": (Default Value) positions the button at bottom right corner of the container.
28+
29+
>note In Right-To-Left (RTL) mode of Control the the Start positions will be processed as right instead of left, and respectively End positions will align to the left instead of right. E.g Align="TopStart" in RTL mode will result in button aligned to the top right corner.
30+
31+
`Align` works in conjunction with `PositionMode` and the `AlignOffset`.
32+
33+
>note When using align, make sure the FloatingActionButton container has css position other than "static".
34+
35+
## PositionMode
36+
37+
The `PositionMode` property specifies the CSS position of the FloatingActionButton in the document. You can position the RadFloatingActionButton relative to the closest ancestor or position it relative to the viewport. The `PositionMode` can be set to:
38+
39+
- "Absolute" - positions the button relative to the nearest positioned ancestor.
40+
- "Fixed" - (Default Value) positions the button relative to the viewport.
41+
42+
43+
## AlignOffsetSettings
44+
45+
The `AlignOffsetSettings` configuration option specifies the horizontal and vertical offset of the RadFloatingActionButton relative to the Align configuration defined.
46+
47+
````ASPX
48+
<telerik:RadFloatingActionButton runat="server" ID="RadFloatingActionButton1" Text="Add to Queue" PositionMode="Absolute" Align="TopStart">
49+
<AlignOffsetSettings X="50" Y="50" />
50+
</telerik:RadFloatingActionButton>
51+
````
52+
53+
# See Also
54+
55+
* [Alignment Demo for the RadFloatingActionButton](https://demos.telerik.com/aspnet-ajax/floatingactionbutton/alignment/defaultcs.aspx)
56+
57+

0 commit comments

Comments
 (0)