Mint.Software.Blazor.Chart.Pack by: Mint.Software.Blazor.Chart

# Mint.Software.Blazor.Chart Blazor library that wraps Chart.js ## Usage ### Assets Before you can start creating a chart, you have to add some static assets to your project. In your `_Host.cshtml` (server-side) or in your `index.html` (client-side) add the following lines to the `body` tag **after** the `_framework` reference. ```html <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script> <!-- This is the glue between Blazor and Chart.js --> <script src="_content/ChartJs.Blazor.Fork/ChartJsBlazorInterop.js"></script> ``` If you are using a time scale (`TimeAxis`), you also need to include Moment.js **before** including Chart.js. ```html <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script> ```njs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script> ### Imports Now add a reference to `ChartJs.Blazor` in your `_Imports.razor`. ```csharp @using Mint.Software.Blazor.Chart; ``` Other commonly used namespaces which you might want to import globally are: - `@using Mint.Software.Blazor.Chart.Common` - `@using Mint.Software.Blazor.Chart.Common.Axes` - `@using Mint.Software.Blazor.Chart.Common.Axes.Ticks` - `@using Mint.Software.Blazor.Chart.Common.Enums` - `@using Mint.Software.Blazor.Chart.Common.Handlers` - `@using Mint.Software.Blazor.Chart.Common.Time` - `@using Mint.Software.Blazor.Chart.Util` - `@using Mint.Software.Blazor.Chart.Interop` ### Chart ```csharp private PieConfig _config; protected override void OnInitialized() { _config = new PieConfig { Options = new PieOptions { Responsive = true, Title = new OptionsTitle { Display = true, Text = "ChartJs.Blazor Pie Chart" } } }; foreach (string color in new[] { "Red", "Yellow", "Green", "Blue" }) { _config.Data.Labels.Add(color); } PieDataset<int> dataset = new PieDataset<int>(new[] { 6, 5, 3, 7 }) { BackgroundColor = new[] { ColorUtil.ColorHexString(255, 99, 132), // Slice 1 aka "Red" ColorUtil.ColorHexString(255, 205, 86), // Slice 2 aka "Yellow" ColorUtil.ColorHexString(75, 192, 192), // Slice 3 aka "Green" ColorUtil.ColorHexString(54, 162, 235), // Slice 4 aka "Blue" } }; _config.Data.Datasets.Add(dataset); } ```

Mint.Software.Blazor.Grid by: Mint.Software.Blazor.Grid

Mint.Software.Blazor.Grid How to use? 1. In _Host.cshtml <link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script> <script src="_content/Mint.Software.Blazor.Grid/gridUtil.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js"></script> 2. In page @using Mint.Software.Blazor.Grid 3. In Startup services.AddDataGridServices();

Mint.Software.Blazor.Grid.Ext by: Mint.Software.Blazor.Grid.Ext

Mint.Software.Blazor.Grid.Ext How to use? 1. In _Host.cshtml <link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script> <script src="_content/Mint.Software.Blazor.Grid.Ext/gridUtil.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js"></script> 2. In page @using Mint.Software.Blazor.Grid.Ext 3. In Startup services.AddDataGridServices();

Mint.Software.Blazor.InputMask.Phone by: Mint.Software.Blazor.InputMask.Phone

Package Description

Mint.Software.Blazor.Keyboard by: Mint.Software.Blazor.Keyboard

Package Description

Mint.Software.Blazor.Loader by: Mint.Software.Blazor.Loader

Package Description

Mint.Software.Blazor.LocalizationFix by: Mint.Software.Blazor.LocalizationFix

Package Description

Mint.Software.Blazor.Modal by: Mint.Software.Blazor.Modal

# Mint.Software.Blazor.Modal **How to use:** 1. add to startup `services.AddBlazoredModal();` 2. add to _Import `@using Mint.Software.Blazor.Modal` 3. add to Layout ` <BlazoredModal/>` **To call on page** 1. add ` [Inject] IModalService Modal { get; set; }` 2. show `Modal.Show<{{RazorComponent}}>({{params}});`

