Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/loresoft/loresoft.blazor.controls
Blazor Controls
https://github.com/loresoft/loresoft.blazor.controls
blazor blazor-controls blazor-server blazor-webassembly data-grid date-picker datetimepicker typeahead
Last synced: 3 days ago
JSON representation
Blazor Controls
- Host: GitHub
- URL: https://github.com/loresoft/loresoft.blazor.controls
- Owner: loresoft
- License: mit
- Created: 2019-08-05T23:13:43.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2025-01-10T08:35:24.000Z (11 days ago)
- Last Synced: 2025-01-13T01:28:48.951Z (8 days ago)
- Topics: blazor, blazor-controls, blazor-server, blazor-webassembly, data-grid, date-picker, datetimepicker, typeahead
- Language: C#
- Homepage: https://blazor.loresoft.com/
- Size: 14.2 MB
- Stars: 120
- Watchers: 10
- Forks: 24
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
## Overview
The LoreSoft Blazor Controls project contains a collection of Blazor user controls.
* Demo: [https://blazor.loresoft.com/](https://blazor.loresoft.com/ "LoreSoft Blazor Controls")
* NuGet: [https://nuget.org/packages/LoreSoft.Blazor.Controls](https://nuget.org/packages/LoreSoft.Blazor.Controls "NuGet Package")
* Source: [https://github.com/loresoft/LoreSoft.Blazor.Controls](https://github.com/loresoft/LoreSoft.Blazor.Controls "Project Source")
## Installing
The LoreSoft.Blazor.Controls library is available on nuget.org via package name `LoreSoft.Blazor.Controls`.
To install LoreSoft.Blazor.Controls, run the following command in the Package Manager Console
```shell
Install-Package LoreSoft.Blazor.Controls
```
## Setup
To use, you need to include the following CSS and JS files in your `index.html` (Blazor WebAssembly) or `_Host.cshtml` (Blazor Server).
In the head tag add the following CSS.
```html
```
## Typeahead Features
* Searching data by supplying a search function
* Template for search result, selected value, and footer
* Debounce support for smoother search
* Character limit before searching
* Multiselect support
* Built in form validation support
## Typeahead Properties
### Required
* **Value** - Bind to `Value` in single selection mode. Mutually exclusive to `Values` property.
* **Values** - Bind to `Values` in multiple selection mode. Mutually exclusive to `Value` property.
* **SearchMethod** - The method used to return search result
### Optional
* **AllowClear** - Allow the selected value to be cleared
* **ConvertMethod** - The method used to convert search result type to the value type
* **Debounce** - Time to wait, in milliseconds, after last key press before starting a search
* **Items** - The initial list of items to show when there isn't any search text
* **MinimumLength** - Minimum number of characters before starting a search
* **Placeholder** - The placeholder text to show when nothing is selected
### Templates
* **ResultTemplate** - User defined template for displaying a result in the results list
* **SelectedTemplate** - User defined template for displaying the selected item(s)
* **NoRecordsTemplate** - Template for when no items are found
* **FooterTemplate** - Template displayed at the end of the results list
* **LoadingTemplate** - Template displayed while searching
## Typeahead Examples
### Basic Example
State selection dropdown. Bind to `Value` property for single selection mode.
```html
@state.Name
@state.Name
```
```csharp
@code {
public StateLocation SelectedState { get; set; }
public Task> SearchState(string searchText)
{
var result = Data.StateList
.Where(x => x.Name.ToLower().Contains(searchText.ToLower()))
.ToList();
return Task.FromResult>(result);
}
}
```
### Multiselect Example
When you want to be able to select multiple results. Bind to the `Values` property. The target property must be type `IList`.
```html
@person.FullName
@person.FullName
```
```csharp
@code {
public IList SelectedPeople;
public Task> SearchPeople(string searchText)
{
var result = Data.PersonList
.Where(x => x.FullName.ToLower().Contains(searchText.ToLower()))
.ToList();
return Task.FromResult>(result);
}
}
```
### GitHub Repository Search
Use Octokit to search for a GitHub repository.
```html
@repo.FullName
```
```csharp
@inject IGitHubClient GitHubClient;
@code {
public Repository SelectedRepository { get; set; }
public async Task> SearchGithub(string searchText)
{
var request = new SearchRepositoriesRequest(searchText);
var result = await GitHubClient.Search.SearchRepo(request);
return result.Items;
}
}
```