UMS.Razor 🪒
Welcome to UMS.Razor!
This is a set of components that are used for delevoping of software at inLogic A/S. The UMS.Razor is based on bootstrap so we need to include that in our App.razor. There's also a javascript that need to be registred in program.cs, but enough about that.
Let's get started! 😎
Installation guide 🔧
First we need to need to update our App.razor
App.razor<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.min.css" rel="stylesheet">
<link href="_content/UMS.Razor/Datepicker.css" rel="stylesheet" />
<link href="_content/UMS.Razor/Datepicker-dark.css" rel="stylesheet" />
</head>Add the two links to the head element.
App.razor<body>
<Routes @rendermode="InteractiveServer" />
<script src="_framework/blazor.web.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</body>Add the two scripts to the end of the body tag.
Program.csvar builder = WebApplication.CreateBuilder(args);
builder.Services.AddScoped<UMS.Razor.JS>();Here we add the UMS.Razor.JS class as a scoped service.
_Imports.razor@using UMS.Razor
@using UMS.Razor.Toast
@using UMS.Razor.Chart
@using UMS.Razor.ConfirmDialog
@using UMS.Razor.ThemeSwitcher
@using UMS.Razor.Modal
@using UMS.Razor.AutoComplete
@using UMS.Razor.FileUpload
@using UMS.Razor.Datepicker
@using UMS.Razor.LoadingIndicatorAdd to UMS.Razor to _Imports.razor otherwise you will need to write the whole namespace.