Skip to content

Commit 72fdce4

Browse files
yoli799480165yoli799480165
authored
refactor StyleOutlet component
1 parent 2ae945a commit 72fdce4

36 files changed

+1541
-158
lines changed

‎README.md‎

Lines changed: 137 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ dotnet add package CssInCSharp
1313
```
1414

1515
## Usage
16+
- Used within a native `<style>` tag.
1617
```csharp
1718
<div class="basic">
1819
<div class="title">Title</div>
@@ -57,7 +58,142 @@ dotnet add package CssInCSharp
5758
}
5859
```
5960

60-
For other examples, you can check out the example code.
61+
- Use the `StyleContent` and `Style` components on the page.
62+
```csharp
63+
<div class="div1">
64+
Style In Head
65+
</div>
66+
67+
<div class="div2">
68+
Style In Body
69+
</div>
70+
71+
<!-- style in head -->
72+
<StyleContent>
73+
<Style StyleFn="@StyleInHead" Path="Basic|StyleTag"></Style>
74+
</StyleContent>
75+
76+
<!--style in body-->
77+
<Style StyleFn="@StyleInBody"></Style>
78+
79+
@code {
80+
private CSSInterpolation StyleInHead()
81+
{
82+
return new CSSObject
83+
{
84+
[".div1"] = new CSSObject
85+
{
86+
Width = "200px",
87+
Height = "200px",
88+
Border = "1px solid #DDD",
89+
}
90+
};
91+
}
92+
93+
private CSSInterpolation StyleInBody()
94+
{
95+
return new CSSObject
96+
{
97+
[".div2"] = new CSSObject
98+
{
99+
Width = "200px",
100+
Height = "200px",
101+
Border = "1px solid #DDD",
102+
BackgroundColor = "#EFEFEF",
103+
}
104+
};
105+
}
106+
}
107+
```
108+
109+
- Use StyleHelper to inject styles in custom components.
110+
```csharp
111+
<div class="@_token.HashId @Name">
112+
@foreach (var item in Items)
113+
{
114+
<div class="item">@item</div>
115+
}
116+
</div>
117+
118+
@code {
119+
[Parameter]
120+
public string[] Items { get; set; }
121+
122+
[Parameter]
123+
public int Width { get; set; } = 500;
124+
125+
protected override void OnInitialized()
126+
{
127+
// use style helper to register style
128+
StyleHelper.Register(new StyleInfo
129+
{
130+
HashId = _token.HashId,
131+
Path = new string[]{ "component", "demo" },
132+
StyleFn = UseStyle
133+
});
134+
}
135+
136+
private CSSInterpolation UseStyle()
137+
{
138+
...
139+
}
140+
}
141+
```
142+
143+
- Inject a `CSSObject` or `CSSString` into the head.
144+
```csharp
145+
@_node
146+
147+
@code {
148+
149+
private RenderFragment _node;
150+
151+
protected override void OnInitialized()
152+
{
153+
var styles = new
154+
{
155+
container = new CSSObject
156+
{
157+
BackgroundColor = token.ColorBgLayout,
158+
BorderRadius = token.BorderRadiusLG,
159+
MaxWidth = 400,
160+
Width = "100%",
161+
Height = 180,
162+
Display = "flex",
163+
AlignItems = "center",
164+
JustifyContent = "center",
165+
FlexDirection = "column",
166+
MarginLeft = "auto",
167+
MarginRight = "auto",
168+
},
169+
170+
card = CSS($$""""
171+
box-shadow: {{token.BoxShadow}};
172+
padding: {{token.Padding}}px;
173+
border-radius: {{token.BorderRadius}}px;
174+
color: {{token.ColorTextTertiary}};
175+
background: {{token.ColorBgContainer}};
176+
transition: all 100ms {{token.MotionEaseInBack}};
177+
178+
margin-bottom: 8px;
179+
cursor: pointer;
180+
181+
&:hover {
182+
color: {{token.ColorTextSecondary}};
183+
box-shadow: {{token.BoxShadowSecondary}};
184+
}
185+
""""),
186+
};
187+
// The CX and CSS methods are defined in the StyleHelper class.
188+
// @using static CssInCSharp.StyleHelper
189+
_node = @<div class="@CX("a-simple-create-style-demo-classname", styles.container)">
190+
<div class="@styles.card">createStyles Demo</div>
191+
<div>Current theme mode: dark</div>
192+
</div>;
193+
}
194+
}
195+
```
196+
For other examples, you can check out the example code. For more information, please refer to the [document](./docs/index.md).
61197

62198
## Css Compiler
63199
The CssInCSharp is similar to less or sass. You can simply convert you style file into C# class, so that you can make full use of the C# language features to generate style content.

‎docs/index.md‎

Lines changed: 69 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -667,21 +667,19 @@ The style output:
667667
```
668668

669669
## Custom Component Style
670-
On a page, you can use the `<StyleContent>` component to add styles, but you can't use StyleContent in custom component, so if you need to add a style to the head in the custom component, you need to use the `UseStyleRegister` method in the `StyleHelper` class to register the style.
670+
On a page, you can use the `<StyleContent>` component to add page-specific styles. However, StyleContent cannot be used inside custom components. For example, if you create a `<DemoComponent>` component, how can you inject its styles into the `<head>` tag? CssInCsharp provides a global helper class called `StyleHelper`. You can use the `Register` method to inject styles into the `<head>` tag.
671671

672672
DemoComponent.razor
673673
```csharp
674674
<div class="@_tokenHash demo"></div>
675-
@_styleContent
676675

677676
@code
678677
{
679-
private RenderFragment _styleContent;
680678
private string _tokenHash = "css-zcfrx9";
681679

682680
protected override void OnInitialized()
683681
{
684-
_styleContent = StyleHelper.UseStyleRegister(new StyleInfo
682+
StyleHelper.Register(new StyleInfo
685683
{
686684
HashId = _tokenHash,
687685
Path = new[] { "component", "demo" },
@@ -702,4 +700,70 @@ DemoComponent.razor
702700
};
703701
}
704702
}
705-
```
703+
```
704+
The `StyleHelper` class contains a set of methods for registering styles. `CSSObject` or `CSSString` can be injected directly.
705+
```csharp
706+
@_node
707+
708+
@code {
709+
710+
private RenderFragment _node;
711+
712+
protected override void OnInitialized()
713+
{
714+
var token = new
715+
{
716+
ColorBgLayout = "#ddd",
717+
BorderRadiusLG = "8px",
718+
BoxShadow = "5px #DEDEDE",
719+
Padding = 20,
720+
BorderRadius = 4,
721+
ColorTextTertiary = "#000",
722+
ColorBgContainer = "#EFEFEF",
723+
MotionEaseInBack = "",
724+
ColorTextSecondary = "",
725+
BoxShadowSecondary = ""
726+
};
727+
var styles = new
728+
{
729+
container = new CSSObject
730+
{
731+
BackgroundColor = token.ColorBgLayout,
732+
BorderRadius = token.BorderRadiusLG,
733+
MaxWidth = 400,
734+
Width = "100%",
735+
Height = 180,
736+
Display = "flex",
737+
AlignItems = "center",
738+
JustifyContent = "center",
739+
FlexDirection = "column",
740+
MarginLeft = "auto",
741+
MarginRight = "auto",
742+
},
743+
744+
card = CSS($$""""
745+
box-shadow: {{token.BoxShadow}};
746+
padding: {{token.Padding}}px;
747+
border-radius: {{token.BorderRadius}}px;
748+
color: {{token.ColorTextTertiary}};
749+
background: {{token.ColorBgContainer}};
750+
transition: all 100ms {{token.MotionEaseInBack}};
751+
752+
margin-bottom: 8px;
753+
cursor: pointer;
754+
755+
&:hover {
756+
color: {{token.ColorTextSecondary}};
757+
box-shadow: {{token.BoxShadowSecondary}};
758+
}
759+
""""),
760+
};
761+
762+
_node = @<div class="@CX("a-simple-create-style-demo-classname", styles.container)">
763+
<div class="@styles.card">createStyles Demo</div>
764+
<div>Current theme mode: dark</div>
765+
</div>;
766+
}
767+
}
768+
```
769+
When injecting CSSObject via the `CX` method, you can keep the custom className, otherwise the `HashId` will be used as the default className, and the `CSS` method can inject a style string, which can contain structured style content.

‎docs/index.zh-CN.md‎

Lines changed: 68 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -700,21 +700,19 @@ Style组件属性列表:
700700
```
701701

702702
## 自定义组件样式
703-
在页面上，你可以使用`<StyleContent>`组件来添加页面样式。但是StyleContent并不能用在自定义的组件里。例如创建一个`<DemoComponent>`组件，该如何为这个自定义组件添加样式。CssInCsharp提供一个全局的Helper类`StyleHelper`。你可以使用`UseStyleRegister`方法来向head标签里注入样式。
703+
在页面上，你可以使用`<StyleContent>`组件来添加页面样式。但是StyleContent并不能用在自定义的组件里。例如创建一个`<DemoComponent>`组件，该如何为这个自定义组件添加样式。CssInCsharp提供一个全局的Helper类`StyleHelper`。你可以使用`Register`方法来向head标签里注入样式。
704704

705705
DemoComponent.razor演示代码：
706706
```csharp
707707
<div class="@_tokenHash demo"></div>
708-
@_styleContent
709708

710709
@code
711710
{
712-
private RenderFragment _styleContent;
713711
private string _tokenHash = "css-zcfrx9";
714712

715713
protected override void OnInitialized()
716714
{
717-
_styleContent = StyleHelper.UseStyleRegister(new StyleInfo
715+
StyleHelper.Register(new StyleInfo
718716
{
719717
HashId = _tokenHash,
720718
Path = new[] { "component", "demo" },
@@ -736,4 +734,69 @@ DemoComponent.razor演示代码：
736734
}
737735
}
738736
```
739-
`UseStyleRegister`方法调用后会返回RenderFragment对象。你需要将该对象放到组件里。
737+
`StyleHelper`类中包含一组用于注册样式的方法。可直接注入`CSSObject`对象或样式字符串。
738+
```csharp
739+
@_node
740+
741+
@code {
742+
743+
private RenderFragment _node;
744+
745+
protected override void OnInitialized()
746+
{
747+
var token = new
748+
{
749+
ColorBgLayout = "#ddd",
750+
BorderRadiusLG = "8px",
751+
BoxShadow = "5px #DEDEDE",
752+
Padding = 20,
753+
BorderRadius = 4,
754+
ColorTextTertiary = "#000",
755+
ColorBgContainer = "#EFEFEF",
756+
MotionEaseInBack = "",
757+
ColorTextSecondary = "",
758+
BoxShadowSecondary = ""
759+
};
760+
var styles = new
761+
{
762+
container = new CSSObject
763+
{
764+
BackgroundColor = token.ColorBgLayout,
765+
BorderRadius = token.BorderRadiusLG,
766+
MaxWidth = 400,
767+
Width = "100%",
768+
Height = 180,
769+
Display = "flex",
770+
AlignItems = "center",
771+
JustifyContent = "center",
772+
FlexDirection = "column",
773+
MarginLeft = "auto",
774+
MarginRight = "auto",
775+
},
776+
777+
card = CSS($$""""
778+
box-shadow: {{token.BoxShadow}};
779+
padding: {{token.Padding}}px;
780+
border-radius: {{token.BorderRadius}}px;
781+
color: {{token.ColorTextTertiary}};
782+
background: {{token.ColorBgContainer}};
783+
transition: all 100ms {{token.MotionEaseInBack}};
784+
785+
margin-bottom: 8px;
786+
cursor: pointer;
787+
788+
&:hover {
789+
color: {{token.ColorTextSecondary}};
790+
box-shadow: {{token.BoxShadowSecondary}};
791+
}
792+
""""),
793+
};
794+
795+
_node = @<div class="@CX("a-simple-create-style-demo-classname", styles.container)">
796+
<div class="@styles.card">createStyles Demo</div>
797+
<div>Current theme mode: dark</div>
798+
</div>;
799+
}
800+
}
801+
```
802+
通过`CX`方法注入CSSObject时可以保留自定义className，否则会以HashId作为该对象的className，`CSS`方法可以直接注入样式字符串，该字符串可以包含结构化的样式内容。

0 commit comments

Comments
 (0)