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 },

        // . . .
    };
}