I'm not getting what I want
Hi,
I would like to create a dashboard layout for a app I want to build that has features like this example
https://demo.adminkit.io/index.html
left menu column collapsible with pancake icon, of the menu items on the left some are collapsible top menu as in example, dark/light mode, of course all links are rendered in the main section
Does anyone ever made one like this?
Could someone point me out which syncfusion components I'm going to need and how they are nested to get a page like this?
Hi Beunens,
Greetings from Syncfusion support.
We understand that you want to achieve the output shown in the shared output link. You can achieve this layout structure by using our Syncfusion Sidebar, Dashboard Layout, Dropdowns, TreeView, Badge, and Avatar components.
|
S.NO |
Component |
Component details |
Links |
|
1 |
|
Dashboard Layout component : our Blazor Dashboard is a grid-structured layout component that helps create static and dynamic dashboard layouts with panels. Dashboard panels are the basic building blocks of a dashboard and can be added programmatically or dynamically at runtime. The panels hold UI components and allow resizing, reordering, dragging and dropping, removing, and adding. Easily place components at the desired positions within the grid layout. Refer the below links to know more about Dashboard component behavior. |
Documentation : https://blazor.syncfusion.com/documentation/dashboard-layout/getting-started API : https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#properties Demo : https://blazor.syncfusion.com/demos/dashboard-layout/overview?theme=fluent |
|
2 |
|
Sidebar: Sidebar is an expandable and collapsible component that typically acts as a side container in which to place primary or secondary content alongside the main content. It provides flexible options that can be shown or hidden based on user interactions. Any type of HTML content or component can be placed in the Blazor Sidebar control for quick access and for easy navigation, like quick references, menus, lists, and tree views. |
Documentation : https://blazor.syncfusion.com/documentation/sidebar/getting-started API : https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfSidebar.html#properties Demo : https://blazor.syncfusion.com/demos/sidebar/panel-with-responsive?theme=fluent |
|
3 |
|
TreeView : TreeView is a UI component that displays hierarchical data, such as a table of contents, code examples, and file directories, in a tree structure. TreeView is feature-rich, supporting data binding, loading on demand, multiple selection, drag and drop, node editing, checkboxes, templates, and more in both Blazor WebAssembly (WASM) and Blazor Server apps. |
Documentation : https://blazor.syncfusion.com/documentation/treeview/getting-started API : https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#properties Demo : https://blazor.syncfusion.com/demos/treeview/default-functionalities?theme=fluent |
|
4 |
|
Avatar: The avatar is developed in pure CSS which is used to represents the profile picture or initials or icons in presentable way. |
Documentation : https://blazor.syncfusion.com/documentation/avatar/getting-started Demo : https://blazor.syncfusion.com/demos/avatar/defaultfunctionalities?theme=fluent |
|
5 |
|
Badge: The Badge is a component which is developed in pure CSS and designed in em relative units, so that badge will always be in relevant to the parent and makes the badge super easy to customize. |
Documentation : https://blazor.syncfusion.com/documentation/badge/getting-started Demo : https://blazor.syncfusion.com/demos/badge/defaultfunctionalities?theme=fluent |
|
6 |
|
Dropdown Menu : Dropdown Menu is a graphical user interface component that lets users choose from a list of actions that can be triggered. It has built-in support for icons and their positioning, various sizes, separators, RTL, and UI customization. |
Documentation : https://blazor.syncfusion.com/documentation/drop-down-menu/getting-started Demo : https://blazor.syncfusion.com/demos/buttons/dropdown-menu?theme=fluent |
Please check out the above shared details and get back to us if you need any further assistance.
Regards,
Leo Lavanya Dhanaraj
- 1 Reply
- 2 Participants
-
BF Beunens Filip
- Jun 9, 2023 12:30 PM UTC
- Jun 12, 2023 01:21 PM UTC