Mint.Software.Blazor.PhoneJS.Pack by: Mint.Software.Blazor.PhoneJS

# Mint.Software.Blazor.PhoneJS How to use? 1. In _Host.cshtml <!-- Quill library --> <script src="_content/Mint.Software.Blazor.PhoneJS.Pack/js/IMask.js"></script> <script src="_content/Mint.Software.Blazor.PhoneJS.Pack/js/main.js"></script> 2. In page ` @using Mint.Software.Blazor.PhoneJS ` InputPhoneMask @bind-CurrentMaskValue="phone2" Mask="+{48} 000 000-00-00"/> <div class="admin-login-keys-container"> @for (int i = 1; i < 11; i++) { <div class="keyboard-button admin-login-key-width"> @{int key = i % 10; } <div class="keyboard-key" @onclick="()=> { OnKeyClick(key.ToString()); }"> @key </div> </div> } </div> @code{ private string phone2; protected void ClearLastCharacter() { if (!string.IsNullOrEmpty(phone2)) { phone2 = phone2.Remove(phone2.Length - 1); } } protected void OnKeyClick(string key) { phone2 += key; } }

Mint.Software.Blazor.ReconnectionHandler by: Mint.Software.Blazor.ReconnectionHandler

Package Description

Mint.Software.Blazor.RippleClick by: Mint.Software.Blazor.RippleClick

In Host file add '@Html.AddRippleClick()'

Mint.Software.Blazor.TextEditor.Pack by: Ksenia

# Mint.Software.Blazor.TextEditor How to use? 1. In _Host.cshtml <!-- Quill stylesheet --> <link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet"> <link href="//cdn.quilljs.com/1.3.6/quill.bubble.css" rel="stylesheet"> <!-- Quill library --> <script src="_content/Mint.Software.Blazor.TextEditor.Pack/quill.js"></script> <script src="_content/Blazored.TextEditor/quill-blot-formatter.min.js"></script> <script src="_content/Blazored.TextEditor/Blazored-BlazorQuill.js"></script> 2. In page ` @using Mint.Software.Blazor.TextEditor` ` <TextEditor @ref="@QuillHtml"> <ToolbarContent> <select class="ql-header"> <option selected=""></option> <option value="1"></option> <option value="2"></option> <option value="3"></option> <option value="4"></option> <option value="5"></option> </select> <span class="ql-formats"> <button class="ql-bold"></button> <button class="ql-italic"></button> <button class="ql-underline"></button> <button class="ql-strike"></button> </span> <span class="ql-formats"> <select class="ql-color"></select> <select class="ql-background"></select> </span> <span class="ql-formats"> <button class="ql-list" value="ordered"></button> <button class="ql-list" value="bullet"></button> </span> <span class="ql-formats"> <button class="ql-link"></button> </span> </ToolbarContent> <EditorContent> <h4>This Toolbar works with HTML</h4> <a href="http://BlazorHelpWebsite.com"> BlazorHelpWebsite.com </a> </EditorContent> </TextEditor> @code { TextEditor QuillHtml; }`

Mint.Software.Blazor.Toast by: Mint.Software.Blazor.Toast

@inject IToastService ToastService; ToastService.ShowError("Hello", "Test");

Mint.Software.Blazor.TreeView.Pack by: Ksenia =)

Mint.Software.Blazor.TreeView To use: add in _Imports.razor @using Mint.Software.Blazor.TreeView

Mint.Software.EuSignCpWrapper by: Mint.Software.EuSignCpWrapper

Package Description

Mint.Software.EuSignCpWrapper.Entities by: Mint.Software.EuSignCpWrapper.Entities

Package Description

Mint.Software.HardwareId by: Mint.Software.HardwareId

Hardware Id generator for licenses.

Mint.Software.License by: Mint.Software.License

Package Description

Mint.Software.License.Validator by: Mint.Software.License.Validator

Description

Mint.Software.MintERP.Models by: Mint.Software.MintERP.Models

Description