Skip to content

Commit 46e6f9b

Browse files
harivenkatesheharivenkateshe
authored
Merge pull request #1 from syncfusion/dev
Added Blazor UI Kit demo
2 parents 38e0a9c + 2ccf861 commit 46e6f9b

File tree

694 files changed

+53264
-2
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

694 files changed

+53264
-2
lines changed

‎README.md

+55-2
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,55 @@
1-
# essential-ui-kit-for-blazor
2-
Free, pre-built, and beautiful Blazor blocks for web applications.
1+
# Essential UI Kit for Blazor
2+
3+
The [Essential UI Kit for Blazor](https://www.syncfusion.com/essential-blazor-ui-kit?utm_source=github&utm_medium=listing&utm_campaign=blazor_ui_kit_github_readme) provides a collection of thoughtfully designed, responsive, and modular user interface blocks that streamline development, enabling the quick creation of high-quality applications. Fully compatible with Tailwind CSS and Bootstrap 5.3, our pre-built blocks offer seamless integration and exceptional performance for dashboards, e-commerce apps, and dynamic web applications.
4+
5+
## Table of Contents
6+
- [Key Features](#key-features)
7+
- [System Requirements](#system-requirements)
8+
- [Supported .NET Core Versions](#supported-net-core-versions)
9+
- [Supported Browsers](#supported-browsers)
10+
- [Supported CSS Frameworks](#supported-css-frameworks)
11+
- [Online Demo](#online-demo)
12+
- [Requesting Blocks & Reporting Bugs](#requesting-blocks--reporting-bugs)
13+
- [License](#license)
14+
- [About Syncfusion](#about-syncfusion)
15+
16+
## Key Features
17+
- Beautifully crafted and visually appealing blocks
18+
- Pre-configured with customizable themes for consistent styling
19+
- Effortless and rapid integration for Blazor application development
20+
- Developer-friendly
21+
- Fully customizable and easy to extend
22+
- Optimized for mobile, tablet, and desktop views
23+
- Suitable for both web applications and website designs
24+
25+
## System Requirements
26+
Refer to the [Blazor system requirements documentation](https://blazor.syncfusion.com/documentation/system-requirements) to learn more about the development environments.
27+
28+
## Supported .NET Core Versions
29+
The blocks are compatible with any active version of .NET Core, as they are primarily developed using HTML, CSS, and C#. Additionally, for using Syncfusion Blazor components, the compatible versions of .NET Core and Syncfusion Blazor components are detailed in this [link](https://blazor.syncfusion.com/documentation/system-requirements#net-sdk) for your reference.
30+
31+
## Supported Browsers
32+
The supported browsers are:
33+
- Google Chrome
34+
- Microsoft Edge
35+
- Safari
36+
- Mozilla Firefox
37+
38+
## Supported CSS Frameworks
39+
The blocks are built using the following CSS frameworks:
40+
1. Tailwind (Light and Dark Modes)
41+
2. Bootstrap 5.3 (Light and Dark Modes)
42+
43+
## Online Demo
44+
To view the designed blocks, please visit our online demo using the link [here](https://blazor.syncfusion.com/essential-ui-kit?utm_source=github&utm_medium=listing&utm_campaign=blazor_ui_kit_github_readme).
45+
46+
## Requesting Blocks & Reporting Bugs
47+
If you'd like to request a new block or report a bug with existing blocks, you can either raise a request directly on GitHub or submit it through our [feedback portal](https://www.syncfusion.com/feedback/blazor-components).
48+
49+
## License
50+
The blocks in the Blazor application are built using HTML, CSS, C#, and Syncfusion Blazor Components. The blocks code is free to use, but licensing for the Syncfusion Blazor Components part is alone required to ensure smooth browsing and viewing of the blocks. For more details about Syncfusion Blazor Components licensing, please refer [here](https://blazor.syncfusion.com/documentation/getting-started/license-key/overview).
51+
52+
## About Syncfusion
53+
Founded in 2001 and headquartered in Research Triangle Park, N.C., Syncfusion has more than 33,000 customers and more than 1 million users, including large financial institutions, Fortune 500 companies, and global IT consultancies.
54+
55+
Today we provide 1900+ controls and frameworks for web ([ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor_ui_kit_github_readme), [ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor_ui_kit_github_readme), [ASP.NET WebForms](https://www.syncfusion.com/jquery/aspnet-web-forms-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor_ui_kit_github_readme), [JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor_ui_kit_github_readme), [Angular](https://www.syncfusion.com/angular-ui-components?utm_source=github&utm_medium=listing&utm_campaign=blazor_ui_kit_github_readme), [React](https://www.syncfusion.com/react-ui-components?utm_source=github&utm_medium=listing&utm_campaign=blazor_ui_kit_github_readme), [Blazor](https://www.syncfusion.com/blazor-components?utm_source=github&utm_medium=listing&utm_campaign=blazor_ui_kit_github_readme), [Vue](https://www.syncfusion.com/vue-ui-components?utm_source=github&utm_medium=listing&utm_campaign=blazor_ui_kit_github_readme), and [Flutter](https://www.syncfusion.com/flutter-widgets?utm_source=github&utm_medium=listing&utm_campaign=blazor_ui_kit_github_readme)), mobile ([Xamarin](https://www.syncfusion.com/xamarin-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor_ui_kit_github_readme), [Flutter](https://www.syncfusion.com/flutter-widgets?utm_source=github&utm_medium=listing&utm_campaign=blazor_ui_kit_github_readme), [UWP](https://www.syncfusion.com/uwp-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor_ui_kit_github_readme), and [JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor_ui_kit_github_readme)), and desktop development ([WinForms](https://www.syncfusion.com/winforms-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor_ui_kit_github_readme), [WPF](https://www.syncfusion.com/products/wpf-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor_ui_kit_github_readme), [UWP](https://www.syncfusion.com/uwp-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor_ui_kit_github_readme), [Flutter](https://www.syncfusion.com/flutter-widgets?utm_source=github&utm_medium=listing&utm_campaign=blazor_ui_kit_github_readme), [WinUI](https://www.syncfusion.com/winui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor_ui_kit_github_readme), and [.NET MAUI](https://www.syncfusion.com/maui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor_ui_kit_github_readme)). We provide ready-to-deploy enterprise software for dashboards, reports, data integration, and big data processing. Many customers have saved millions in licensing fees by deploying our software.

‎UI_Blocks/Components/App.razor

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<meta name="description" content="Build your web apps with 120+ responsive UI Blocks for Blazor, compatible with Tailwind and Bootstrap 5.3.">
7+
<title>Essential UI Kit for Blazor | Syncfusion</title>
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
9+
<base href="/" />
10+
<link rel="stylesheet" href="UI_Blocks.styles.css" />
11+
<link rel="icon" type="image/x-icon" href="syncfusion.ico" />
12+
<link rel=stylesheet href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/github.min.css" />
13+
<style>
14+
body {
15+
margin: 0
16+
}
17+
</style>
18+
<HeadOutlet @rendermode="InteractiveServer" />
19+
</head>
20+
21+
<body>
22+
<Routes @rendermode="InteractiveServer" />
23+
<script src="_framework/blazor.web.js"></script>
24+
<script src="scripts/interop.js"></script>
25+
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
26+
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
27+
</body>
28+
</html>

‎UI_Blocks/Components/Layout/MainLayout.razor

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
@inherits LayoutComponentBase
2+
3+
<div class="main-content">
4+
@Body
5+
</div>
6+
7+
8+

‎UI_Blocks/Components/Layout/MainLayout.razor.css

+95
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
.page {
2+
position: relative;
3+
display: flex;
4+
flex-direction: column;
5+
}
6+
7+
main {
8+
flex: 1;
9+
}
10+
.sidebar {
11+
background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
12+
}
13+
14+
.top-row {
15+
background-color: #f7f7f7;
16+
border-bottom: 1px solid #d6d5d5;
17+
justify-content: flex-end;
18+
height: 3.5rem;
19+
display: flex;
20+
align-items: center;
21+
}
22+
23+
.top-row ::deep a, .top-row ::deep .btn-link {
24+
white-space: nowrap;
25+
margin-left: 1.5rem;
26+
text-decoration: none;
27+
}
28+
29+
.top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
30+
text-decoration: underline;
31+
}
32+
33+
.top-row ::deep a:first-child {
34+
overflow: hidden;
35+
text-overflow: ellipsis;
36+
}
37+
38+
@media (max-width: 640.98px) {
39+
.top-row {
40+
justify-content: space-between;
41+
}
42+
43+
.top-row ::deep a, .top-row ::deep .btn-link {
44+
margin-left: 0;
45+
}
46+
}
47+
48+
@media (min-width: 641px) {
49+
.page {
50+
flex-direction: row;
51+
}
52+
53+
.sidebar {
54+
width: 250px;
55+
height: 100vh;
56+
position: sticky;
57+
top: 0;
58+
}
59+
60+
.top-row {
61+
position: sticky;
62+
top: 0;
63+
z-index: 1;
64+
}
65+
66+
.top-row.auth ::deep a:first-child {
67+
flex: 1;
68+
text-align: right;
69+
width: 0;
70+
}
71+
72+
.top-row, article {
73+
padding-left: 2rem !important;
74+
padding-right: 1.5rem !important;
75+
}
76+
}
77+
78+
#blazor-error-ui {
79+
background: lightyellow;
80+
bottom: 0;
81+
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
82+
display: none;
83+
left: 0;
84+
padding: 0.6rem 1.25rem 0.7rem 1.25rem;
85+
position: fixed;
86+
width: 100%;
87+
z-index: 1000;
88+
}
89+
90+
#blazor-error-ui .dismiss {
91+
cursor: pointer;
92+
position: absolute;
93+
right: 0.75rem;
94+
top: 0.5rem;
95+
}

0 commit comments

Comments
 (0)