Floatingactionbutton documentation

_config.yml

@@ -281,6 +281,9 @@ navigation:
     "controls/filter":
         title: "Filter"
         position: 1
+    "controls/floatingactionbutton":
+        title: "FloatingActionButton"
+        position: 1
     "controls/formdecorator":
         title: "Form Decorator"
         position: 1
@@ -2022,6 +2025,7 @@ intro_columns:
       "CheckBox": "checkbox/overview"
       "CheckBoxList": "checkboxlist/overview"
       "Drawer": "drawer/overview"
+      "FloatingActionButton": "floatingactionbutton/overview"
       "ImageButton": "imagebutton/overview"
       "LinkButton": "linkbutton/overview"
       "Menu": "menu/overview"

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

@@ -0,0 +1,33 @@
+---
+title: Keyboard Support
+page_title: Keyboard Support - RadFloatingActionButton
+description: Check our Web Forms article about Keyboard Support.
+slug: floatingactionbutton/accessibility-and-internationalization/keyboard-support
+tags: keyboard,support
+published: True
+position: 1
+---
+
+# Keyboard Support
+
+The keyboard navigation of the RadFloatingActionButton is always available.
+
+>caption Keyboard legend
+
+ - `Alt + w` focus the RadFloatingActionButton control
+ - `Enter` or `Space` opens the speed-dial popup and moves the focus to first item or triggers click handler
+ - `Up arrow` moves focus to the previous item
+ - `Down arrow` moves focus to the next item
+ - `Esc` closes the speed-dial popup
+ - `Home` moves the focus to the first item
+ - `End` moves the focus to the last item
+
+Test the keyboard support of RadFloatingActionButton in the dedicated [live demo](https://demos.telerik.com/aspnet-ajax/floatingactionbutton/keyboardnavigation/defaultcs.aspx)
+
+
+# See Also
+
+ * [Keyboad support demo](https://demos.telerik.com/aspnet-ajax/floatingactionbutton/keyboardnavigation/defaultcs.aspx)
+
+
+

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

@@ -0,0 +1,31 @@
+---
+title: Right-to-left Support
+page_title: Right-to-left Support - RadFloatingActionButton
+description: Check our Web Forms article about Right-to-left Support.
+slug: floatingactionbutton/accessibility-and-internationalization/right-to-left-support
+tags: right-to-left,support
+published: True
+position: 0
+---
+
+# Right-to-left Support
+
+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.
+
+Check out the **[Right-To-Left support Demo for the RadFloatingActionButton](https://demos.telerik.com/aspnet-ajax/floatingactionbutton/rtl/defaultcs.aspx)**
+
+For example you can wrap the FloatingActionButton in a <div dir="rtl" class="k-rtl"> element
+
+````ASP.NET
+<div dir="rtl" class="k-rtl">
+    <telerik:RadFloatingActionButton runat="server" ID="fabText" Text="Bookmark" Icon="bookmark" Shape="Pill" Size="Small" PositionMode="Absolute" Align="TopEnd">
+    </telerik:RadFloatingActionButton>
+</div>
+````
+
+
+# See Also
+
+ * [Right-to-Left Support demo](https://demos.telerik.com/aspnet-ajax/floatingactionbutton/rtl/defaultcs.aspx)
+
+

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

@@ -0,0 +1,25 @@
+---
+title: WAI-ARIA Support
+page_title: WAI-ARIA Support - RadFloatingActionButton
+description: Check our Web Forms article about WAI-ARIA Support.
+slug: floatingactionbutton/accessibility-and-internationalization/wai-aria-support
+tags: wai-aria,support
+published: True
+position: 2
+---
+
+# WAI-ARIA Support
+
+**RadFloatingActionButton** follows the WAI-ARIA Authoring Practices for implementing the keyboard navigation for its component role.
+
+The FloatingActionButton uses the *aria-disabled* property to mark the disabled state of the Control or of any of its items when disabled.
+
+>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.
+>
+
+
+# See Also
+
+ * [WAI-ARIA basic information](https://www.w3.org/WAI/intro/aria)
+
+

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

@@ -0,0 +1,51 @@
+---
+title: WCAG 2.1 and Section 508 Accessibility Compliance
+page_title: WCAG 2.1 and Section 508 Accessibility Compliance - RadFloatingActionButton
+description: Check our Web Forms article about WCAG 2.1 and Section 508 Accessibility Compliance.
+slug: floatingactionbutton/accessibility-and-internationalization/wcag-2.1-and-section-508-accessibility-compliance
+tags: wcag,2.1,and,section,508,accessibility,compliance
+published: True
+position: 3
+---
+
+# WCAG 2.1 and Section 508 Accessibility Compliance
+
+## XHTML 1.1
+
+**RadFloatingActionButton** is fully compliant with the XHTML 1.1 requirement.
+
+## Compliance Level
+
+1. Telerik RadFloatingActionButton is Level **AA** compliant (in conformance with the **W3C Web Accessibility Guidelines 2.1**).
+
+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.
+
+## Section 508
+
+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.
+
+## W3C Web Content Accessibility Guidelines 2.1
+
+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.
+
+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:
+
+* **Conformance Level "A"**
+
+* **Conformance Level "Double-A"**
+
+* **Conformance Level "Triple-A"**
+
+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/)
+
+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.
+
+**RadFloatingActionButton** also has full support for keyboard navigation.
+
+
+# See Also
+
+ * [Keyboard Support]({%slug floatingactionbutton/accessibility-and-internationalization/keyboard-support%})
+
+
+

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

@@ -0,0 +1,105 @@
+---
+title: Events
+page_title: RadFloatingActionButton Client-side Events
+description: Check our Web Forms article about the API of RadFloatingActionButton object.
+slug: floatingactionbutton/client-side-programming/events
+tags: overview
+published: True
+position: 1
+---
+
+# Events
+
+This article lists the client-side events of the **RadFloatingActionButton** and how to use them.
+
+All events follow the MS AJAX client events convention and receive two arguments:
+
+1. `sender` - the [RadFloatingActionButton]({%slug floatingactionbutton/client-side-programming/overview%}) instance that raised the event.
+1. `event arguments` - event-specific data provided to the developer.
+
+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.
+
+>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.
+
+The exceptions are the OnInitialize and OnLoad events that are specific to the MS AJAX framework.
+
+>caption Listing 1: The client-side events exposed by RadFloatingActionButton
+
+* **OnInitialize** — Fired just before the RadFloatingActionButton client-side object is initialized.
+
+* **OnLoad** — Fired when RadFloatingActionButton is initialized.
+
+* [OnClick](https://docs.telerik.com/kendo-ui/api/javascript/ui/floatingactionbutton/events/click) — Fires when the user clicks on a the FloatingActionButton. (Cancelable event)
+
+* [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.
+
+* [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.
+
+* Item's Click event - each Item defined in the RadFloatingActionButton exposes its own Click event that fires when the item itself is being clicked.
+
+## Examples
+
+>caption Example 1: Store a reference to the client-side object through the OnLoad event
+
+````ASP.NET
+<script>
+	var floatingButton, kendoFloatingActionButton;
+	function OnLoad(sender, args) {
+		floatingButton = sender; //the RadFloatingActionButton
+		kendoFloatingActionButton = sender.get_kendoWidget(); //the underlying Kendo FloatingActionButton
+	}
+</script>
+<telerik:RadFloatingActionButton runat="server" ID="RadFloatingActionButton">
+    <ClientEvents OnLoad="OnLoad" />
+</telerik:RadFloatingActionButton>
+````
+
+>caption Example 2: Get the data associated with the clicked item
+
+````ASPX
+<script>
+    function floatingButtonExpanded(sender, args) {
+        alert("Floating button Expanded!")
+    }
+    function floatingButtonCollapsed(sender, args) {
+        alert("Floating button Collapsed!")
+    }
+</script>
+<telerik:RadFloatingActionButton runat="server" Size="Large" ID="RadFloatingActionButton1" Icon="share" PositionMode="Absolute" Align="BottomCenter">
+    <ClientEvents OnExpand="floatingButtonExpanded" OnCollapse="floatingButtonCollapsed" />
+    <AlignOffsetSettings X="0" Y="100" />
+    <Items>
+        <telerik:FloatingActionButtonItem Label="Download" Icon="download"></telerik:FloatingActionButtonItem>
+        <telerik:FloatingActionButtonItem Label="Print" Icon="print"></telerik:FloatingActionButtonItem>
+        <telerik:FloatingActionButtonItem Label="Email" Icon="email"></telerik:FloatingActionButtonItem>
+    </Items>
+</telerik:RadFloatingActionButton>
+````
+
+>caption Example 3: Get the data associated with the clicked item
+
+````ASPX
+<script>
+    function dialItemClicked(eventArguments) {
+        alert('"' + eventArguments.item.label +'" item Clicked.');
+    }
+</script>
+<telerik:RadFloatingActionButton runat="server" Size="Large" ID="RadFloatingActionButton1" Icon="share" PositionMode="Absolute" Align="BottomCenter">
+    <AlignOffsetSettings X="0" Y="100" />
+    <Items>
+        <telerik:FloatingActionButtonItem Label="Download" Icon="download" OnClientClicked="dialItemClicked"></telerik:FloatingActionButtonItem>
+        <telerik:FloatingActionButtonItem Label="Print" Icon="print" OnClientClicked="dialItemClicked"></telerik:FloatingActionButtonItem>
+        <telerik:FloatingActionButtonItem Label="Email" Icon="email" OnClientClicked="dialItemClicked"></telerik:FloatingActionButtonItem>
+    </Items>
+</telerik:RadFloatingActionButton>
+````
+
+See live sample of handling the client events in our [Client-side events demo](https://demos.telerik.com/aspnet-ajax/floatingactionbutton/events/defaultcs.aspx)
+
+
+# See Also
+
+ * [RadFloatingActionButton Client-side Object]({%slug floatingactionbutton/client-side-programming/overview%})
+ * [Client-side events demo](https://demos.telerik.com/aspnet-ajax/floatingactionbutton/events/defaultcs.aspx)
+
+

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

@@ -0,0 +1,68 @@
+---
+title: Overview
+page_title: RadFloatingActionButton object
+description: Check our Web Forms article about the API of RadFloatingActionButton object.
+slug: floatingactionbutton/client-side-programming/overview
+tags: overview
+published: True
+position: 0
+---
+
+
+# RadFloatingActionButton object
+
+This article lists the client-side API of **RadFloatingActionButton** and shows how to use it.
+
+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:
+
+````JavaScript
+var floatingActionButtonObject = $find("<%=RadFloatingActionButton1.ClientID %>");
+````
+
+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:
+
+* Use the `get_kendoWidget()` method of the MS AJAX wrapper:
+
+    **JavaScript**
+
+        var floatingActionButtonObject  = $find("<%=RadFloatingActionButton1.ClientID %>"); //the standard script control object
+        var kendoFloatingActionButton = floatingActionButtonObject.get_kendoWidget(); //the Kendo widget
+
+
+* Get the Kendo Widget in its usual way. Make sure to use the `$telerik.$` jQuery reference:
+
+    **JavaScript**
+
+        var kendoFloatingActionButton = $telerik.$("#<%=RadFloatingActionButton1.ClientID %>").data("kendoFloatingActionButton"); 
+
+
+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.
+
+>caption Table1: Client-side methods exposed by the MS AJAX RadFloatingActionButton object
+
+| Name | Parameters | Return Type | Description |
+| ------ | ------ | ------ | ------ |
+| **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.|
+| **show** |none|none|Shows the FloatingActionButton if it is hidden.  |
+| **hide** |none|none|Hide the FloatingActionButton.  |
+| **disable** |none|none|Disables the FloatingActionButton. |
+| **enable** |none|none|Enables the FloatingActionButton.  |
+| **get_items** |none|Array|Returns the collection of speed-dial items in the button. |
+| **get_text** |none|String|Returns the text of the FloatingActionButton|
+| **set_text** |String|none|Sets the text of the FloatingActionButton|
+| **get_icon** |none|String|Returns the icon name of the FloatingActionButton|
+| **set_icon** |String|none|Sets the icon name of the FloatingActionButton|
+| **get_shape** |none|Number|Returns the enumeration index of the FloatingActionButton shape|
+| **set_shape** |Number|none|Sets the shape of the FloatingActionButton by its enumeration index|
+| **get_size** |none|Number|Returns the enumeration index of the FloatingActionButton size|
+| **set_size** |Number|none|Sets the size of the FloatingActionButton by its enumeration index|
+| **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.|
+
+
+# See Also
+
+ * [RadFloatingActionButton Client-side Events]({%slug floatingactionbutton/client-side-programming/events%})
+ * [Live Demo - RadFloatingActionButton Client-side API](https://demos.telerik.com/aspnet-ajax/floatingactionbutton/api/defaultcs.aspx)
+ * [Kendo UI FloatingActionButton widget API](https://docs.telerik.com/kendo-ui/api/javascript/ui/floatingactionbutton)
+
+

controls/floatingactionbutton/functionality/alignment.md

@@ -0,0 +1,57 @@
+---
+title: Alignment
+page_title: Alignment - RadFloatingActionButton
+description: Check our Web Forms article about the Alignment of RadFloatingActionButton.
+slug: floatingactionbutton/functionality/alignment
+published: True
+position: 1
+---
+
+# Alignment
+
+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.
+
+Test the different positioning options in the **[Alignment Demo for the RadFloatingActionButton](https://demos.telerik.com/aspnet-ajax/floatingactionbutton/alignment/defaultcs.aspx)**
+
+## Align
+
+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:
+
+ - "TopStart": positions the button at top left corner of the container.
+ - "TopCenter": positions the button at top center of the container.
+ - "TopEnd": positions the button at top right corner of the container.
+ - "MiddleStart": positions the button at middle left of the container.
+ - "MiddleEnd": positions the button at middle right of the container.
+ - "BottomStart": positions the button at bottom left corner of the container.
+ - "BottomCenter": positions the button at top center of the container.
+ - "BottomEnd": (Default Value) positions the button at bottom right corner of the container.
+
+>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.
+
+`Align` works in conjunction with `PositionMode` and the `AlignOffset`.
+
+>note When using align, make sure the FloatingActionButton container has css position other than "static".
+
+## PositionMode
+
+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:
+
+ - "Absolute" - positions the button relative to the nearest positioned ancestor.
+ - "Fixed" - (Default Value) positions the button relative to the viewport. 
+
+
+## AlignOffsetSettings
+
+The `AlignOffsetSettings` configuration option specifies the horizontal and vertical offset of the RadFloatingActionButton relative to the Align configuration defined.
+
+````ASPX
+<telerik:RadFloatingActionButton runat="server" ID="RadFloatingActionButton1" Text="Add to Queue" PositionMode="Absolute" Align="TopStart">
+    <AlignOffsetSettings X="50" Y="50" />
+</telerik:RadFloatingActionButton>
+````
+
+# See Also
+
+ * [Alignment Demo for the RadFloatingActionButton](https://demos.telerik.com/aspnet-ajax/floatingactionbutton/alignment/defaultcs.aspx)
+
+