{"id":28283752,"url":"https://github.com/mwinkler/blazor.components","last_synced_at":"2025-06-17T09:30:57.337Z","repository":{"id":33354775,"uuid":"152886532","full_name":"mwinkler/Blazor.Components","owner":"mwinkler","description":"UI components for ASP.NET Blazor (Tree, Selector)","archived":false,"fork":false,"pushed_at":"2022-03-16T08:08:06.000Z","size":646,"stargazers_count":52,"open_issues_count":0,"forks_count":10,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-06-16T17:21:54.155Z","etag":null,"topics":["asp-net-core","blazor","bootstrap","components","selector","tree"],"latest_commit_sha":null,"homepage":"","language":"HTML","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/mwinkler.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-10-13T15:35:38.000Z","updated_at":"2025-03-12T12:07:29.000Z","dependencies_parsed_at":"2022-08-09T06:30:41.783Z","dependency_job_id":null,"html_url":"https://github.com/mwinkler/Blazor.Components","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/mwinkler/Blazor.Components","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mwinkler%2FBlazor.Components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mwinkler%2FBlazor.Components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mwinkler%2FBlazor.Components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mwinkler%2FBlazor.Components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mwinkler","download_url":"https://codeload.github.com/mwinkler/Blazor.Components/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mwinkler%2FBlazor.Components/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260328464,"owners_count":22992697,"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":["asp-net-core","blazor","bootstrap","components","selector","tree"],"created_at":"2025-05-21T17:12:26.574Z","updated_at":"2025-06-17T09:30:57.326Z","avatar_url":"https://github.com/mwinkler.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Blazor Components\n\nSome Blazor components I'm working on:\n- [Tree](#tree)\n- [Tag Selector](#tagselector)\n- [Page Panel](#pagepanel)\n\n\u003c!--![Build status](https://hdsonix.visualstudio.com/Blazor%20Components/_apis/build/status/Blazor%20Components-ASP.NET%20Core-CI)--\u003e\n\n\nSee running example: https://blazorcomponents.z6.web.core.windows.net/\n\n## \u003ca name=\"tree\"\u003e\u003c/a\u003eTree\n\n![](https://raw.githubusercontent.com/mwinkler/Blazor.Components/master/doc/tree.png)\n\n```html\n\u003cTree \n    Nodes=\"Items\" \n    SelectedNode=\"SelectedItem\" \n    ChildSelector=\"item =\u003e item.Childs\"\u003e\n    \u003cTitleTemplate\u003e@context.Text\u003c/TitleTemplate\u003e\n\u003c/Tree\u003e\n```\n\n**Client Dependencies**\n```html\n\u003clink rel=\"stylesheet\" href=\"_content/MW.Blazor.Tree/styles.css\" /\u003e\n\u003clink rel=\"stylesheet\" href=\"https://use.fontawesome.com/releases/v5.8.1/css/all.css\" integrity=\"sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf\" crossorigin=\"anonymous\"\u003e\n```\n\n[Code example](https://github.com/mwinkler/Blazor.Components/blob/master/example/ComponentsDemo/TreeSample.razor)  \n[Code example (Lazy Loading)](https://github.com/mwinkler/Blazor.Components/blob/master/example/ComponentsDemo/TreeSampleLazy.razor)  \n[Live Demo](https://blazorcomponents.z6.web.core.windows.net)  \n\n[![NuGet Status](https://img.shields.io/nuget/v/MW.Blazor.Tree.svg?style=flat\u0026max-age=86400)](https://www.nuget.org/packages/MW.Blazor.Tree/)\n\n\n**Features / Tasks**\n- [x] Generic data support\n- [x] Item templating\n- [x] Styling (Bootstrap/Font Awesome)\n- [x] Subtree loading indicator (lazy loading)\n- [x] Disabling selection of nodes\n- [x] Single selection\n- [ ] Multi selection (Checkboxes)\n- [x] Event population (OnSelect, OnExpand, ...)\n- [x] Support EventCallback\u003c\u003e\n\n\n**Change Log**\n- 1.3\n  - Add new property 'OnNodeExpand' to handle lazy loading\n  - Add new style 'NodeLoadingClass' to indicate branch loading\n- 1.2\n  - Added optional property 'NodeDisabled' to evaluate if node is selectable\n  - Added new style class 'NodeTitleSelectableClass' (set if node is selectable)\n  - Added new style class 'NodeTitleDisabledClass' (set if node is disabled)\n- 1.1.8\n  - Add default for 'ChildSelector' property\n- 1.1.7\n  - Pass 'Style' to childs\n- 1.1.6\n  - Update to .NET Core 3.0 (Final)\n- 1.1.4\n  - Update to .NET Core 3.0-preview9\n- 1.1.3\n  - Update to .NET Core 3.0-preview8\n- 1.1.2\n  - Update to .NET Core 3.0-preview6\n- 1.1.1\n  - Convert from razor to blazor lib\n- 1.1.0\n  - Update to .NET Core 3 preview4\n  - Move to namespace ```MW.Blazor```\n  - Implement EventCallback\n  - Breaking Change: SelectedNodes (```IList\u003cTItem\u003e```) -\u003e SelectedNode (```TItem```)\n\n## \u003ca name=\"tagselector\"\u003e\u003c/a\u003eTag Selector\n\n![](https://raw.githubusercontent.com/mwinkler/Blazor.Components/master/doc/tag-selector.gif)\n\n```html\n\u003cTagSelector \n    SelectableTags=\"@Tags\" \n    SelectedTags=\"@Selected\" \n    Filter=\"@((item,term) =\u003e item.Contains(term))\"\u003e\n    \u003cTagTemplate\u003e@context\u003c/TagTemplate\u003e\n\u003c/TagSelector\u003e\n```\n**Client Dependencies**\n```html\n\u003clink rel=\"stylesheet\" href=\"_content/MW.Blazor.TagSelector/styles.css\" /\u003e\n\u003cscript src=\"_content/MW.Blazor.TagSelector/interop.js\"\u003e\u003c/script\u003e\n```\n[Code example](https://github.com/mwinkler/Blazor.Components/blob/master/example/ComponentsDemo/TagSelectorSample.razor)  \n[Live Demo](https://blazorcomponents.z6.web.core.windows.net)  \n\n[![NuGet Status](https://img.shields.io/nuget/v/MW.Blazor.TagSelector.svg?style=flat\u0026max-age=86400)](https://www.nuget.org/packages/MW.Blazor.TagSelector/)\n\n**Features / Tasks**\n- [x] Generic data support\n- [x] Item templating\n- [x] Autocomplete\n- [x] Selection via keys (up/down/enter)\n- [x] Styling (Bootstrap)\n- [ ] Disabling selection of items\n- [x] Event population (OnSelect, OnRemove)\n- [x] Support EventCallback\u003c\u003e\n\n**Change Log**\n- 1.2.3\n  - Update to .NET Core 3.0 (Final)\n- 1.2.1\n  - Update to .NET Core 3.0-preview9\n- 1.2\n  - Add new callback 'OnCreateTag' to catch user input and create tag on the fly ([Issue #1](https://github.com/mwinkler/Blazor.Components/issues/1))\n- 1.1.3\n  - Update to .NET Core 3.0-preview8\n- 1.1.2\n  - Update to .NET Core 3.0-preview6\n- 1.1.1\n  - Convert from razor to blazor lib\n  - Add EventCallback for SelectedTags\n- 1.1.0\n  - Update to .NET Core 3 preview4\n  - Move to namespace ```MW.Blazor```\n  - Implement EventCallback\n\n## \u003ca name=\"pagepanel\"\u003e\u003c/a\u003ePage Panel\n\n![](https://raw.githubusercontent.com/mwinkler/Blazor.Components/master/doc/page-panel.gif)\n\n```html\n\u003cPagePanel PageIndex=\"@CurrentPage\" Style=\"height:250px\"\u003e\n    \u003cPage Widths=\"50%;100%;200%\"\u003e\n        \u003cdiv class=\"d-flex justify-content-center align-items-center h-100 text-white h4\" style=\"background:#00ff90\"\u003e\n            Page 1\n        \u003c/div\u003e\n    \u003c/Page\u003e\n    \u003cPage Widths=\"50%;30%;20%;50%\"\u003e\n        \u003cdiv class=\"d-flex justify-content-center align-items-center h-100 text-white h4\" style=\"background:#1596c7\"\u003e\n            Page 2\n        \u003c/div\u003e\n    \u003c/Page\u003e\n    \u003cPage Widths=\"70%;70%;20%;50%\"\u003e\n        \u003cdiv class=\"d-flex justify-content-center align-items-center h-100 text-white h4\" style=\"background:#b823be\"\u003e\n            Page 3\n        \u003c/div\u003e\n    \u003c/Page\u003e\n    \u003cPage Widths=\"60%;60%;60%;100%\"\u003e\n        \u003cdiv class=\"d-flex justify-content-center align-items-center h-100 text-white h4\" style=\"background:#ff6a00\"\u003e\n            Page 4\n        \u003c/div\u003e\n    \u003c/Page\u003e\n\u003c/PagePanel\u003e\n\n\u003cbutton onclick=\"@(() =\u003e CurrentPage--)\"\u003e\u003c\u003c/button\u003e\n@CurrentPage\n\u003cbutton onclick=\"@(() =\u003e CurrentPage++)\"\u003e\u003e\u003c/button\u003e\n\n\n@functions { int CurrentPage { get; set; } }\n```\n\n**Client Dependencies**\n```html\n\u003clink rel=\"stylesheet\" href=\"_content/MW.Blazor.PagePanel/styles.css\" /\u003e\n```\n[Code example](https://github.com/mwinkler/Blazor.Components/blob/master/example/ComponentsDemo/PagePanelSample.razor)  \n[Live Demo](https://blazorcomponents.z6.web.core.windows.net)  \n\n[![NuGet Status](https://img.shields.io/nuget/v/MW.Blazor.PagePanel.svg?style=flat\u0026max-age=86400)](https://www.nuget.org/packages/MW.Blazor.PagePanel/)\n\n**Features / Tasks**\n- [x] Multiple pages on same page\n- [ ] Defaults for 'Widths' property\n- [ ] Property for transition time\n- [ ] Simplify 'Widths' property\n\n**Change Log**\n- 1.1.6\n  - Update to .NET Core 3.0 (Final)\n- 1.1.4\n  - Update to .NET Core 3.0-preview9\n- 1.1.3\n  - Update to .NET Core 3.0-preview8\n- 1.1.2\n  - Update to .NET Core 3.0-preview6\n- 1.1.1\n  - Convert from razor to blazor lib\n- 1.1.0\n  - Update to .NET Core 3 preview4\n  - Move to namespace ```MW.Blazor```\n  - Use CascadeValue to provide current page index\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmwinkler%2Fblazor.components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmwinkler%2Fblazor.components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmwinkler%2Fblazor.components/lists"}