Bootstrap Blazor组件库官方版

Bootstrap Blazor组件库简介

Bootstrap Blazor组件库可以帮助用户配置UI界面。您可以向软件添加树组件、菜单组件、选项卡组件、表格组件、布局组件、组件、上传组件和切换组件。通过使用这些组件，可以快速完成界面功能设计。你不需要自己重新设计页面样式和按钮样式。您可以通过该软件提供的组件立即设计新的用户界面。结合软件提供的图表组件，可以添加数据分析功能，将你分析的数据显示在图表上，提供多种常用的图表组件，支持数据对比，提供全功能的表格组件，具备添加、删除、搜索、分页、排序的全部功能，提供超级时间轴功能，自定义节点显示任意组件！

Bootstrap Blazor组件库软件功能

Blazor是一个框架，用于使用。NET:

1.使用C#代替JavaScpt创建丰富的交互UI。

2.共享客户端和服务器端的应用逻辑。NET。

3.将用户界面呈现为HTML和CSS，以支持许多浏览器，包括移动浏览器。

使用。NET进行客户端Web开发可以提供以下优势:

1.使用C#代替JavaScpt编写代码。

2.利用现有的。NET图书馆生态系统。

3.在和客户端之间共享应用程序逻辑。

4.受益于的性能、可用性和安全性。NET。

5.始终高效地支持Windows、Linux和macOS上的Visual Studio。

6.基于一组稳定、功能强大且易于使用的通用语言、框架和工具生成。

Bootstrap Blazor组件库软件特色

引导式Blazor用户界面组件库

在Bootstrap风格库的基础上，精心打造，增加了70多种常用组件，为您的快速项目开发带来非凡的感受。

50多个组件

这个组件库包含50多个组件，从简单的按钮到复杂的整页组件。

能

每个控件都经过了微调，以优化父子组件之间的刷新逻辑，并避免重复的循环更新。

使用方便

轻松掌握组件的使用，快速将BootstrapBlazor控件集成到项目中。

免费开源

简单、直接、易用、无组件和jQuery引导是内置的。

演示和示例

详细的文档和在线演示，简单的功能设置，直接开箱复制代码。

持续更新

代码云平台托管开源，从不关闭源码，持续更新，及时回复问题和反馈。

Bootstrap Blazor组件库教程

项目模板

引导数据库应用程序模板

为了方便人们使用这个组件快速构建项目，作者制作了Pject Templates，使用了dotnet新命令行模式，步骤如下:

1.安装项目模板

dotnet new -i Bootstrap。模板::1.0.13

2.创建项目

dotnet新bbapp

创建项目后，将在当前文件夹中生成BootstrapBlazorApp解决方案。src目录包含两种类型的项目，服务器端Wasm，可以直接在F5中运行。

3.卸载项目模板

dotnet new -u Bootstrap。布拉佐，模板

引导数据库应用程序扩展扩展

为了方便使用bootstrap Blazor组件库，作者制作了Bootstrap Blazor项目模板的扩展插件，通过Visual Studio 2019 IDE新建项目时选择Bootstrap Blazor项目模板即可安装。该解决方案有两种类型的内置项目，即服务器端和wasm。

从新的dotnet模板创建新项目

Bootstrap Blazor组件库安装模板

1、dotnet new -i Bootstrap。Blazor .模板::*

2.使用模板创建模板项目。

dotnet新bbapp

将引导数据库导入到现有项目中

1.转到应用程序的项目文件夹，安装Nuget包参考。

dotnet添加包BootstrapBlazor

2.将样式表javascpts文件添加到您的主索引文件中

超文本标记语言

3.在中打开~/Startup.cs文件并注册引导Blazor服务:

C#

Visual Studio集成

要引导Blazor为Blazor应用程序创建新的用户界面，请使用创建新项目向导。该向导将检测所有已安装的Bootstrap BlazorBlazor版本，并在“版本”组合框中列出它们，这使您能够以所需的版本启动项目。您还可以获得最新版本，以确保您是最新的。

1.去找巫师

要使用“创建新项目向导”，请安装ootball Blazor Visual Studio扩展的用户界面。您可以从以下位置获得:

Visual Studio市场(适用于Windows)

2.启动向导

要启动向导，请使用以下两种方法之一

使用项目菜单:

单击文件>新建>项目。

