ADMINLTE for Blazor is a collection of reusable components, with which you can easily develop digital services as a designer or developer. Think of buttons, form elements and page templates. This project adapts ADMINLTE 3 so the components can be used from .NET Core Blazor.
The project is in early stage currently, but expanded almost daily. Feel free to follow the project and receive updates as they arrive.
Start a new Blazor APP and simply install the nuget package.
Not yet published.... t.b.a.
Depending on running WASM or Server, change your index.html or _Host.cshtml.
Contents from the Blazor Component Library are served from : _content/Blazor.AdminLte
As a starting point:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Blazor.AdminLte.Site</title>
<base href="~/" />
<!-- Google Font: Source Sans Pro -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
<!-- Font Awesome Icons -->
<link rel="stylesheet" href="_content/Blazor.AdminLte/plugins/fontawesome-free/css/all.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="_content/Blazor.AdminLte/dist/css/adminlte.min.css">
<link href="css/site.css" rel="stylesheet" />
</head>
<body class="hold-transition sidebar-mini">
<div class="wrapper">
<app>
<component type="typeof(App)" render-mode="ServerPrerendered" />
</app>
<div id="blazor-error-ui">
<environment include="Staging,Production">
An error has occurred. This application may no longer respond until reloaded.
</environment>
<environment include="Development">
An unhandled exception has occurred. See browser dev tools for details.
</environment>
<a href="" class="reload">Reload</a>
<a class="dismiss">🗙</a>
</div>
</div>
<script src="_framework/blazor.server.js"></script>
<!-- jQuery -->
<script src="_content/Blazor.AdminLte/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="_content/Blazor.AdminLte/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="_content/Blazor.AdminLte/dist/js/adminlte.min.js"></script>
</body>
</html>The example includes markup that shows how to setup your starter page in Blazor.
@inherits LayoutComponentBase
@inject NavigationManager NavigationManager
<NavBar>
<NavBarLeft>
<NavBarMenuItem Link="/">Home</NavBarMenuItem>
<NavBarMenuItem>Content</NavBarMenuItem><!-- defaults to # -->
</NavBarLeft>
<NavBarSearch></NavBarSearch>
<NavBarRight>
<NavBarDropDown>
<NavBarBadge Color="Color.Danger" Icon="far fa-comments">3</NavBarBadge>
<NavBarDropDownMenu>
<NavBarDropDownMenuItem>
<UserMessage DateTime="DateTime.Now.AddMinutes(-2)" ProfilePicture="dist/img/user7-128x128.jpg" Icon="fas fa-star">
<UserName>Patricia Maundrell</UserName>
<Message>Follow up</Message>
</UserMessage>
</NavBarDropDownMenuItem>
<DropdownDivider />
<NavBarDropDownMenuItem>
<UserMessage DateTime="DateTime.Now.AddHours(-4)" ProfilePicture="dist/img/user1-128x128.jpg" Icon="fas fa-star" IconColor="Color.Warning">
<UserName>Brad Diesel</UserName>
<Message>Call me whenever you can...</Message>
</UserMessage>
</NavBarDropDownMenuItem>
<DropdownDivider />
<NavBarDropDownMenuItem>
<UserMessage DateTime="DateTime.Now.AddDays(-8)" ProfilePicture="dist/img/user8-128x128.jpg" Icon="fas fa-star" IconColor="Color.Danger">
<UserName>John Pierce</UserName>
<Message>I got your message bro</Message>
</UserMessage>
</NavBarDropDownMenuItem>
<DropdownDivider />
<NavBarDropDownMenuItem>
<UserMessage DateTime="DateTime.Now.AddDays(-31)" ProfilePicture="dist/img/user3-128x128.jpg" Icon="fas fa-star">
<UserName>Nora Silvester</UserName>
<Message>The subject goes here</Message>
</UserMessage>
</NavBarDropDownMenuItem>
<DropdownDivider />
<DropdownFooter OnClick="SeeAllMessages">See All Messages</DropdownFooter>
</NavBarDropDownMenu>
</NavBarDropDown>
<NavBarDropDown>
<NavBarBadge Color="Color.Warning" Icon="far fa-bell">15</NavBarBadge>
<NavBarDropDownMenu>
<DropdownHeader>15 Notifications</DropdownHeader>
<DropdownDivider></DropdownDivider>
<NotificationMessage DateTime="@DateTime.Now.AddMinutes(-3)" Icon="fas fa-envelope mr-2">
<Message>4 new messages</Message>
</NotificationMessage>
<DropdownDivider></DropdownDivider>
<NotificationMessage DateTime="@DateTime.Now.AddHours(-12)" Icon="fas fa-users mr-2">
<Message>8 friend requests</Message>
</NotificationMessage>
<DropdownDivider></DropdownDivider>
<NotificationMessage DateTime="@DateTime.Now.AddDays(-2)" Icon="fas fa-file mr-2">
<Message>3 new reports</Message>
</NotificationMessage>
<DropdownDivider></DropdownDivider>
<DropdownFooter OnClick="SeeAllNotifications">See All Notifications</DropdownFooter>
</NavBarDropDownMenu>
</NavBarDropDown>
<NavBarSideBarControl></NavBarSideBarControl>
</NavBarRight>
</NavBar>
<SideBarContainer>
<BrandLogo Link="https://adminlte.io/" Logo="dist/img/AdminLTELogo.png">AdminLTE 3</BrandLogo>
<SideBar>
<!-- Sidebar user panel (optional) -->
<SideBarUserPanel UserImage="dist/img/user2-160x160.jpg">Alexander Pierce</SideBarUserPanel>
<SideBarSearch></SideBarSearch>
<SideBarMenu>
<SideBarTreeView MenuState="MenuState.Open" Icon="fas fa-tachometer-alt">
<Title>Starter Pages</Title>
<Items>
<SideBarMenuItem Icon="far fa-circle" NavLinkState="NavLinkState.Active">
Active Page
</SideBarMenuItem>
<SideBarMenuItem Icon="far fa-circle">
Inactive Page
</SideBarMenuItem>
</Items>
</SideBarTreeView>
<SideBarMenuItem Icon="fas fa-th">
Simple Link
<span class="right badge badge-danger">New</span>
</SideBarMenuItem>
</SideBarMenu>
</SideBar>
</SideBarContainer>
<ContentWrapper>
@Body
</ContentWrapper>
<ControlSideBar>Hello World!</ControlSideBar>
<MainFooter>
<Default>
<strong>Copyright © 2014-2020 <a href="https://adminlte.io">AdminLTE.io</a>.</strong> All rights reserved.
</Default>
<Right>
Blazorized by Sjef van Leeuwen
</Right>
</MainFooter>
@code {
private void SeeAllMessages(MouseEventArgs args)
{
NavigationManager.NavigateTo("see-all-messages");
}
private void SeeAllNotifications(MouseEventArgs args)
{
NavigationManager.NavigateTo("see-all-notifications");
}
}This renders:
