{"id":22882367,"url":"https://github.com/loresoft/loresoft.blazor.controls","last_synced_at":"2026-02-22T21:13:48.012Z","repository":{"id":35129485,"uuid":"200741357","full_name":"loresoft/LoreSoft.Blazor.Controls","owner":"loresoft","description":"Blazor Controls","archived":false,"fork":false,"pushed_at":"2025-03-31T04:46:11.000Z","size":14912,"stargazers_count":122,"open_issues_count":15,"forks_count":24,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-04-03T11:15:16.881Z","etag":null,"topics":["blazor","blazor-controls","blazor-server","blazor-webassembly","data-grid","date-picker","datetimepicker","typeahead"],"latest_commit_sha":null,"homepage":"https://blazor.loresoft.com/","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/loresoft.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"loresoft"}},"created_at":"2019-08-05T23:13:43.000Z","updated_at":"2025-03-31T04:46:13.000Z","dependencies_parsed_at":"2023-01-15T14:25:26.521Z","dependency_job_id":"ac09a3f8-220f-4e9a-9771-e24792b4c657","html_url":"https://github.com/loresoft/LoreSoft.Blazor.Controls","commit_stats":null,"previous_names":[],"tags_count":51,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/loresoft%2FLoreSoft.Blazor.Controls","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/loresoft%2FLoreSoft.Blazor.Controls/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/loresoft%2FLoreSoft.Blazor.Controls/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/loresoft%2FLoreSoft.Blazor.Controls/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/loresoft","download_url":"https://codeload.github.com/loresoft/LoreSoft.Blazor.Controls/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247819940,"owners_count":21001394,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blazor","blazor-controls","blazor-server","blazor-webassembly","data-grid","date-picker","datetimepicker","typeahead"],"created_at":"2024-12-13T18:17:12.012Z","updated_at":"2026-02-20T06:16:01.033Z","avatar_url":"https://github.com/loresoft.png","language":"C#","readme":"# LoreSoft Blazor Controls\n\nA comprehensive collection of high-quality Blazor components designed to enhance your web applications with rich user interface elements. This library provides everything from data visualization components to form controls, loading indicators, and utility components.\n\n## Overview\n\nThe LoreSoft Blazor Controls project contains a collection of production-ready Blazor user controls that are easy to use, highly customizable, and built with performance in mind. Whether you need data grids, form inputs, loading indicators, or notification systems, this library has you covered.\n\n### Quick Links\n\n* **Demo**: [https://blazor.loresoft.com/](https://blazor.loresoft.com/ \"LoreSoft Blazor Controls\")\n* **NuGet**: [https://nuget.org/packages/LoreSoft.Blazor.Controls](https://nuget.org/packages/LoreSoft.Blazor.Controls \"NuGet Package\")\n* **Source**: [https://github.com/loresoft/LoreSoft.Blazor.Controls](https://github.com/loresoft/LoreSoft.Blazor.Controls \"Project Source\")\n\n## Installing\n\nThe LoreSoft.Blazor.Controls library is available on nuget.org via package name `LoreSoft.Blazor.Controls`.\n\nTo install LoreSoft.Blazor.Controls, run the following command in the Package Manager Console\n\n```shell\nInstall-Package LoreSoft.Blazor.Controls\n```\n\n## Setup\n\nTo use, you need to include the following CSS and JS files in your `index.html` (Blazor WebAssembly) or `_Host.cshtml` (Blazor Server).\n\nIn the head tag add the following CSS.\n\n```html\n\u003clink rel=\"stylesheet\" href=\"_content/LoreSoft.Blazor.Controls/BlazorControls.css\" /\u003e\n```\n\n## Components\n\nThis library provides a comprehensive set of Blazor components organized into the following categories:\n\n### Data Components\n\n#### DataGrid\n\nA powerful data grid component for displaying tabular data with advanced features:\n\n* Column sorting (single and multi-column)\n* Filtering and searching\n* Row selection and grouping\n* Detail views and expandable rows\n* CSV export functionality\n* Customizable column templates\n* Built-in pagination support\n\n#### DataList\n\nA flexible list component for displaying data items using custom templates:\n\n* Query-based filtering\n* Field-based sorting\n* CSV export capabilities\n* Customizable row templates\n* Simple and lightweight alternative to DataGrid\n\n### Form Components\n\n#### DateTimePicker\n\nA comprehensive date and time input component supporting multiple data types:\n\n* Supports `DateTime`, `DateTimeOffset`, `DateOnly`, `TimeOnly`, and `TimeSpan`\n* Multiple picker modes (date, time, datetime)\n* Built-in validation support\n* Keyboard navigation\n* Customizable format strings\n\n#### InputImage\n\nAn image upload component with preview functionality:\n\n* File upload with drag-and-drop support\n* Image preview with automatic resizing\n* Data URL conversion\n* File size validation\n* Configurable maximum file size\n\n#### ToggleSwitch\n\nA modern toggle switch component for boolean values:\n\n* Smooth animations\n* Two-way data binding\n* Form validation support\n* Customizable styling\n* Supports both `bool` and `bool?` types\n\n#### Typeahead\n\nAn advanced autocomplete/search component with rich features:\n\n* Asynchronous search functionality\n* Debounced search input\n* Single and multi-select modes\n* Customizable templates for results and selections\n* Minimum character length configuration\n* Built-in form validation support\n\n### UI Components\n\n#### BusyButton\n\nA button component that shows loading state during operations:\n\n* Automatic disable during busy state\n* Customizable busy indicator\n* Built-in loading text\n* Smooth state transitions\n\n#### Conditional\n\nA utility component for conditional rendering:\n\n* Simple boolean-based content switching\n* Separate templates for true/false states\n* Clean alternative to `@if` statements in templates\n\n#### LoadingBlock\n\nA loading overlay component for indicating progress:\n\n* Overlay or replacement loading modes\n* Customizable loading template\n* Smooth fade transitions\n* Flexible positioning\n\n#### ProgressBar\n\nAn animated progress bar with service-based state management:\n\n* Smooth animations with customizable duration\n* Service-based progress updates\n* Auto-hide on completion\n* Multiple progress operations support\n\n#### Skeleton\n\nA skeleton placeholder component for loading states:\n\n* Multiple shape types (text, rectangle, circle)\n* Customizable dimensions\n* Smooth loading animations\n* Responsive design support\n\n### Notification Components\n\n#### Toaster\n\nA comprehensive toast notification system:\n\n* Multiple notification levels (Info, Success, Warning, Error)\n* Configurable positioning\n* Auto-dismiss with custom timeouts\n* Custom templates and styling\n* Queue management for multiple toasts\n\n### Query Components\n\n#### QueryBuilder\n\nA visual query builder for complex filtering:\n\n* Dynamic field configuration\n* Nested group support\n* Multiple operators per field type\n* Real-time query updates\n* Export to various query formats\n\n### Utility Components\n\n#### Gravatar\n\nA component for displaying Gravatar images:\n\n* Automatic MD5 hash generation\n* Fallback image support\n* Multiple Gravatar modes\n* Configurable ratings and sizes\n\n#### LazyValue\n\nA component for asynchronously loading and displaying values:\n\n* Key-based value loading\n* Custom loading templates\n* Error handling support\n* Caching capabilities\n\n#### LocalTime\n\nA component for displaying dates and times in the user's local timezone:\n\n* Automatic timezone conversion\n* Supports `DateTime` and `DateTimeOffset`\n* Customizable display formats\n* Semantic HTML time elements\n\n#### Repeater\n\nA simple repeater component for rendering collections:\n\n* Custom item templates\n* Empty state templates\n* Clean alternative to `@foreach` loops\n* Strongly typed item context\n\n## Examples\n\n### Typeahead Component\n\nThe Typeahead component provides powerful search and selection capabilities:\n\n### Basic Example\n\nState selection dropdown.  Bind to `Value` property for single selection mode.\n\n```html\n\u003cTypeahead SearchMethod=\"@SearchState\"\n           Items=\"Data.StateList\"\n           @bind-Value=\"@SelectedState\"\n           Placeholder=\"State\"\u003e\n    \u003cSelectedTemplate Context=\"state\"\u003e\n        @state.Name\n    \u003c/SelectedTemplate\u003e\n    \u003cResultTemplate Context=\"state\"\u003e\n        @state.Name\n    \u003c/ResultTemplate\u003e\n\u003c/Typeahead\u003e\n```\n\n```csharp\n@code {\n    public StateLocation SelectedState { get; set; }\n\n    public Task\u003cIEnumerable\u003cStateLocation\u003e\u003e SearchState(string searchText)\n    {\n        var result = Data.StateList\n            .Where(x =\u003e x.Name.ToLower().Contains(searchText.ToLower()))\n            .ToList();\n\n        return Task.FromResult\u003cIEnumerable\u003cStateLocation\u003e\u003e(result);\n    }\n}\n```\n\n### Multiselect Example\n\nWhen you want to be able to select multiple results.  Bind to the `Values` property.  The target property must be type `IList\u003cT\u003e`.\n\n```html\n\u003cTypeahead SearchMethod=\"@SearchPeople\"\n           Items=\"Data.PersonList\"\n           @bind-Values=\"@SelectedPeople\"\n           Placeholder=\"Owners\"\u003e\n    \u003cSelectedTemplate Context=\"person\"\u003e\n        @person.FullName\n    \u003c/SelectedTemplate\u003e\n    \u003cResultTemplate Context=\"person\"\u003e\n        @person.FullName\n    \u003c/ResultTemplate\u003e\n\u003c/Typeahead\u003e\n```\n\n```csharp\n@code {\n    public IList\u003cPerson\u003e SelectedPeople;\n\n    public Task\u003cIEnumerable\u003cPerson\u003e\u003e SearchPeople(string searchText)\n    {\n        var result = Data.PersonList\n            .Where(x =\u003e x.FullName.ToLower().Contains(searchText.ToLower()))\n            .ToList();\n\n        return Task.FromResult\u003cIEnumerable\u003cPerson\u003e\u003e(result);\n    }\n }\n ```\n\n### GitHub Repository Search\n\nUse Octokit to search for a GitHub repository.\n\n```html\n\u003cTypeahead SearchMethod=\"@SearchGithub\"\n           @bind-Value=\"@SelectedRepository\"\n           Placeholder=\"Repository\"\n           MinimumLength=\"3\"\u003e\n    \u003cSelectedTemplate Context=\"repo\"\u003e\n        @repo.FullName\n    \u003c/SelectedTemplate\u003e\n    \u003cResultTemplate Context=\"repo\"\u003e\n        \u003cdiv class=\"github-repository clearfix\"\u003e\n            \u003cdiv class=\"github-avatar\"\u003e\u003cimg src=\"@repo.Owner.AvatarUrl\"\u003e\u003c/div\u003e\n            \u003cdiv class=\"github-meta\"\u003e\n                \u003cdiv class=\"github-title\"\u003e@repo.FullName\u003c/div\u003e\n                \u003cdiv class=\"github-description\"\u003e@repo.Description\u003c/div\u003e\n                \u003cdiv class=\"github-statistics\"\u003e\n                    \u003cdiv class=\"github-forks\"\u003e\u003ci class=\"fa fa-flash\"\u003e\u003c/i\u003e @repo.ForksCount Forks\u003c/div\u003e\n                    \u003cdiv class=\"github-stargazers\"\u003e\u003ci class=\"fa fa-star\"\u003e\u003c/i\u003e @repo.StargazersCount Stars\u003c/div\u003e\n                    \u003cdiv class=\"github-watchers\"\u003e\u003ci class=\"fa fa-eye\"\u003e\u003c/i\u003e @repo.SubscribersCount Watchers\u003c/div\u003e\n                \u003c/div\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/ResultTemplate\u003e\n\u003c/Typeahead\u003e\n```\n\n```csharp\n@inject IGitHubClient GitHubClient;\n\n@code {\n    public Repository SelectedRepository { get; set; }\n\n    public async Task\u003cIEnumerable\u003cRepository\u003e\u003e SearchGithub(string searchText)\n    {\n        var request = new SearchRepositoriesRequest(searchText);\n        var result = await GitHubClient.Search.SearchRepo(request);\n\n        return result.Items;\n    }\n}\n```\n","funding_links":["https://github.com/sponsors/loresoft"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Floresoft%2Floresoft.blazor.controls","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Floresoft%2Floresoft.blazor.controls","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Floresoft%2Floresoft.blazor.controls/lists"}