查找并单击“C#Blazor应用程序”选项(您可以使用Blazor模板进行搜索或过滤)。

跟着向导走。

拨动开关

提供最常见的开关应用程序，您可以将这些组件添加到您的用户界面中。

Toast轻量级弹出式窗口

轻量级吐司弹出窗口可用

例子

保存数据

保存数据成功，4秒后自动关闭。

成功

手动关机

不会自动关闭，需要手动点击关闭按钮。

卡片预览

通过设置IsCard属，打开卡片照片预览效果。

例子

允许上传任何格式的文件，文件大小不能超过20MB。

堆叠文件上传进度

通过设置IsStack ShowPgress开启栈文件上传进度预览功能，适合上传大文件，文件大于1MB时显示上传速率。

条形图

通过设置图表类型将图表更改为条形图

随机数据，添加数据集，删除数据集+添加数据-删除数据

甜甜圈图

通过设置图表类型将图表更改为圆环图

图表有很多种类型，用户在部署组件时可以通过这个软件加载自己喜欢的界面样式。

支持的浏览器

编辑器表单组件

通过绑定数据模型自动呈现编辑表单

EditorForm组件是一个非常实用的组件。编辑数据时，您只需要为模型种类指定一个值。

默认情况下，绑定模型会自动生成所有属，通过设置自动生成诉讼，可以将其更改为不自动生成。

如果不需要编辑列，只需设置“可编辑”，默认值为真即可生成编辑组件。

复杂编辑列，设置编辑模板模板，并使用自定义组件进行编辑。

您可以在表单中设置多个按钮，只需设置按钮模板即可。

基本用法

通过绑定TModel数据模型，自动生成模型每个字段的可编辑表单。

例子

直接绑定Model模型，设置爱好字段不显示。

小技术

自动绑定列如果使用输入呈现，则可以使用PlaceHolderAttbute标记设置绑定模型。

打开数据验证

通过嵌套ValidateForm组件实现数据遵从功能。

例子

组件内置于ValidateForm中，用于开启数据合规功能，常用字段使用EditTemplate模板自定义组件来呈现数据。

设置Readonly属使字段成为只读的。

默认情况下不会自动生成

通过将亏格自动生成诉讼的值设置为假，亏格的自动生成被禁止，亏格的显示通过设置字段项目的内部来控制。

例子

示例在本示例中，通过将“自动生成诉讼”的值设置为false，关闭自动生成功能，并手动添加两个EditorItem编辑项来呈现表单编辑。

表单中的组件独立于模型绑定字段。

通过将亏格自动生成诉讼的值设置为假，亏格的自动生成被禁止，亏格的显示通过设置字段项目的内部来控制。

例子

示例在某些情况下，表单中某些列的值可能是次要类别等。你需要知道主要的类别。此时，主要类别需要额外的组件来呈现。如果您选择，并且此组件与当前上下文绑定模型无关，则在此需求中，您可以通过将SkipValidate值设置为true来关闭此组件的模型验证功能。在本例中，选择组件与与模型无关的DummyId私有字段绑定。

属性属

项目属

验证表单组件

用于数据合规性的表单组件

基本用法

提交放置在ValidateForm中的组件时自动执行数据合规性。

例子

组件描述:

事件是OnSubmit on valid submit on invalid submit。当使用onsubmit时，其他两个不能同时使用。

在本例中，OnSubmit回调委托用于显示结果，而不管客户端身份验证是否通过。

模型参数是必需的，不能为空。

通过设置ButtonType=”，可以在表单中放置多个按钮。按钮类型。提交& # 8221；参数是否提交表单？

客户端验证机制支持模型的必需标签。通过设置ErrMessage参数设置提示，未设置时使用默认英文提示。

注意事项:

表单中组件的常见用法是利用双向绑定技术双向绑定Model的属性值。当它的值改变时，它的组件的StateHasChanged方法将被调用，也就是说，它的组件或页面将被刷新并再次呈现。

示例数据符合性默认查找绑定模型字段验证标签，如必需在此示例中，未设置ErrMessage，因此提示消息为默认英语。

内置组件

支持在有效表单中放置表单组件

例子

支持表单验证的组件示例

该名称为字符串类型。

是年龄整数类型。

是出生时间类型。

教育是一种枚举类型。

爱好是类型

属性属

方法方法