随笔分类 -  BootstrapBlazor

摘要:使用模板使用模板是最简单的办法。因为项目模板里已经包含了BootStrapBlazor的所有需要配置的内容。首先我们安装项目模板:dotnet new -i Bootstrap.Blazor.Templates::6.4.1这里的6.4.1是版本号,截至到目前Templates的版本号为6.4.1。 阅读全文
posted @ 2022-07-25 09:28 jvx 阅读(1565) 评论(0) 推荐(4) 编辑
摘要:组件介绍 CheckboxList 多选框组控件用于创建多选的复选框组. 他的样子是这样的: 代码也很简单,绑定一个List就行了。 <CheckboxList @bind-Value="@Value1" Items="@Items1" ShowLabel="true" DisplayText="@ 阅读全文
posted @ 2022-05-06 21:51 jvx 阅读(1511) 评论(0) 推荐(0) 编辑
摘要:组件介绍 AutoFill 自动填充组件 通过智能感应提示选项,选中后自动填充表单。 他的代码如下: <AutoFill TValue="Foo" Value="Model" Items="Items" IsLikeMatch="true" OnSelectedItemChanged="OnSele 阅读全文
posted @ 2022-05-04 22:28 jvx 阅读(1389) 评论(0) 推荐(0) 编辑
摘要:组件介绍 Carousel 走马灯的作用是在有限空间内,循环播放同一类型的图片、文字等内容。 代码如下: <Carousel Images="@Images" Width="280"></Carousel> 其中Images是一组图片地址。 组件的其他属性 Images:图片的地址列表。 IsFad 阅读全文
posted @ 2022-05-01 21:38 jvx 阅读(1326) 评论(0) 推荐(0) 编辑
摘要:组件介绍 按钮组件,应该是最基础的组件之一了。感觉没什么可介绍的,但是BootstrapBlazor的按钮,还是有很多不错的特性。 首先是最基础的,boostrap5的按钮样式: 代码如下: <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Butt 阅读全文
posted @ 2022-04-29 23:03 jvx 阅读(1897) 评论(0) 推荐(0) 编辑
摘要:组件介绍 EditorForm 组件是一个非常实用的组件,当进行数据编辑时,仅需要将 Model 属性赋值即可。 绑定模型默认自动生成全部属性,可以通过设置 AutoGenerateAllItem 更改为不自动生成如不需要编辑列,设置 Editable 即可,默认值为 true 生成编辑组件复杂编辑 阅读全文
posted @ 2022-04-28 21:58 jvx 阅读(1789) 评论(0) 推荐(0) 编辑
摘要:组件介绍 Circle进度环组件,是一个图表类组件。一般有两种用途: 显示某项任务进度的百分比。 统计某些指标的占比。 它的样子如下: 它的代码如下: <Circle Width="250" Value="75" Color="Color.Success" StrokeWidth="10" Show 阅读全文
posted @ 2022-04-27 21:53 jvx 阅读(1403) 评论(0) 推荐(0) 编辑
摘要:组件介绍 在Bootstrap中,我们经常使用row和col通过栅格化来控制显示位置。 如 <div class="row"> <div class="col-12"></div> </div> 会显示一个充满行的div。 但是我们需要编写很多代码,比如大量重复的div标签。还有col的class。 阅读全文
posted @ 2022-04-26 21:21 jvx 阅读(1410) 评论(0) 推荐(0) 编辑
摘要:组件介绍 Markdown组件是tui.editor的封装,所以所有内容均基于tui.editor。 默认状态下样子如下所示: 其代码如下: <Markdown Language="@Language" @bind-Value="@MarkdownString" @bind-Html="@HtmlS 阅读全文
posted @ 2022-04-25 22:19 jvx 阅读(1466) 评论(0) 推荐(0) 编辑
摘要:组件说明 Model组件是一个模态框组件,可以弹出一个对话框,适合需要定制性更大的场景。 它的样子如下: 其html代码为: <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">弹窗标题</h5 阅读全文
posted @ 2022-04-24 22:19 jvx 阅读(1765) 评论(0) 推荐(0) 编辑
摘要:组件介绍 上一篇文章我们介绍了Alert组件,但是实际上Alert组件只能直接把内容加载到页面内,这个做不到当作提示使用。 所以我们还有一个新的组件Message。这个组件的样式几乎与Alert组件一模一样。但是它可以浮动在窗口之上,4秒之后消失。 代码如下: await MessageServic 阅读全文
posted @ 2022-04-23 21:48 jvx 阅读(1680) 评论(0) 推荐(0) 编辑
摘要:组件介绍 Alert组件几乎是组件库里必不可少的组件了,即使浏览器,也自带了一个alert,会弹出一个模态框。 但是这个模态框有点太丑了,所以各大组件库分分实现了自己的Alert组件。 当然BootstrapBlazor也不例外,同样实现了自己的Alert。 样子如下: 对应的代码为: <Alert 阅读全文
posted @ 2022-04-22 18:29 jvx 阅读(1441) 评论(0) 推荐(0) 编辑
摘要:组件介绍Editor组件是对Summernote 组件的二次封装。组件分为div模式和editor模式。默认状态下editor模式的组件样子如下:其代码如下:<Editor @bind-Value="@EditorValue" IsEditor="true"></Editor>我们可以通过@bind 阅读全文
posted @ 2022-04-21 21:47 jvx 阅读(1078) 评论(0) 推荐(1) 编辑
摘要:Tag组件的样子 Tag组件的介绍 Tag组件是一个非常简单的组件。 <Tag Icon="fa fa-fw fa-check-circle" Color="Color.Success" ShowDismiss="true" OnDismiss="@DismissClick">标签一</Tag> 这 阅读全文
posted @ 2022-04-17 19:51 jvx 阅读(1329) 评论(0) 推荐(0) 编辑
摘要:一个较为完整的Card样子Card组件介绍Card组件分为三部分,CardHeader、CardBody、CardFooter。代码格式如下:<Card> <CardHeader> Featured </CardHeader> <CardBody> <h5>Special title treatme 阅读全文
posted @ 2022-04-15 09:32 jvx 阅读(1336) 评论(0) 推荐(0) 编辑
摘要:组件解决的问题由于Blazor在与服务器连接时使用了Websocket,仅在第一次连接时会走原MVC的连接逻辑。所以,我们无法在这个过程中完成例如身份认证、cookie处理等操作。此组件即为解决此类问题准备的。组件用法官网文档可以直接查阅这里给出一部分代码:在页面上添加<Ajax></Ajax>的组 阅读全文
posted @ 2022-04-11 18:58 jvx 阅读(1684) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示