https://github.com/tomlm/blazorcss
Blazor Component to create data bound CSS rules
https://github.com/tomlm/blazorcss
blazor css
Last synced: about 1 year ago
JSON representation
Blazor Component to create data bound CSS rules
- Host: GitHub
- URL: https://github.com/tomlm/blazorcss
- Owner: tomlm
- Created: 2020-01-31T00:53:52.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-01-31T01:45:11.000Z (over 6 years ago)
- Last Synced: 2025-03-25T21:36:23.299Z (over 1 year ago)
- Topics: blazor, css
- Language: HTML
- Homepage:
- Size: 368 KB
- Stars: 12
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# BlazorCss
This is a Blazor Library which adds data bound style rules to the BlazorStyled library (see https://blazorstyled.io/)
With this library you get
* Component for defining a rule
* CSS properties are autocompleted
* Constants are available for auto completion
## Installation
```
dotnet add package BlazorCss
```
## Usage
There are 2 ways to use it, as a way to define the properties of the Styled component it is in, or as a way to define
a specific selector and the style properties of the selector.
### Root level rule
As a root level rule. All attributes on the rule apply to the class name of the Styled tag
```html
```
This generates:
```css
.foo {
background: Pink;
display: grid;
height: 300px;
}
```
### Selector based rule
If you use the Selector attribute you can define a selector for the attributes.
```html
```
In this case it generates a CSS selector rule for the element with Id **blat**:
```css
#blat {
display: grid;
background: yello;
align-content: space-around;
}
```
Any valid CSS selector can be put into the Selector property, such as
* *div > a*
* *.foo,.bar*
* etc.
> NOTE: Backing properties in C# can't have a dash in the name, so the attributes with dash are represented with underscore.
> align_content ==> align-content in the css