Skip to content

Commit 39fafe3

Browse files
BackiarajBackiaraj
committed
Cleared the conflicts
2 parents 7215f28 + 3a3da28 commit 39fafe3

File tree

28 files changed

+333
-300
lines changed

28 files changed

+333
-300
lines changed

‎ej2-asp-core-mvc/code-snippet/diagram/interaction/nodefixeduserhandle2/node.cs

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
using System;
2+
using System.Collections.Generic;
3+
using System.Linq;
4+
using System.Web;
5+
using System.Web.Mvc;
6+
using Syncfusion.EJ2.Diagrams;
7+
using System.Drawing;
8+
9+
namespace EJ2MVCSampleBrowser.Controllers.Diagram {
10+
public partial class DiagramController: Controller {
11+
public ActionResult Nodes() {
12+
List < DiagramNode > nodes = new List < DiagramNode > ();
13+
// A fixed user handle is created and stored in fixed user handle collection of Node.
14+
List<DiagramNodeFixedUserHandle> handle = new List<DiagramNodeFixedUserHandle>();
15+
handle.Add(new DiagramNodeFixedUserHandle() { Tooltip = new DiagramDiagramTooltip() { Content = "handle1", Position = "TopLeft", RelativeMode= TooltipRelativeMode.Object}, Margin = new DiagramMargin() {Right=20 },Width=20,Height=20, PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z" });
16+
nodes.Add(new DiagramNode() {
17+
Id = "node1",
18+
Width = 100,
19+
Height = 100,
20+
BorderWidth=2,
21+
Style = new NodeStyleNodes() {
22+
Fill = "darkcyan"
23+
},
24+
OffsetX = 100,
25+
OffsetY = 100,
26+
FixedUserHandles = handle
27+
});
28+
ViewBag.nodes = nodes;
29+
return View();
30+
}
31+
}
32+
33+
}

‎ej2-asp-core-mvc/code-snippet/diagram/interaction/nodefixeduserhandle2/tagHelper

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
<ejs-diagram id="container" width="100%" height="700px" nodes="@ViewBag.nodes">
2+
</ejs-diagram>

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
public ActionResult FabStyles()
2+
{
3+
return View();
4+
}

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
@using Syncfusion.EJ2.Buttons
2+
3+
<div id="target" style="min-height:200px; position:relative; width:300px; border:1px solid;">
4+
@Html.EJS().Fab("fab").Target("#target").IconCss("e-icons e-people").Content("Contact").CssClass("custom-css").Render()
5+
</div>
6+
<style>
7+
.custom-css.e-fab.e-btn {
8+
border-color: darkgrey;
9+
border-width: 4px;
10+
}
11+
</style>

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
@using Syncfusion.EJ2.Buttons
2+
3+
<div id="target" style="min-height:200px; position:relative; width:300px; border:1px solid;">
4+
<ejs-fab id="fab" target="#target" cssClass="custom-css" iconCss="e-icons e-people" content="Contact"></ejs-fab>
5+
</div>
6+
<style>
7+
.custom-css.e-fab.e-btn {
8+
border-color: darkgrey;
9+
border-width: 4px;
10+
}
11+
</style>

‎ej2-asp-core-mvc/code-snippet/rich-text-editor/basic/default/razor

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@Html.EJS().RichTextEditor("defaultRTE").ContentTemplate(@<div>
1+
@Html.EJS().RichTextEditor("editor").ContentTemplate(@<div>
22
<div>
33
<p>The Rich Text Editor is WYSIWYG ('what you see is what you get') editor useful to create and edit content, and return the valid <a href='https://ej2.syncfusion.com/aspnetmvc/RichTextEditor/Overview'>HTML markup</a> or <a href='https://ej2.syncfusion.com/aspnetmvc/RichTextEditor/DefaultMode'>markdown</a> of the content</p>
44
<p><b> Toolbar </b></p>

‎ej2-asp-core-mvc/code-snippet/rich-text-editor/basic/default/tagHelper

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<ejs-richtexteditor id="defaultRTE">
1+
<ejs-richtexteditor id="editor">
22
<e-content-template>
33
<div>
44
<p>The Rich Text Editor is WYSIWYG ('what you see is what you get') editor useful to create and edit content, and return the valid <a href='https://ej2.syncfusion.com/aspnetcore/RichTextEditor/Overview'>HTML markup</a> or <a href='https://ej2.syncfusion.com/aspnetcore/RichTextEditor/DefaultMode'>markdown</a> of the content</p>

‎ej2-asp-core-mvc/common/EJ2_ASP.MVC/accessibility.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,7 @@ letter-spacing: 0.7px;
134134
<div class="controlanchorlink"><a target="_self" href="https://ej2.syncfusion.com/aspnetmvc/documentation/tree-grid/accessibility">Tree Grid</a></div>
135135
<div class="controlanchorlink"><a target="_self" href="https://ej2.syncfusion.com/aspnetmvc/documentation/spreadsheet/accessibility">Spreadsheet</a></div>
136136
<div><p class="controlcategory">FILE VIEWERS & EDITORS</p></div>
137-
<div class="controlanchorlink"><a target="_self" href="">In-place Editor</a></div>
137+
<div class="controlanchorlink"><a target="_self" href="https://ej2.syncfusion.com/aspnetmvc/documentation/in-place-editor/accessibility">In-place Editor</a></div>
138138
<div class="controlanchorlink"><a target="_self" href="https://ej2.syncfusion.com/aspnetmvc/documentation/pdfviewer/accessibility">PDF Viewer</a></div>
139139
<div class="controlanchorlink"><a target="_self" href="https://ej2.syncfusion.com/aspnetmvc/documentation/rich-text-editor/accessibility">RichTextEditor</a></div>
140140
<div class="controlanchorlink"><a target="_self" href="">Word Processor</a></div>
@@ -154,7 +154,7 @@ letter-spacing: 0.7px;
154154
<div class="controlanchorlink"><a target="_self" href="https://ej2.syncfusion.com/aspnetmvc/documentation/stock-chart/accessibility">Stock Chart</a></div>
155155
<div class="controlanchorlink"><a target="_self" href="https://ej2.syncfusion.com/aspnetmvc/documentation/circular-gauge/accessibility">Circular Gauge</a></div>
156156
<div class="controlanchorlink"><a target="_self" href="https://ej2.syncfusion.com/aspnetmvc/documentation/diagram/accessibility">Diagram</a></div>
157-
<div class="controlanchorlink"><a target="_self" href="">HeatMap Chart</a></div>
157+
<div class="controlanchorlink"><a target="_self" href="https://ej2.syncfusion.com/aspnetmvc/documentation/heatmap-chart/accessibility">HeatMap Chart</a></div>
158158
<div class="controlanchorlink"><a target="_self" href="https://ej2.syncfusion.com/aspnetmvc/documentation/linear-gauge/accessibility">Linear Gauge</a></div>
159159
<div class="controlanchorlink"><a target="_self" href="https://ej2.syncfusion.com/aspnetmvc/documentation/maps/accessibility">Maps</a></div>
160160
<div class="controlanchorlink"><a target="_self" href="https://ej2.syncfusion.com/aspnetmvc/documentation/range-navigator/accessibility">Range Selector</a></div>

‎ej2-asp-core-mvc/common/EJ2_ASP.MVC/content-security-policy.md

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
---
2+
layout: post
3+
title: Content Security Policy in ##Platform_Name## Common Control | Syncfusion
4+
description: Learn here all about Content Security Policy in Syncfusion ##Platform_Name## Common control of Syncfusion Essential JS 2 and more.
5+
platform: ej2-asp-core-mvc
6+
control: Common
7+
publishingplatform: ##Platform_Name##
8+
documentation: ug
9+
---
10+
11+
# Content Security Policy
12+
13+
Content Security Policy (CSP) is a security feature implemented by web browsers that helps to protect against attacks such as cross-site scripting (XSS) and data injection. It limits the sources from which content can be loaded on a web page.
14+
15+
To enable strict [Content Security Policy (CSP)](https://csp.withgoogle.com/docs/strict-csp.html), certain browser features are disabled by default. In order to use Syncfusion controls with strict CSP mode, it is essential to include following directives in the CSP meta tag.
16+
17+
* Syncfusion controls are rendered with calculated **inline styles** and **base64** font icons, which are blocked on a strict CSP-enabled site. To allow them, add the [`style-src 'self' 'unsafe-inline';`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src) and [`font-src 'self' data:;`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/font-src) directives in the meta tag as follows.
18+
19+
{% tabs %}
20+
{% highlight c# tabtitle="~/_Layout.cshtml" %}
21+
22+
<meta http-equiv="Content-Security-Policy" content="default-src 'self';
23+
script-src 'self' 'unsafe-inline' https://cdn.syncfusion.com;
24+
style-src 'self' 'unsafe-inline';
25+
font-src 'self' data:;" />
26+
27+
{% endhighlight %}
28+
{% endtabs %}
29+
30+
* Syncfusion **material** and **tailwind** built-in themes contain a reference to the [`Roboto’s external font`](https://fonts.googleapis.com/css?family=Roboto:400,500), which is also blocked. To allow them, add the [`external font`](https://fonts.googleapis.com/css?family=Roboto:400,500) reference to the [`style-src`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src) and [`font-src`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/font-src) directives in the above meta tag.
31+
32+
The resultant meta tag is included within the `<head>` tag and resolves the CSP violation on the application's side when utilizing Syncfusion controls with material and tailwind themes.
33+
34+
{% tabs %}
35+
{% highlight c# tabtitle="~/_Layout.cshtml" %}
36+
37+
<head>
38+
...
39+
<meta http-equiv="Content-Security-Policy" content="default-src 'self';
40+
script-src 'self' 'unsafe-inline' https://cdn.syncfusion.com;
41+
style-src 'self' https://fonts.googleapis.com/ 'unsafe-inline';
42+
font-src 'self' https://fonts.googleapis.com/ https://fonts.gstatic.com/ data:;" />
43+
</head>
44+
45+
{% endhighlight %}
46+
{% endtabs %}
47+
48+
N> The `unsafe-eval` directive needs to be added in `script-src` for controls which uses the templates.
49+

‎ej2-asp-core-mvc/common/EJ2_ASP.MVC/showcase-samples.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,4 +16,4 @@ Syncfusion has a collection of sample applications that demonstrate the use of S
1616
| ------------- | ------------- | ------------- |
1717
| [Expense Tracker](https://ej2.syncfusion.com/showcase/aspnetmvc/expense-tracker/) | Track and visualize your daily expenses with a great UI. | [GitHub code](https://github.com/syncfusion/ej2-showcase-aspnetmvc-expensetracker) |
1818
| [Loan Calculator](https://ej2.syncfusion.com/showcase/aspnetmvc/loancalculator/) | Calculate loan payments, interest rates, and amortization schedules. When you are planning for a personal loan or analyzing business financing options, this provides accurate results and helps you make informed financial decisions. | [GitHub code](https://github.com/syncfusion/ej2-showcase-aspnetmvc-loan-calculator) |
19-
| [Web Mail](https://ej2.syncfusion.com/showcase/aspnetmvc/webmail/) | Outlook like user interface to manage your mailbox. | [GitHub code](https://github.com/syncfusion/ej2-showcase-aspnetmvc-outlook) |
19+
| [Web Mail](https://ej2.syncfusion.com/showcase/aspnetmvc/webmail/) | Outlook like user interface to manage your mailbox. | [GitHub code](https://github.com/syncfusion/ej2-showcase-aspnetmvc-outlook) |

‎ej2-asp-core-mvc/common/EJ2_ASP.NETCORE/content-security-policy.md

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
---
2+
layout: post
3+
title: Content Security Policy in ##Platform_Name## Common Control | Syncfusion
4+
description: Learn here all about Content Security Policy in Syncfusion ##Platform_Name## Common control of Syncfusion Essential JS 2 and more.
5+
platform: ej2-asp-core-mvc
6+
control: Common
7+
publishingplatform: ##Platform_Name##
8+
documentation: ug
9+
---
10+
11+
# Content Security Policy
12+
13+
Content Security Policy (CSP) is a security feature implemented by web browsers to protect against attacks such as cross-site scripting (XSS) and data injection. It limits the sources from which content can be loaded on a web page. To enable strict Content Security Policy (CSP), certain browser features are disabled by default. To use Syncfusion controls with strict CSP mode, it is essential to include the following directives:
14+
15+
`nonce` attribute is used in CSP to validate requests and prevent attackers from injecting JavaScript code into a web application.
16+
17+
18+
## Steps to Create and Include the Nonce Attribute in an ASP.NET Core Application
19+
20+
* Generate the `nonce` attribute value by adding the below code in **Program.cs** file.
21+
22+
* Syncfusion material and tailwind built-in themes contain a reference to the Roboto’s external font, which is also blocked. To allow them, add the external font reference to the `style-src` and `font-src` directives in the above meta tag.
23+
24+
{% tabs %}
25+
{% highlight c# tabtitle="Program.cs" %}
26+
27+
using System.Security.Cryptography;
28+
29+
...
30+
app.Use(async (context, next) =>
31+
{
32+
RNGCryptoServiceProvider rng = new RNGCryptoServiceProvider();
33+
byte[] nonceBytes = new byte[32];
34+
rng.GetBytes(nonceBytes);
35+
string nonceValue = Convert.ToBase64String(nonceBytes);
36+
context.Items.Add("ScriptNonce", nonceValue);
37+
context.Response.Headers.Add("Content-Security-Policy", string.Format(
38+
"script-src 'self' 'nonce-{0}' https://cdn.syncfusion.com;" +
39+
"style-src-elem 'self' 'unsafe-inline' https://cdn.syncfusion.com https://fonts.googleapis.com;" +
40+
"font-src 'self' data: https://fonts.gstatic.com;" +
41+
"object-src 'none';", nonceValue));
42+
await next();
43+
});
44+
45+
46+
{% endhighlight %}
47+
{% endtabs %}
48+
49+
* Open **_Layout.cshtml** file and add `nonce` attribute in the client side resources like below,
50+
51+
{% tabs %}
52+
{% highlight c# tabtitle="~/_Layout.cshtml" %}
53+
<head>
54+
...
55+
<!-- Syncfusion ASP.NET Core controls scripts -->
56+
<script src="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/dist/ej2.min.js" nonce="@Context.Items["ScriptNonce"]"></script>
57+
</head>
58+
{% endhighlight %}
59+
{% endtabs %}
60+
61+
* Set `add-nonce` for `ejs-scripts` while registering the script manager at the end of `<body>` of **_Layout.cshtml** file as follows,
62+
63+
{% tabs %}
64+
{% highlight c# tabtitle="~/_Layout.cshtml" %}
65+
<body>
66+
...
67+
<!-- Syncfusion ASP.NET Core Script Manager -->
68+
<ejs-scripts add-nonce="@Context.Items["ScriptNonce"]"></ejs-scripts>
69+
</body>
70+
{% endhighlight %}
71+
{% endtabs %}
72+
73+
N> The `unsafe-eval` directive needs to be added in `script-src` for controls which uses the templates.
74+
75+
* Run the application then see the DOM, `nonce` attribute is added in script tag and it's value hidden for security purpose.
76+
77+
78+

‎ej2-asp-core-mvc/common/EJ2_ASP.NETCORE/security-aspects.md

Lines changed: 0 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -41,64 +41,6 @@ The following list demonstrates the Syncfusion ASP.NET Core controls that are su
4141
* [Tooltip](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Popups.Tooltip.html#Syncfusion_EJ2_Popups_Tooltip_EnableHtmlSanitizer)
4242
* [TreeView](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Navigations.TreeView.html#Syncfusion_EJ2_Navigations_TreeView_EnableHtmlSanitizer)
4343

44-
## Adding Nonce to Script tag in ASP.NET Core
45-
46-
`Nonce` attribute is used in content security policy to find out whether given request is valid or not and it prevents the attackers injecting the javascript code in a web application.
47-
48-
The following steps demonstrates how to create and include the nonce attribute in ASP.NET Core application.
49-
50-
* Generate the `nonce` attribute value by adding the below code in **Program.cs** file.
51-
52-
{% tabs %}
53-
{% highlight c# tabtitle="Program.cs" %}
54-
55-
using System.Security.Cryptography;
56-
57-
...
58-
app.Use(async (context, next) =>
59-
{
60-
RNGCryptoServiceProvider rng = new RNGCryptoServiceProvider();
61-
byte[] nonceBytes = new byte[32];
62-
rng.GetBytes(nonceBytes);
63-
string nonceValue = Convert.ToBase64String(nonceBytes);
64-
context.Items.Add("ScriptNonce", nonceValue);
65-
context.Response.Headers.Add("Content-Security-Policy", string.Format(
66-
"script-src 'self' 'nonce-{0}' cdn.syncfusion.com;" +
67-
"style-src-elem 'self' cdn.syncfusion.com fonts.googleapis.com;" +
68-
"font-src 'self' data: fonts.gstatic.com;" +
69-
"object-src 'none';", nonceValue));
70-
await next();
71-
});
72-
73-
{% endhighlight %}
74-
{% endtabs %}
75-
76-
* Open **_Layout.cshtml** file and add `nonce` attribute in the client side resources like below,
77-
78-
{% tabs %}
79-
{% highlight c# tabtitle="~/_Layout.cshtml" %}
80-
<head>
81-
...
82-
<!-- Syncfusion ASP.NET Core controls scripts -->
83-
<script src="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/dist/ej2.min.js" nonce="@Context.Items["ScriptNonce"]"></script>
84-
</head>
85-
{% endhighlight %}
86-
{% endtabs %}
87-
88-
* Set `add-nonce` for `ejs-scripts` while registering the script manager at the end of `<body>` of **_Layout.cshtml** file as follows,
89-
90-
{% tabs %}
91-
{% highlight c# tabtitle="~/_Layout.cshtml" %}
92-
<body>
93-
...
94-
<!-- Syncfusion ASP.NET Core Script Manager -->
95-
<ejs-scripts add-nonce="@Context.Items["ScriptNonce"]"></ejs-scripts>
96-
</body>
97-
{% endhighlight %}
98-
{% endtabs %}
99-
100-
* Run the application then see the DOM, nonce attribute is added in script tag and it's value hidden for security purpose.
101-
10244
## See also
10345

10446
* [Develop an ASP.NET Core web application securely](https://www.syncfusion.com/blogs/post/10-practices-secure-asp-net-core-mvc-app.aspx)

‎ej2-asp-core-mvc/common/EJ2_ASP.NETCORE/showcase-samples.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,4 +17,5 @@ Syncfusion has a collection of sample applications that demonstrate the use of S
1717
| [Diagram Builder](https://ej2.syncfusion.com/showcase/aspnetcore/diagrambuilder/) | Diagram Builder is a web application which is used to create the diagrams like Flow Chart, process diagrams and more. | [GitHub code](https://github.com/syncfusion/ej2-showcase-aspnetcore-diagram-builder) |
1818
| [Expense Tracker](https://ej2.syncfusion.com/showcase/aspnetcore/expense-tracker/) | Track and visualize your daily expenses with a great UI. | [GitHub code](https://github.com/syncfusion/ej2-showcase-aspnetcore-expensetracker) |
1919
| [Loan Calculator](https://ej2.syncfusion.com/showcase/aspnetcore/loan-calculator/) | Calculate loan payments, interest rates, and amortization schedules. When you are planning for a personal loan or analyzing business financing options, this provides accurate results and helps you make informed financial decisions. | [GitHub code](https://github.com/syncfusion/ej2-showcase-aspnetcore-loan-calculator) |
20-
| [Web Mail](https://ej2.syncfusion.com/showcase/aspnetcore/webmail/) | Outlook like user interface to manage your mailbox. | [GitHub code](https://github.com/syncfusion/ej2-showcase-aspnetcore-outlook) |
20+
| [Web Mail](https://ej2.syncfusion.com/showcase/aspnetcore/webmail/) | Outlook like user interface to manage your mailbox. | [GitHub code](https://github.com/syncfusion/ej2-showcase-aspnetcore-outlook) |
21+

‎ej2-asp-core-mvc/diagram/user-handle.md

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -312,3 +312,27 @@ To show tooltip on mouse over, the [`tooltip`](../api/diagram#tooltip) property
312312
{% endhighlight %}
313313
{% endtabs %}
314314
{% endif %}
315+
316+
### Tooltip support for Fixed User Handle
317+
318+
The diagram provides support to show tooltip when the mouse hovers over any fixed user handle. To show the tooltip on mouse over, the [`tooltip`](../api/diagram#tooltip) property of diagram model needs to be set with the tooltip [`content`](../api/diagram/diagramTooltip/#content) and [`position`](../api/diagram/diagramTooltip/#position) as shown in the following example.
319+
320+
{% if page.publishingplatform == "aspnet-core" %}
321+
322+
{% tabs %}
323+
{% highlight cshtml tabtitle="CSHTML" %}
324+
{% include code-snippet/diagram/interaction/nodefixeduserhandle2/tagHelper %}
325+
{% endhighlight %}
326+
{% highlight c# tabtitle="Node.cs" %}
327+
{% include code-snippet/diagram/interaction/nodefixeduserhandle2/node.cs %}
328+
{% endhighlight %}
329+
{% endtabs %}
330+
331+
{% elsif page.publishingplatform == "aspnet-mvc" %}
332+
333+
{% tabs %}
334+
{% highlight c# tabtitle="Node.cs" %}
335+
{% include code-snippet/diagram/interaction/nodefixeduserhandle2/node.cs %}
336+
{% endhighlight %}
337+
{% endtabs %}
338+
{% endif %}

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

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,4 +70,23 @@ By using [CssClass](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.
7070

7171
{% endif %}
7272

73-
![Asp.Net MVC Floating Action Button control with Hover](images/onhover.png)
73+
![Asp.Net MVC Floating Action Button control with Hover](images/onhover.png)
74+
75+
## Outline customization
76+
77+
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.
78+
79+
{% if page.publishingplatform == "aspnet-mvc" %}
80+
81+
{% tabs %}
82+
{% highlight razor tabtitle="CSHTML" %}
83+
{% include code-snippet/floating-action-button/styles/custom-outline/razor %}
84+
{% endhighlight %}
85+
{% highlight c# tabtitle="Fabstyles.cs" %}
86+
{% include code-snippet/floating-action-button/styles/custom-outline/fabstyles.cs %}
87+
{% endhighlight %}
88+
{% endtabs %}
89+
90+
{% endif %}
91+
92+
![Asp.Net MVC Floating Action Button control with Outline](images/FabOutline.png)

0 commit comments

Comments
 (0)