integralui lite blazor 다운로드 - integralui lite blazor 소스 코드 다운로드

integralui lite blazor

기타 카테고리

24.3

다운로드

Blazor의 Integralui Lite, v24.3

Blazor 용 Integralui Lite는 Blazor .NET 용 고급, 사용자 정의 가능 및 고성능 구성 요소의 무료 UI 라이브러리입니다.

상업용으로 무료로 참고하십시오 .

이 라이브러리 는 전체 제품 패키지의 라이트 버전입니다 : Blazor 용 Integralui. 더 고급 구성 요소 기능 중 일부는이 버전에서 제외됩니다.

다음은 포함 된 내용에 대한 간단한 개요입니다.

구성 요소

버튼 - 버튼을 나타냅니다

Buttongroup- 그룹에 배열 된 여러 버튼의 작업 관리

캘린더 - 사용자가 시각적 월간 캘린더 디스플레이를 사용하여 날짜를 선택할 수 있습니다.

카드 - 양면이있는 플립 카드

확인란 - 확인란을 나타냅니다

드롭 다운 - 드롭 다운 창에 다른 구성 요소가 표시됩니다

목록 - 사용자 정의 레이아웃에 컨텐츠가있는 간단한 항목 목록이 표시됩니다.

POPOVER- 지정된 요소에 사용자 정의 HTML 컨텐츠를 표시합니다

Radiobutton- 라디오 버튼을 나타냅니다

선택 - 드롭 다운 목록에서 항목을 선택할 수 있습니다.

툴팁 - 요소에 툴팁을 추가합니다

트리리스트 - 한 번에 하나의 목록 만 표시하는 트리 계층을 탐색 할 수 있습니다.

의존성

Blazor 용 Integralui Lite는 .NET 8.0 프레임 워크로 제작되었습니다.

데모

온라인 QuickStart 앱 - 포함 된 각 구성 요소의 온라인 데모

설치

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

또는 NPM에서 직접

npm i integralui-lite-blazor

라이브러리 파일은 제품 설치 디렉토리의 /bin 폴더에 있습니다.

/bin 폴더에서 Nuget 패키지를 프로젝트의 참조 폴더 (외부 또는 공급 업체 라이브러리를 참조하는 폴더)로 Nuget 패키지를 복사 /붙여 넣습니다. /리소스 폴더는 선택 사항입니다.
로컬 폴더에서 Integralui Lite 라이브러리의 Nuget 패키지를 설치하십시오.
프로젝트를 엽니 다
Solution Explorer에서 종속성 옵션을 마우스 오른쪽 버튼으로 클릭하고 "Nuget 패키지 관리 ..."를 선택하십시오.
오른쪽 상단 코너에서 도구 아이콘을 클릭하여 새 패키지 소스를 생성합니다.
+ 도구 버튼을 핥아 새 패키지 소스 생성
이름 필드 아래에 Integralui Lite를 입력하고 소스 필드 아래에있는 버튼을 클릭하여 참조 폴더를 선택하고 업데이트 버튼을 클릭하고 확인을 누릅니다.
참조 폴더에는 /bin 폴더에서 복사 된 integralui lite 라이브러리의 Nuget 패키지가 포함되어야합니다 (위의 첫 번째 줄 참조)
NUGET 패키지 관리자에서 드롭 다운 목록에서 Integralui Lite 패키지 소스를 선택하십시오 (오른쪽 상단 코너)
사용 가능한 모든 Integraui 버전을 보려면 검색 탭을 선택하십시오.
최신 버전을 설치하십시오
Nuget 패키지 관리자를 닫으십시오

이제 Integralui Lite 라이브러리에서 사용 가능한 모든 구성 요소를 사용할 수 있습니다. 가져올 수있는 네임 스페이스는 거의 없습니다.

integralui.lite.components
integralui.lite.data
integralui.lite.events
integralui.lite.interfaces
integralui.lite.services

모든 구성 요소는 integralui.lite.com에 위치합니다.

Blazor 앱에서 Integralui 구성 요소를 사용하는 방법

처음에는 Blazor Library 용 Integralui Lite를 설치하고 사용하려는 구성 요소에 대한 참조를 추가해야합니다 (위의 단계 참조).

Integralui 목록 구성 요소의 경우 다음을 수행해야합니다.

프로젝트에서 Blazor 페이지를 엽니 다
Integralui lite 구성 요소를 가져올 코드 라인 추가
Integraluilist 태그를 사용하여 목록 구성 요소를 배치하십시오
데이터 모델로 사용할 일반 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 },

        // . . .
    };
}