{"id":13807970,"url":"https://github.com/MarvinKlein1508/BlazorInputTags","last_synced_at":"2025-05-14T02:31:06.467Z","repository":{"id":153832620,"uuid":"614441362","full_name":"MarvinKlein1508/BlazorInputTags","owner":"MarvinKlein1508","description":"A simple to use blazor component for both Blazor Server and WebAssembly which adds a basic tag editor to your app.","archived":false,"fork":false,"pushed_at":"2024-11-14T13:32:55.000Z","size":8690,"stargazers_count":11,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-11-14T14:06:41.357Z","etag":null,"topics":["blazor","blazor-server","blazor-webassembly","forms"],"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/MarvinKlein1508.png","metadata":{"files":{"readme":"README.MD","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.MD","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}},"created_at":"2023-03-15T15:35:11.000Z","updated_at":"2024-11-14T13:30:08.000Z","dependencies_parsed_at":"2024-06-21T17:30:50.232Z","dependency_job_id":null,"html_url":"https://github.com/MarvinKlein1508/BlazorInputTags","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MarvinKlein1508%2FBlazorInputTags","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MarvinKlein1508%2FBlazorInputTags/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MarvinKlein1508%2FBlazorInputTags/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MarvinKlein1508%2FBlazorInputTags/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MarvinKlein1508","download_url":"https://codeload.github.com/MarvinKlein1508/BlazorInputTags/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225273206,"owners_count":17448069,"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-server","blazor-webassembly","forms"],"created_at":"2024-08-04T01:01:32.977Z","updated_at":"2024-11-19T00:30:29.653Z","avatar_url":"https://github.com/MarvinKlein1508.png","language":"HTML","funding_links":[],"categories":["Libraries \u0026 Extensions"],"sub_categories":["2D/3D Rendering engines"],"readme":"# BlazorInputTags\nA simple to use blazor component for both Blazor Server and WebAssembly which adds a basic tag editor to your app.\n\nSee a live [demo](https://marvinklein1508.github.io/BlazorInputTags/) right here on github.\n\n![BlazorInputTags Demo](images/demo.png)\n\n## Installation\nYou can install from Nuget using the following command:\n\nInstall-Package BlazorInputTags\n\nOr via the Visual Studio package manger.\n\n## Basic usage\nStart by adding the using statement to your `_Imports.razor`\n\n```csharp\n@using BlazorInputTags\n```\n\nYou can either use an existing `List\u003cstring\u003e` and provide it to the component \n```csharp\n\u003cInputTags Value=\"Tags\" /\u003e\n\n@code {\n\tpublic List\u003cstring\u003e Tags { get; set; } = new();\n}\n```\n\nOr you can do manage the list by yourself.\n\n```\n\u003cInputTags OnTagAdded=\"OnTagAddedAsync\" OnTagRemoved=\"OnTagRemovedAsync\"/\u003e\n\n@code {\n\tprivate Task OnTagAddedAsync(string tag) {\n\t\t// Do something with the tag\n\t\treturn Task.CompletedTask;\n\t}\n\n\tprivate Task OnTagRemovedAsync(string tag) {\n\t\t// Do something with the tag\n\t\treturn Task.CompletedTask;\n\t}\n}\n```\n\n## Providing options\nYou can pass an `InputTagOptions` instance to the component to override some core logic and behaviour.\n\n|Option|Type|Default|Description\n|------|----|-------|-----------|\n|WrapperClass|string|blazor-tag-wrapper|Sets the CSS class name for the tag wrapper\n|TagListClass|string|blazor-tag-list|Sets the CSS class name for the tag list|\n|TagClass|string|blazor-tag|Sets the CSS class name for the tag|\n|InputClass|string|blazor-tag-input|Sets the CSS class name for the input field|\n|LabelClass|string|blazor-tag-label|Sets the CSS class name for the label|\n|RemoveButtonTooltip|string|Remove|Sets the text for delete tooltip button|\n|InputPlaceholder|string|Enter tag, add with Enter|Sets the placeholder text for the input field|\n|DisplayLabel|bool|true|Enabling the label of the component|\n|MinLength|int|0|Sets the minimum length for a tag. 0 = no minimum|\n|MaxLength|int|0|Sets the maximum length for a tag. 0 = no maximum|\n\n## Custom validation\n\nThe component provides you with a parameter to do some custom validation before adding the tag to the list. This can be achieved like this:\n```csharp\n\u003cInputTags Value=\"Tags\" ValidateTag=\"ValidateTagAsync\" /\u003e\n\n@code {\n    public List\u003cstring\u003e Tags { get; set; } = new();\n    private List\u003cstring\u003e _notAllowedTags = new()\n    {\n        \"Cat\",\n        \"Horse\",\n        \"Dolphin\"\n    };\n\n    private Task\u003cbool\u003e ValidateTagAsync(string tag)\n    {\n        bool result = !_notAllowedTags.Any(x =\u003e x.Equals(tag, StringComparison.OrdinalIgnoreCase));\n        return Task.FromResult(result);\n    }\n}\n```\n\n\n\n**Note: When changing the class names to something different, you'll need to add the CSS by yourself.** \n\n## Customizing design\nThe component uses custom CSS variables which can be overwritten within any public CSS file.\n\n|Variable|Affects|\n|--------|-------|\n|--blazor-tag-wrapper-background-color|.blazor-tag-wrapper|\n|--blazor-tag-wrapper-border-radius|.blazor-tag-wrapper|\n|--blazor-tag-wrapper-border|.blazor-tag-wrapper|\n|--blazor-tag-background-color|.blazor-tag|\n|--blazor-tag-padding|.blazor-tag|\n|--blazor-tag-margin|.blazor-tag|\n|--blazor-tag-border-radius|.blazor-tag|\n|--blazor-tag-button-color|.blazor-tag button|\n|--blazor-tag-button-hover-background-color|.blazor-tag button:hover|\n|--blazor-tag-button-hover-color|.blazor-tag button:hover|\n|--blazor-tag-button-focus-border-color|.blazor-tag button:focus|\n\nIn addition you can overwrite or add any CSS using the corresponding selectors.\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMarvinKlein1508%2FBlazorInputTags","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FMarvinKlein1508%2FBlazorInputTags","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMarvinKlein1508%2FBlazorInputTags/lists"}