{"id":19976618,"url":"https://github.com/erossini/blazorsegmentcomponent","last_synced_at":"2025-10-07T16:11:15.380Z","repository":{"id":150093005,"uuid":"416655166","full_name":"erossini/BlazorSegmentComponent","owner":"erossini","description":"A Segment component for Blazor Web Assembly and Blazor Server","archived":false,"fork":false,"pushed_at":"2022-01-26T10:10:51.000Z","size":206,"stargazers_count":3,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-01T04:11:39.826Z","etag":null,"topics":["blazor","blazor-component","blazor-server","blazor-webassembly"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/erossini.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":"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":"erossini"}},"created_at":"2021-10-13T08:38:50.000Z","updated_at":"2024-02-14T11:52:13.000Z","dependencies_parsed_at":"2023-06-05T08:00:19.660Z","dependency_job_id":null,"html_url":"https://github.com/erossini/BlazorSegmentComponent","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/erossini/BlazorSegmentComponent","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erossini%2FBlazorSegmentComponent","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erossini%2FBlazorSegmentComponent/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erossini%2FBlazorSegmentComponent/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erossini%2FBlazorSegmentComponent/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/erossini","download_url":"https://codeload.github.com/erossini/BlazorSegmentComponent/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erossini%2FBlazorSegmentComponent/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278804014,"owners_count":26048813,"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","status":"online","status_checked_at":"2025-10-07T02:00:06.786Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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-component","blazor-server","blazor-webassembly"],"created_at":"2024-11-13T03:24:44.994Z","updated_at":"2025-10-07T16:11:15.338Z","avatar_url":"https://github.com/erossini.png","language":"CSS","funding_links":["https://github.com/sponsors/erossini"],"categories":[],"sub_categories":[],"readme":"# Blazor Segment Component\nThis is a **Segment component** for [Blazor Web Assembly](https://www.puresourcecode.com/tag/blazor-webassembly/) and [Blazor Server](https://www.puresourcecode.com/tag/blazor-server/). The full explanation of the source code is on [PureSourceCode.com](https://www.puresourcecode.com/dotnet/blazor/segment-control-for-blazor/). Please leave your comment or question and use my [forum](https://www.puresourcecode.com/forum/). Please subscribe my [YouTube channel](https://www.youtube.com/channel/UC2jeteqpm3sUDqQpKGqpCLg?sub_confirmation=1).\n\n## How to use it\nFirst, add the NuGet package in your project. The name of the package is [PSC.Blazor.Components.Segments](https://www.nuget.org/packages/PSC.Blazor.Components.Segments/) and the only dependency it has is [Microsoft.AspNetCore.Components.Web](https://www.nuget.org/packages/Microsoft.AspNetCore.Components.Web/) (\u003e= 5.0.10).\n\nAfter that, in your `wwwroot\\index.html` or in the `hosts` file, you have to add a theme (CSS) for your segment control. Obviously, you can create your own theme. So, use this code:\n\n```\n\u003clink href=\"_content/PSC.Blazor.Components.Segments/themes/{theme-name}.css\" rel=\"stylesheet\" /\u003e\n```\n\nOut of the box, there are 4 themes (see below the images):\n\n- Blue\n- Green\n- Red\n- Light color\n\nThen, in your `_Imports.razor` add this \n\n```\n@using PSC.Blazor.Components.Segments\n```\n\nNow, you are ready to use your segment control.\n\n## Example\nAs a user, I want to select a country from a list of countries. When I click on one of them, other data has to change accordingly.\n\nSo, in a page add the following code\n\n```\n\u003cSegments OnSegmentChanged=\"OnSegmentChanged\"\u003e\n    \u003cSegment Text=\"Global\" Value=\"global\"\u003e\u003c/Segment\u003e\n    \u003cSegment Text=\"Australia\" Value=\"australia\"\u003e\u003c/Segment\u003e\n    \u003cSegment Text=\"Brazil\" Value=\"brazil\"\u003e\u003c/Segment\u003e\n    \u003cSegment Text=\"Canada\" Value=\"canada\"\u003e\u003c/Segment\u003e\n    \u003cSegment Text=\"France\" Value=\"france\"\u003e\u003c/Segment\u003e\n    \u003cSegment Text=\"Germany\" Value=\"germany\"\u003e\u003c/Segment\u003e\n    \u003cSegment Text=\"Italy\" Value=\"italy\"\u003e\u003c/Segment\u003e\n    \u003cSegment Text=\"Spain\" Value=\"spain\"\u003e\u003c/Segment\u003e\n    \u003cSegment Text=\"UK\" Value=\"uk\"\u003e\u003c/Segment\u003e\n\u003c/Segments\u003e\n```\n\nEach `Segment` has 2 properties:\n- **Text**: the label you want to show to the user\n- **Value**: the real value you want to use\n\nThe `Segments` has the property `OnSegmentChanged` that it is invoked every time a user click on a segment. So, define the function in your page the segment has to invoke like that\n\n```\npublic async Task OnSegmentChanged(Segment segment)\n{\n    // code to run\n}\n```\n\n## Themes \nThere are 4 themes embedded in the segment control.\n\n**Blue**\n![Blazor-Segmentation-example-blue](https://user-images.githubusercontent.com/9497415/137144166-532c1055-1afa-47bf-8fcb-e0c5f988f86f.gif)\n\n**Green**\n![Blazor-Segmentation-example-green](https://user-images.githubusercontent.com/9497415/137144290-3684cae8-9730-4fb1-a3b4-894a7326b275.gif)\n\n**Red**\n![Blazor-Segmentation-example-red](https://user-images.githubusercontent.com/9497415/137144310-83b864eb-59e9-4dee-b73e-7eb3fd62fdae.gif)\n\n**Light Colors**\n![Blazor-Segmentation-example-lightcolors](https://user-images.githubusercontent.com/9497415/137144333-879efdc6-41b2-41b3-9e3a-ef73bf7a400b.gif)\n\n---\n\n## Other Blazor components\n\n| Component name | Forum | Description |\n|---|---|---|\n| [DataTable for Blazor](https://www.puresourcecode.com/dotnet/net-core/datatable-component-for-blazor/) | [Forum](https://www.puresourcecode.com/forum/forum/datatables/) | DataTable component for Blazor WebAssembly and Blazor Server |\n| [Markdown editor for Blazor](https://www.puresourcecode.com/dotnet/blazor/markdown-editor-with-blazor/) | [Forum](https://www.puresourcecode.com/forum/forum/markdown-editor-for-blazor/) |  This is a Markdown Editor for use in Blazor. It contains a live preview as well as an embeded help guide for users. |\n| [CodeSnipper for Blazor](https://www.puresourcecode.com/dotnet/blazor/code-snippet-component-for-blazor/) | [Forum](https://www.puresourcecode.com/forum/codesnippet-for-blazor/) | Add code snippet in your Blazor pages for 196 programming languages with 243 styles |\n| [Copy To Clipboard](https://www.puresourcecode.com/dotnet/blazor/copy-to-clipboard-component-for-blazor/) | [Forum](https://www.puresourcecode.com/forum/copytoclipboard/) | Add a button to copy text in the clipbord | \n| SVG Icons and flags for Blazor | [Forum](https://www.puresourcecode.com/forum/icons-and-flags-for-blazor/) | Library with a lot of SVG icons and SVG flags to use in your Razor pages |\n| [Modal dialog for Blazor](https://www.puresourcecode.com/dotnet/blazor/modal-dialog-component-for-blazor/) | [Forum](https://www.puresourcecode.com/forum/forum/modal-dialog-for-blazor/) |  Simple Modal Dialog for Blazor WebAssembly |\n| [PSC.Extensions](https://www.puresourcecode.com/dotnet/net-core/a-lot-of-functions-for-net5/) | [Forum](https://www.puresourcecode.com/forum/forum/psc-extensions/) |  A lot of functions for .NET5 in a NuGet package that you can download for free. We collected in this package functions for everyday work to help you with claim, strings, enums, date and time, expressions... |\n| [Quill for Blazor](https://www.puresourcecode.com/dotnet/blazor/create-a-blazor-component-for-quill/) | [Forum](https://www.puresourcecode.com/forum/forum/quill-for-blazor/) |  Quill Component is a custom reusable control that allows us to easily consume Quill and place multiple instances of it on a single page in our Blazor application |\n| [Segment for Blazor](https://www.puresourcecode.com/dotnet/blazor/segment-control-for-blazor/) | [Forum](https://www.puresourcecode.com/forum/forum/segments-for-blazor/) |  This is a Segment component for Blazor Web Assembly and Blazor Server |\n| [Tabs for Blazor](https://www.puresourcecode.com/dotnet/blazor/tabs-control-for-blazor/) | [Forum](https://www.puresourcecode.com/forum/forum/tabs-for-blazor/) |  This is a Tabs component for Blazor Web Assembly and Blazor Server |\n| [WorldMap for Blazor]() | [Forum](https://www.puresourcecode.com/forum/worldmap-for-blazor/) | Show world maps with your data |\n\n## More examples and documentation\n*   [Write a reusable Blazor component](https://www.puresourcecode.com/dotnet/blazor/write-a-reusable-blazor-component/)\n*   [Getting Started With C# And Blazor](https://www.puresourcecode.com/dotnet/net-core/getting-started-with-c-and-blazor/)\n*   [Setting Up A Blazor WebAssembly Application](https://www.puresourcecode.com/dotnet/blazor/setting-up-a-blazor-webassembly-application/)\n*   [Working With Blazor Component Model](https://www.puresourcecode.com/dotnet/blazor/working-with-blazors-component-model/)\n*   [Secure Blazor WebAssembly With IdentityServer4](https://www.puresourcecode.com/dotnet/blazor/secure-blazor-webassembly-with-identityserver4/)\n*   [Blazor Using HttpClient With Authentication](https://www.puresourcecode.com/dotnet/blazor/blazor-using-httpclient-with-authentication/)\n*   [InputSelect component for enumerations in Blazor](https://www.puresourcecode.com/dotnet/blazor/inputselect-component-for-enumerations-in-blazor/)\n*   [Use LocalStorage with Blazor WebAssembly](https://www.puresourcecode.com/dotnet/blazor/use-localstorage-with-blazor-webassembly/)\n*   [Modal Dialog component for Blazor](https://www.puresourcecode.com/dotnet/blazor/modal-dialog-component-for-blazor/)\n*   [Create Tooltip component for Blazor](https://www.puresourcecode.com/dotnet/blazor/create-tooltip-component-for-blazor/)\n*   [Consume ASP.NET Core Razor components from Razor class libraries | Microsoft Docs](https://docs.microsoft.com/en-us/aspnet/core/blazor/components/class-libraries?view=aspnetcore-5.0\u0026tabs=visual-studio)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ferossini%2Fblazorsegmentcomponent","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ferossini%2Fblazorsegmentcomponent","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ferossini%2Fblazorsegmentcomponent/lists"}