C# Blazor 学习笔记(8):row/col布局开发
文章目录
- 前言
- 相关文章
- 代码
- row和col组件
- B_row
- B_col
- 结构
- 使用
前言
可能是我用的element ui和 uView这种第三方组件用的太多了。我上来就希望能使用这些组件。但是目前Blazor目前的生态其实并不完善,所以很多组件要我们自己写。
我们对组件的要求是
我们在组件化一共有三个目的。
- 不用写CSS
- 不用写html
- 不用写交互逻辑
相关文章
C# Blazor 学习笔记(7):组件嵌套开发
代码
我们直接上结果
row和col组件
为了防止和别的UI库冲突,我使用了B_为前缀
B_row
razor
<div class="B_Row">@ChildContent
</div>@code {[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 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
body {
}.B_Col{border: 1px solid black;/*width:20%;*//*display:inline-grid;*//*grid-column-start:span 2;*/
}
tips:我这里用border是为了明显地展示
结构

使用
<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>

相关文章:
C# Blazor 学习笔记(8):row/col布局开发
文章目录 前言相关文章代码row和col组件B_rowB_col结构 使用 前言 可能是我用的element ui和 uView这种第三方组件用的太多了。我上来就希望能使用这些组件。但是目前Blazor目前的生态其实并不完善,所以很多组件要我们自己写。 我们对组件的要求是 我们在组件化一共…...
金融供应链智能合约 -- 智能合约实例
前提 Ownable:监管者合约,有一个函数能转让监管者。 SupplyChainFin:供应链金融合约,银行、公司信息上链,公司和银行之间的转账。 发票:记录者交易双方和交易金额等的一种记录数据。如:我在超市买了一瓶水,超市给我开了一张发票。 Ownable // SPDX-…...
论文《Contrastive Meta Learning with Behavior Multiplicity for Recommendation》阅读
论文《Contrastive Meta Learning with Behavior Multiplicity for Recommendation》阅读 论文概况论文主要贡献Background & Motivation方法论单行为图神经网络(Behavior-aware GNN)多行为对比学习元对比编码模型训练 实验部分论文总结 论文概况 今…...
K8S 部署 RocketMQ
文章目录 添加模板部署本地访问 集群使用 kubesphere 作为工具 添加模板 添加 helm 模板 helm repo add rocketmq-repo https://helm-charts.itboon.top/rocketmq helm repo update rocketmq-repo编写 value.yaml 文件 配置主从节点的个数,例子为单节点 broker:…...
[Docker]入门之docker-compose
一,Docker-compose简介 1,Docker-compose简介 Docker-Compose项目是Docker官方的开源项目,负责实现对Docker容器集群的快速编排。 Docker-Compose将所管理的容器分为三层,分别是工程(project),…...
SAP ABAP中使用函数ALSM_EXCEL_TO_INTERNAL_TABLE读取EXCEL中不同的SHEET数据
SAP提供了标准的读取EXCEL的函数(ALSM_EXCEL_TO_INTERNAL_TABLE),但是此标准函数无法满足对同一EXCEL 进行不同SHEET的数据读取,一下方法就是教你如何通过修改程序来实现ALSM_EXCEL_TO_INTERNAL_TABLE读取多个SHEET; …...
Rust 编程小技巧摘选(6)
目录 Rust 编程小技巧(6) 1. 打印字符串 2. 重复打印字串 3. 自定义函数 4. 遍历动态数组 5. 遍历二维数组 6. 同时遍历索引和值 7. 迭代器方法的区别 8. for_each() 用法 9. 分离奇数和偶数 10. 判断素数(质数) Rust 编程小技巧(6) 1. 打印…...
如何保证Redis缓存和数据库的一致性问题
熟练掌握Redis缓存技术? 那么请问Redis缓存中有几种读写策略,又是如何保证与数据库的一致性问题 今天来聊一聊常用的三种缓存读写策略 Cache Aside Pattern Cache Aside Pattern 是我们平时使用比较多的一个缓存读写模式,比较适合读请求比…...
【数据分析入门】人工智能、数据分析和深度学习是什么关系?如何快速入门 Python Pandas?
目录 一、前言二、数据分析和深度学习的区别三、人工智能四、深度学习五、Pandas六、Pandas数据结构6.1 Series - 序列6.2 DataFrame - 数据框 七、输入、输出7.1 读取/写入CSV7.2 读取/写入Excel7.3 读取和写入 SQL 查询及数据库表 八、调用帮助九、选择(这里可以参考上一篇文…...
JavaScript 里三个点 ... 的用法
// table表头数据let tableHeadData deepClone(data);let tableCacheData [];//表格缓存对比if (!parent && isCacheHeadData) {// 缓存数据keylet tableCacheKey ${window.location.pathname}-${$self.attr(id)}if (localStorage.getItem(tableCacheKey)) {//根据缓…...
Linux修改系统语言
sudo dpkg-reconfigure locales 按pagedown键,移动红色光标到 zh_CN.UTF-8 UTF-8,空格标记*号(没标记下一页没有这一项),回车。 下一页选择 zh_CN.UTF-8。 如果找不到 dpkg-reconfigure whereis dpkg-reconfigure …...
Spring注解开发
目录 1、简介 2、原始注解 2.1、注解种类 2.2、组件扫描 2.3、具体使用 2.3.1、xml配置 2.3.2、注解配置 3、⭐新注解 3.1、新注解种类 3.2、实践 3.3、运行结果 3.4、警告信息 1、简介 Spring框架提供了许多注解,用于在Java类中进行配置和标记…...
图像处理库(Opencv, Matplotlib, PIL)以及三者之间的转换
文章目录 1. Opencv2. Matplotlib3. PIL4. 三者的区别和相互转换5. Torchvision 中的相关转换库5.1 ToPILImage([mode])5.2 ToTensor5.3 PILToTensor 1. Opencv opencv的基本图像类型可以和numpy数组相互转化,因此可以直接调用torch.from_numpy(img) 将图像转换成t…...
html+Vue+封装axios实现发送请求
在html中使用Vue和Axios时,可以在HTML中引入Vue库和Axios库,然后使用Vue的语法和指令来创建Vue组件和模板。在Vue组件中,你可以使用Axios发送HTTP请求来获取数据,并将数据绑定到Vue模板中进行展示。 <template><div>&…...
GoogLeNet卷积神经网络输出数据形参分析-笔记
GoogLeNet卷积神经网络输出数据形参分析-笔记 分析结果为: 输入数据形状:[10, 3, 224, 224] 最后输出结果:linear_0 [10, 1] [1024, 1] [1] 子空间执行逻辑 def forward_old(self, x):# 支路1只包含一个1x1卷积p1 F.relu(self.p1_1(x))# 支路2包含 1…...
【docker】dockerfile发布springboot项目
目录 一、实现步骤二、示例 一、实现步骤 1.定义父镜像:FROM java:8 2.定义作者信息:MAINTAINER:learn_docker<https://www.docker.com> 3.将jar包添加到容器:ADD jar包名称.jar app.jar 4.定义容器启动执行命令:…...
利用docker run -v 命令实现使用宿主机中没有的命令
利用docker run -v 命令实现使用宿主机中没有的命令 使用容器中的jar命令解压jar包,并将解压内容输出到挂载在宿主机中的目录里 使用容器中的jar命令解压jar包,并将解压内容输出到挂载在宿主机中的目录里 docker run -it --name java -v /www/temp/java…...
【小沐学NLP】在线AI绘画网站(百度:文心一格)
文章目录 1、简介2、文心一格2.1 功能简介2.2 操作步骤2.3 使用费用2.4 若干示例2.4.1 女孩2.4.2 昙花2.4.3 山水画2.4.4 夜晚2.4.5 古诗2.4.6 二次元2.4.7 帅哥 结语 1、简介 当下,越来越多AI领域前沿技术争相落地,逐步释放出极大的产业价值࿰…...
react经验5:访问子组件内容
应用场景 父级需要调用子组件的某函数 实现步骤 案例:创建自定义按钮 button.tsx import { Ref, forwardRef, useImperativeHandle,ReactNode} from "react" declare type ButtonProps {/**按钮文字 */children?: ReactNode,onClick?: () > voi…...
【LeetCode】647. 回文子串
题目链接 文章目录 1. 思路讲解1.1 方法选择1.2 dp表的创建1.3 状态转移方程1.4 填表顺序 2. 代码实现 1. 思路讲解 1.1 方法选择 这道题我们采用动态规划的解法,倒不是动态规划的解法对于这道题有多好,它并不是最优解。但是,这道题的动态…...
intv_ai_mk11惊艳效果展示:Llama中型模型在中文解释说明任务中的表现
intv_ai_mk11惊艳效果展示:Llama中型模型在中文解释说明任务中的表现 1. 模型核心能力概览 intv_ai_mk11作为基于Llama架构的中等规模文本生成模型,在中文解释说明任务中展现出令人印象深刻的能力。这个开箱即用的解决方案特别适合需要清晰、准确表达的…...
OpenClaw极简安装:Qwen3.5-9B云端体验与快速验证方案
OpenClaw极简安装:Qwen3.5-9B云端体验与快速验证方案 1. 为什么选择云端体验OpenClaw? 上周我在本地尝试部署OpenClaw时,被各种环境依赖折腾得够呛——Node版本冲突、Python包缺失、端口占用问题接踵而至。正当准备放弃时,偶然发…...
Android混淆配置终极指南:基于Awesome Android库的完整ProGuard规则
Android混淆配置终极指南:基于Awesome Android库的完整ProGuard规则 【免费下载链接】awesome-android A curated list of awesome Android packages and resources. 项目地址: https://gitcode.com/gh_mirrors/awe/awesome-android 在Android应用开发中&…...
OpenClaw跨平台控制:Qwen3.5-9B管理多台电脑
OpenClaw跨平台控制:Qwen3.5-9B管理多台电脑 1. 为什么需要跨设备自动化管理 去年夏天,我同时处理三个项目时遇到了一个典型问题:每天需要在三台不同电脑上重复执行数据同步、日志收集和报告生成。手动操作不仅耗时,还经常遗漏步…...
【数据结构】二叉树入门全解:从定义、性质到经典真题
一、先搞懂:什么是二叉树?二叉树(Binary Tree)是一种特殊的树形结构,定义非常清晰:它是由 n(n≥0) 个结点构成的有限集合,满足:空树:当 n0 时&…...
04_RAGFlow之知识图谱与Text2SQL
RAGFlow之知识图谱与Text2SQL:构建智能检索的双引擎 知识体系结构 RAGFlow技术栈 │ ├── 知识图谱层 │ ├── 实体识别与关系提取(NER Relation Extraction) │ ├── 图谱查询与推理(Graph Query & Reasoning&a…...
智能样式识别Word文档智能排版批量处理文档格式统一设置字体、字号、颜色、段落间距高效统一样式排版工具
大家好,我是大飞哥。在日常办公中,批量处理 Word 文档格式是最耗时的工作之一,尤其是多份文档样式不统一、表格错乱、图片排版混乱,手动调整不仅效率极低,还很难做到规范一致,严重影响办公效率 —— 这款Wo…...
从4.3(a)到2.1再到4.3(a):一次App Store审核“过山车”的实战复盘与破局
1. 当4.3(a)突然降临:一场没有预警的"Spam"风暴 那天早上我像往常一样打开邮箱,看到苹果审核团队的回复时,整个人瞬间清醒——醒目的"Guideline 4.3(a) - Design - Spam"像一盆冷水浇下来。这已经是我们的RPG游戏第三次提…...
GKD规则冲突检测:自动化识别并提示重叠规则问题
GKD规则冲突检测:自动化识别并提示重叠规则问题 在GKD自动化工具的使用过程中,规则冲突检测是一个至关重要的功能。当多个订阅规则同时作用于同一个应用时,可能会出现规则重叠或相互干扰的情况。GKD的智能冲突检测机制能够自动识别这些问题&…...
我在 Mac 写了个服务,硬要它在 18 岁高龄的 Windows 服务器上跑,结果…
前言 事情是这样的。 我有个朋友(以下称他为"怨种朋友"),找到我说: "帮我写个 Go 服务,在你自己 Mac 上开发,最后要能跑在咱们公司那台快入土的 Windows 2008 服务器上。" 我当时的…...
