C# Blazor 学习笔记(8):row/col布局开发

文章目录

前言

可能是我用的element ui和 uView这种第三方组件用的太多了。我上来就希望能使用这些组件。但是目前Blazor目前的生态其实并不完善,所以很多组件要我们自己写。

我们对组件的要求是

我们在组件化一共有三个目的。

  • 不用写CSS
  • 不用写html
  • 不用写交互逻辑

相关文章

C# Blazor 学习笔记(7):组件嵌套开发

代码

我们直接上结果

row和col组件

为了防止和别的UI库冲突,我使用了B_为前缀

B_row

razor

java 复制代码
<div class="B_Row">
    @ChildContent
</div>

@code {
    [Parameter] 
    public RenderFragment ChildContent { get; set; }
}

razor.css

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

java 复制代码
@if (Offset != 0)
{
    <div style=" grid-column-start: span @(Offset)">
    </div>
}

<div class="B_Col" style=" grid-column-start: span @(Span)">
    @ChildContent
</div>

@code {
    [Parameter]
    public RenderFragment ChildContent { get; set; }

    [Parameter]
    public float Span { get; set; } = 12;

    [Parameter]
    public float Offset { get; set; } = 0;

    private Dictionary<string, object> ContentCss = new Dictionary<string, object>
    {

    };

}

razor.css

css 复制代码
body {
}

.B_Col{
    border: 1px solid black;
    /*width:20%;*/
    /*display:inline-grid;*/
    /*grid-column-start:span 2;*/
}

tips:我这里用border是为了明显地展示

结构

使用

html 复制代码
<B_row>
    <B_col >1</B_col>
</B_row>
<B_row>
    <B_col  Span = "6">1</B_col>
</B_row>
<B_row>
    <B_col  Span = "6" Offset = "3">1</B_col>
</B_row>
<B_row>
    <B_col Span = "3">1</B_col>
    <B_col Span = "3">2</B_col>
    <B_col Span = "3">3</B_col>
    <B_col Span = "3">4</B_col>
</B_row>
相关推荐
宝桥南山13 分钟前
.NET - .NET Aspire的Command-Line和GitHub Copilot
microsoft·微软·c#·asp.net·.net·.netcore
正经教主17 分钟前
【Trae+AI】和Trae学习搭建App_02:后端API开发
学习·app·1024程序员节
岑梓铭24 分钟前
《考研408数据结构》第六章(5.1+5.2+5.3树、二叉树、线索二叉树)复习笔记
数据结构·笔记·考研·408·1024程序员节
源代码•宸25 分钟前
Qt6 学习——一个Qt桌面应用程序
开发语言·c++·经验分享·qt·学习·软件构建·windeployqt
摇滚侠1 小时前
全面掌握 PostgreSQL 关系型数据库,PostgreSQL 介绍,笔记02
数据库·笔记·postgresql
摇滚侠1 小时前
Spring Boot3零基础教程,生命周期监听,自定义监听器,笔记59
java·开发语言·spring boot·笔记
讽刺人生Yan1 小时前
RFSOC学习记录(一)RF data converter总览
学习·fpga开发·rfsoc
张人玉2 小时前
WPF 控件速查 PDF 笔记(可直接落地版)
笔记·microsoft·wpf
Pluchon2 小时前
硅基计划2.0 学习总结 玖 图书管理系统 2.0复盘版(文字末尾源码可复制)
java·学习·项目·源码可复制
摇滚侠2 小时前
Spring Boot3零基础教程,事件驱动开发,设计登录成功后增加积分记录信息功能,笔记61
java·spring boot·笔记·后端