{"id":20409396,"url":"https://github.com/jsakamoto/cssclassinlinebuilder","last_synced_at":"2025-07-06T14:05:44.364Z","repository":{"id":66230892,"uuid":"231350184","full_name":"jsakamoto/CssClassInlineBuilder","owner":"jsakamoto","description":"Build CSS class string for \"class\" attribute dynamically based on boolean switch values, in Razor files in-line.","archived":false,"fork":false,"pushed_at":"2024-04-06T04:43:30.000Z","size":1027,"stargazers_count":16,"open_issues_count":0,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-30T10:33:56.080Z","etag":null,"topics":["blazor","cssclass","cssclasses","razor"],"latest_commit_sha":null,"homepage":"","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jsakamoto.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-01-02T09:34:44.000Z","updated_at":"2024-07-11T08:39:00.000Z","dependencies_parsed_at":null,"dependency_job_id":"dbc89339-913d-472d-8cfd-c2d7587c72b6","html_url":"https://github.com/jsakamoto/CssClassInlineBuilder","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/jsakamoto/CssClassInlineBuilder","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsakamoto%2FCssClassInlineBuilder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsakamoto%2FCssClassInlineBuilder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsakamoto%2FCssClassInlineBuilder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsakamoto%2FCssClassInlineBuilder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jsakamoto","download_url":"https://codeload.github.com/jsakamoto/CssClassInlineBuilder/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsakamoto%2FCssClassInlineBuilder/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263914455,"owners_count":23529077,"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","cssclass","cssclasses","razor"],"created_at":"2024-11-15T05:41:26.479Z","updated_at":"2025-07-06T14:05:44.340Z","avatar_url":"https://github.com/jsakamoto.png","language":"C#","funding_links":[],"categories":[],"sub_categories":[],"readme":"# CSS Class Inline Builder (designed for Blazor) [![NuGet Package](https://img.shields.io/nuget/v/Toolbelt.Web.CssClassInlineBuilder.svg)](https://www.nuget.org/packages/Toolbelt.Web.CssClassInlineBuilder/) [![unit tests](https://github.com/jsakamoto/CssClassInlineBuilder/actions/workflows/unit-tests.yml/badge.svg)](https://github.com/jsakamoto/CssClassInlineBuilder/actions/workflows/unit-tests.yml)\n\n## Summary\n\nBuild CSS class string for a \"class\" attribute dynamically based on the boolean switch and enum values in Razor files in-line.\n\n![fig1](https://raw.githubusercontent.com/jsakamoto/CssClassInlineBuilder/master/assets/fig1.png)\n\n## How to use?\n\n### 1. Install the package to your project.\n\nPackage Manager Console:\n\n```shell\nPM\u003e Install-Package Toolbelt.Web.CssClassInlineBuilder\n```\n\ndotnet CLI:\n\n```shell\n$ dotnet add package Toolbelt.Web.CssClassInlineBuilder\n```\n\n### 2. Declare for using \"CSS class inline builder\".\n\nAdd `@using static Toolbelt.Web.CssClassInlineBuilder.V2` declaration in the head of each `.razor` file where you want to use the CSS class inline builder.\n\nOr you can also add the declaration to `_Imports.razor` once instead.\n\n```csharp\n@using static Toolbelt.Web.CssClassInlineBuilder.V2\n```\n\n### 3. Use \"CssClass(...)\" method to build  CSS class string!\n\nYou can use the `CssClass(...)` method anywhere you want to build a CSS class string.\n\n#### 3-1. CSS class name strings\n\nBasically, you can pass CSS class name strings up to 4 to the arguments of `CssClass()` method.\n\nThe `CssClass()` method returns a string that is concatenated with all of those passed to argument strings with a space separator.\n\n```html\n\u003cdiv class=\"@CssClass(\"foo\", \"bar\")\"\u003e\n\u003c!-- You will get `class=\"foo bar\"` --\u003e\n```\n\n#### 3-2. objects which has `bool` properties\n\nNext, you can pass objects (including anonymous types) up to 4 that contain `bool` properties to the arguments of the `CssClass()` method.\n\nThe `CssClass()` method picks up the `bool` properties where its value is `true` from the argument objects, concatenates those property's name strings with a space separator, and returns them. (The names of properties are converted to lowercase.)\n\n```html\n\u003cdiv class=\"@CssClass(new {Foo=true, Bar=false}, new {Fizz=true})\"\u003e\n\u003c!-- You will get `class=\"foo fizz\"` --\u003e\n```\n\nAs you know, the anonymous type can omit explicit property names when the name is the same as a variable name.\n\n```html\n\u003cdiv class=\"@CssClass(new {Foo, Bar}, new {Fizz})\"\u003e\n\u003c!-- You will get `class=\"bar fizz\"` --\u003e\n@code {\n  private bool Foo = false;\n  private bool Bar = true;\n  private bool Fizz = true;\n  ...\n```\n\nThe property name will be converted from a camel/snake case naming convention to a hyphenated lowercase.\n\n```html\n\u003cdiv class=\"@CssClass(new {FizzBuzz})\"\u003e\n\u003c!-- You will get `class=\"fizz-buzz\"` --\u003e\n@code {\n  private bool FizzBuzz = true;\n  ...\n```\n\n#### 3-3. any other type properties in an object\n\nIf you pass an object with non-boolean-type properties, a CSS class name will be built for each property.  \nThat CSS class name will be concatenated with a hyphen of the property name and its value.\n\n```html\n@code {\n  private int Stars = 5;\n  ...\n}\n\n\u003cdiv class=\"@CssClass(new {NumberOfStars = this.Stars})\"\u003e\n\u003c!-- You will get `class=\"number-of-stars-5\"` --\u003e\n```\n\n#### 3-4. enum values\n\nYou can also pass enum values up to 4 to the arguments of the `CssClass()` method.\n\nThe enum value will be converted to a string as a CSS class name.\n\nThe name of the enum value will be converted from camel case/snake case naming convention to hyphenated lower case.\n\n```html\n@code {\n  enum StateValues {\n    NotReady,\n    Complete,\n    Error\n  }\n\n  private StateValues State = StateValues.NotReady;\n  ...\n}\n\n\u003cdiv class=\"@CssClass(this.State)\"\u003e\n\u003c!-- You will get `class=\"not-ready\"` --\u003e\n```\n\n#### Finally, you can mix those all!\n\nYou can pass mixing strings, objects, and enum values to the argument of the `CssClass()` method.\n\n```html\n@code {\n  enum StateValues {\n    NotReady,\n    Complete,\n    Error\n  }\n\n  private bool Fizz = true;\n  private bool Buzz = false;\n  private int NumOfStars = 5;\n  private StateValues State = StateValues.Complete;\n  ...\n}\n...\n\u003cdiv class=\"@CssClass(new {Fizz, Buzz}, $\"stars-{NumOfStars}\", State)\"\u003e\n\u003c!-- You will get `class=\"fizz stars-5 complete\"` --\u003e\n```\n\n## Notice\n\nThe `CssClass()` method uses the .NET CLR \"Reflection\" feature to parse the object's properties.\n\nThis means using the `CssClass()` method can degrade performance.\n\nThe `CssClass()` method includes a caching mechanism to avoid performance degradation, but it will be better to let you know this information anyway.\n\n## Release Notes\n\nYou can see the release notes [here](https://github.com/jsakamoto/CssClassInlineBuilder/blob/master/RELEASE-NOTES.txt).\n\n## License\n\n[Mozilla Public License Version 2.0](https://github.com/jsakamoto/CssClassInlineBuilder/blob/master/LICENSE)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsakamoto%2Fcssclassinlinebuilder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjsakamoto%2Fcssclassinlinebuilder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsakamoto%2Fcssclassinlinebuilder/lists"}