File tree Expand file tree Collapse file tree 2 files changed +240
-323
lines changed
Expand file tree Collapse file tree 2 files changed +240
-323
lines changed Original file line number Diff line number Diff line change @@ -30,14 +30,17 @@ moon add tiye/respo_css
3030
3131``` moonbit
3232// Create basic styles
33+ ///|
3334let style : RespoStyle = respo_style(
3435 color=CssColor::Red,
3536 font_size=16,
3637 margin=CssSize::Px(10.0),
37- display=CssDisplay::Flex
38+ display=CssDisplay::Flex,
3839)
3940
4041// Convert to CSS string
42+
43+ ///|
4144let _css_string : String = style.to_string()
4245// Output: "color:red; font-size:16px; margin:10px; display:flex; "
4346```
@@ -46,13 +49,23 @@ let _css_string : String = style.to_string()
4649
4750``` moonbit
4851// Create multiple styles
52+ ///|
4953let base_style : RespoStyle = respo_style(color=CssColor::Blue, font_size=14)
50- let layout_style : RespoStyle = respo_style(display=CssDisplay::Grid, gap=CssSize::Px(20.0))
54+
55+ ///|
56+ let layout_style : RespoStyle = respo_style(
57+ display=CssDisplay::Grid,
58+ gap=CssSize::Px(20.0),
59+ )
5160
5261// Merge styles
62+
63+ ///|
5364let combined : RespoStyle = base_style.merge(layout_style)
5465
5566// Add custom properties
67+
68+ ///|
5669let _extended : RespoStyle = combined.add("custom-property", "custom-value")
5770```
5871
You can’t perform that action at this time.
0 commit comments