Merge pull request #2872 from syncfusion-content/EJ2-866136-fabOutlineDev

documentation(866032): Documented adding outline color of the floating action button component

Author: IndrajithSrinivasan

ej2-asp-core-mvc/code-snippet/floating-action-button/styles/custom-outline/fabstyles.cs

@@ -0,0 +1,4 @@
+public ActionResult FabStyles()
+{
+    return View();
+}

ej2-asp-core-mvc/code-snippet/floating-action-button/styles/custom-outline/razor

@@ -0,0 +1,11 @@
+@using Syncfusion.EJ2.Buttons
+
+<div id="target" style="min-height:200px; position:relative; width:300px; border:1px solid;">
+    @Html.EJS().Fab("fab").Target("#target").IconCss("e-icons e-people").Content("Contact").CssClass("custom-css").Render()
+</div>
+<style>
+    .custom-css.e-fab.e-btn {
+        border-color: darkgrey;
+        border-width: 4px;
+    }
+</style>

ej2-asp-core-mvc/code-snippet/floating-action-button/styles/custom-outline/tagHelper

@@ -0,0 +1,11 @@
+@using Syncfusion.EJ2.Buttons
+
+<div id="target" style="min-height:200px; position:relative; width:300px; border:1px solid;">
+    <ejs-fab id="fab" target="#target" cssClass="custom-css" iconCss="e-icons e-people" content="Contact"></ejs-fab>
+</div>
+<style>
+    .custom-css.e-fab.e-btn {
+        border-color: darkgrey;
+        border-width: 4px;
+    }
+</style>

ej2-asp-core-mvc/floating-action-button/EJ2_ASP.MVC/styles.md

@@ -70,4 +70,23 @@ By using [CssClass](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.
 
 {% endif %}
 
-![Asp.Net MVC Floating Action Button control with Hover](images/onhover.png)
+![Asp.Net MVC Floating Action Button control with Hover](images/onhover.png)
+
+## Outline customization
+
+By using the [CssClass](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Buttons.Fab.html#Syncfusion_EJ2_Buttons_Fab_CssClass) property, you can customize the outline color of the Floating Action Button.
+
+{% if page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/floating-action-button/styles/custom-outline/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Fabstyles.cs" %}
+{% include code-snippet/floating-action-button/styles/custom-outline/fabstyles.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% endif %}
+
+![Asp.Net MVC Floating Action Button control with Outline](images/FabOutline.png)

ej2-asp-core-mvc/floating-action-button/EJ2_ASP.NETCORE/styles.md

@@ -66,3 +66,19 @@ By using [CssClass](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2
 {% endif %}
 
 ![Asp.Net Core Floating Action Button control with Hover](images/onhover.png)
+
+## Outline customization
+
+By using the [CssClass](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Buttons.Fab.html#Syncfusion_EJ2_Buttons_Fab_CssClass) property, you can customize the outline color of the Floating Action Button.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/floating-action-button/styles/custom-outline/tagHelper %}
+{% endhighlight %}
+{% endtabs %}
+
+{% endif %}
+
+![Asp.Net Core Floating Action Button control with Outline](images/FabOutline.png)