integralui lite blazor下载 - integralui lite blazor源代码下载

integralui lite blazor

其他类别

24.3

下载

glazor的Integralui Lite，v24.3

Blazor的Integralui Lite是一个免费的UI库，该图书馆由Glazor .NET的高级，可定制和高性能组件。

注意免费用于商业用途。

请注意，此库是完整产品包的精简版：for Blazor的Integralui。此版本中排除了一些更高级的组件功能。

这是其中包括的简要概述：

成分

按钮 - 表示一个按钮

ButtOngroup-管理组中排列的多个按钮的操作

日历 - 使用户可以使用视觉每月日历显示选择日期

卡 - 两侧的翻转卡

复选框 - 代表一个复选框

下拉 - 在下拉窗口中显示其他组件

列表 - 显示一个简单的项目列表，其中包含自定义布局中的内容

POPOVER-在指定元素上显示自定义HTML内容

RadioButton-代表一个广播按钮

选择 - 允许您从下拉列表中选择一个项目

工具提示 - 将工具提示添加到元素

Treelist-允许您一次仅显示一个列表的树层次结构

依赖性

用于大爆炸的Integralui Lite是使用.NET 8.0框架构建的。

演示

在线QuickStart应用程序 - 包含每个组件的在线演示

安装

npm install https://github.com/lidorsystems/integralui-lite-blazor.git

或直接来自NPM

npm i integralui-lite-blazor

库文件位于产品安装目录的 /bin文件夹中。

将Nuget软件包从 /bin文件夹复制 /粘贴到项目中的引用文件夹（您引用外部或供应商库的文件夹）。 /资源文件夹是可选的。
从本地文件夹中安装Nuget软件包，以备整数Lite库。
打开您的项目
从解决方案资源管理器右键单击依赖项选项上，然后选择“管理Nuget软件包...”
在右上角单击工具图标以创建新的包源
通过舔 +工具按钮来创建一个新的软件包源
在名称字段下输入Integralui Lite，然后在源字段下单击浏览按钮以选择您的引用文件夹，然后单击“更新”按钮，然后按OK
引用文件夹应包含用于Integralui Lite库的Nuget软件包，该库是 /bin文件夹复制的（请参见上面的第一行）
在Nuget软件包中
选择“浏览”选项卡以查看所有可用的Integraui版本
安装最新版本
关闭Nuget软件包管理器

现在，您可以使用Integralui Lite库中的所有组件。您可以导入的名称空间很少：

integralui.lite.com
integralui.lite.data
integralui.lite.events
integralui.lite.interfaces
integralui.lite.Services

所有组件均位于integralui.lite.com下，命名空间。

如何在Blazor应用中使用Integralui组件

首先，您需要在您的身边安装Blazor库的Integralui Lite，并为要使用的组件添加引用（请参见上面的步骤）。

如果是Integalui列表组件，则需要执行以下操作：

在您的项目中打开大火页面
添加将导入Integralui Lite组件的代码行
使用Integaluist标签放置列表组件
指定您将用作数据模型的通用Titem类型
设置项目属性以将列表连接到您的数据源
（可选）定义将使用ItemTemplate创建项目内容的模板
（可选）在模板中添加自定义的HTML元素或其他大型组件
（可选）添加其他功能，例如排序，过滤等。需要设置相应的属性或事件
（可选）使用 @ref属性创建对组件的引用，以调用公共方法

例如：

 @page "/"

<IntegralUIList @ref=listRef Id="list-sample" TItem="CustomItem"
    Items="@items"
    MouseWheelSpeed="IntegralUISpeedMode.VerySlow"
    Size="@ctrlSize">
    <ItemTemplate>
        <span>@context.Item?.Text</span>
    </ItemTemplate>
</IntegralUIList>

@code {
    // Get a reference to the IntegralUI TreeView component to call public methods
    private IntegralUIList<CustomItem>? listRef;

    // Data model
    public class CustomItem
    {
        public string? Id { get; set; }
        public string? Genre { get; set; }
        public double Rating { get; set; }
        public bool Selected { get; set; } = false;
        public string? Text { get; set; }
        public int Year { get; set; }
    }

    // Define the component size
    public IntegralUISize ctrlSize = new() { Width = 350, Height = 300 };

    // Add items to the List component
    public List<CustomItem> items = new()
    {
        new CustomItem { Id = "1", Genre = "Sci-Fi", Text = "Star Trek", Year = 2009, Rating = 8 },
        new CustomItem { Id = "2", Genre = "Adventure", Text = "Cast Away", Year = 2000, Rating = 7 },
        new CustomItem { Id = "3", Genre = "Action", Text = "Gladiator", Year = 2000, Rating = 8 },

        // . . .
    };
}