杭州营销型网站设计,成都网站设计得多少钱,免费推广网站工具,河南建设168工程网官方网站文章目录 前言相关文章代码row和col组件B_rowB_col结构 使用 前言
可能是我用的element ui和 uView这种第三方组件用的太多了。我上来就希望能使用这些组件。但是目前Blazor目前的生态其实并不完善#xff0c;所以很多组件要我们自己写。 我们对组件的要求是 我们在组件化一共… 文章目录 前言相关文章代码row和col组件B_rowB_col结构 使用 前言
可能是我用的element ui和 uView这种第三方组件用的太多了。我上来就希望能使用这些组件。但是目前Blazor目前的生态其实并不完善所以很多组件要我们自己写。 我们对组件的要求是 我们在组件化一共有三个目的。
不用写CSS不用写html不用写交互逻辑
相关文章
C# Blazor 学习笔记(7):组件嵌套开发
代码
我们直接上结果
row和col组件
为了防止和别的UI库冲突我使用了B_为前缀
B_row
razor div classB_RowChildContent
/divcode {[Parameter] public RenderFragment ChildContent { get; set; }
}
razor.css
.B_Row {/*border: 1px solid black;*/display: grid;/*flex-direction: row;*/width: 100%;grid-template-columns: repeat(12,1fr);grid-auto-flow: column;
}
B_col
razor
if (Offset ! 0)
{div style grid-column-start: span (Offset)/div
}div classB_Col style grid-column-start: span (Span)ChildContent
/divcode {[Parameter]public RenderFragment ChildContent { get; set; }[Parameter]public float Span { get; set; } 12;[Parameter]public float Offset { get; set; } 0;private Dictionarystring, object ContentCss new Dictionarystring, object{};}
razor.css
body {
}.B_Col{border: 1px solid black;/*width:20%;*//*display:inline-grid;*//*grid-column-start:span 2;*/
}tips:我这里用border是为了明显地展示
结构 使用
B_rowB_col 1/B_col
/B_row
B_rowB_col Span 61/B_col
/B_row
B_rowB_col Span 6 Offset 31/B_col
/B_row
B_rowB_col Span 31/B_colB_col Span 32/B_colB_col Span 33/B_colB_col Span 34/B_col
/B_row
