App Builder를 사용한 Blazor 코드 생성

    .NET 6에서는 Blazor WASM 및 Server 코드 생성 옵션을 사용하여 공식적으로 App Builder 버전을 지원합니다. 이 버전은 Blazor 지원에 대한 압도적인 기능 요청 이후에 출시됩니다.

    이는 간단한 드래그 앤 드롭으로 모든 Blazor UI를 생성하고 거의 모든 구성 요소에 대해 한 번의 클릭으로 프로덕션 준비 완료 Razor, C# 및 CSS 코드를 모두 받을 수 있다는 것을 의미합니다.

    Blazor 구성 요소 가용성 목록은 앱 생성 지원되는 구성 요소 섹션을 참조하세요.

    선호도 및 요구 사항에 따라 Blazor Web Assembly 또는 Blazor Server 앱을 생성할 수 있습니다.

    App Builder에서 Blazor 코드 생성

    Note

    아직 사용할 수 없는 구성 요소에 대해 코드를 생성하려고 하면 해당 구성 요소가 아직 지원되지 않음을 알리는 자리 표시자가 표시됩니다. 이를 통해 디자이너에서 더 복잡한 UI 개발을 자제할 필요가 없습니다.

    이 문서에서

    소개

    언급했듯이 Blazor 코드 생성 기능은 많은 새로운 구성 요소를 지원하며 많은 구성 요소가 곧 출시될 예정입니다. Grid 및 Tree Grid 코드 생성을 놓치지 마세요. 대부분의 grid 기능(예: 데이터 바인딩)이 이제 지원되므로 Ignite UI for Blazor의 기본 grid 구성 요소를 사용하여 Blazor 애플리케이션을 실행할 수 있습니다! Excel 스타일 필터링, 페이징, 행 편집, 셀 선택 등 많은 기능을 사용할 수 있습니다.

    Blazor 코드 생성

    애플리케이션 설계를 완료하고 해당 코드를 미리 보기 전에 탐색 모음에 있는 Platform picker 드롭다운에 주의하세요. 이는 Publish to Github 및 Preview 작업 버튼 바로 옆에 있습니다. Blazor에 대한 코드를 생성하려면 Blazor WASM 또는 Blazor Server 옵션을 선택하고, 앱의 선호되는 프레임워크인 경우 Angular 또는 Web Components를 선택합니다. picker는 선택 항목을 기억하므로 다음 번에 AppBuilder로 이동할 때 원하는 프레임워크가 미리 선택되어 있습니다.

    GitHub에 애플리케이션 업로드

    애플리케이션을 Preview 모드에서 보거나 머신에서 로컬로 다운로드하는 것 외에도 전체 앱 코드 리포지토리를 생성하는 옵션이 있습니다. 이렇게 하려면 Generate app 버튼으로 이동한 다음 GitHub 계정을 App Builder에 연결합니다.

    알려진 문제 및 제한 사항

    Blazor 애플리케이션 생성에는 다음과 같은 제한 사항이 있습니다.

    • 생성된 애플리케이션에서 Bootstrap이 꺼집니다.

    생성된 구성 요소에는 다음과 같은 제한 사항이 있습니다.

    • Card:
      • 역순 작업이 생성된 코드에 반영되지 않습니다.
      • "Actions-column" 유형의 구분선이 생성된 코드에 반영되지 않습니다.
    • Navigation Drawer
      • pin threshold를 지원하지 않습니다.
    • Avatar:
      • "Initials" 유형이 콘텐츠를 처음 두 문자로 제한하지 않습니다.
    • Icon
      • 생성된 코드에서 IgbIcon을 사용하지 않습니다. 아이콘을 사용하는 모든 구성 요소도 IgbIcon으로 생성되지 않습니다.
    • Date Picker:
      • Dialog 모드를 지원하지 않습니다.
      • 여러 달을 표시하는 것을 지원하지 않습니다.
      • 작업 버튼을 지원하지 않습니다.
    • Icon Button
      • IgbIconButton을 생성하지 않고 대신 아이콘이 있는 IgbButton을 생성합니다.
    • Input Group - 유형이 "Date"로 설정된 경우:
      • 입력 형식을 지원하지 않습니다.
      • 표시 형식을 완전히 지원하지 않습니다.
      • 도움말 텍스트를 지원하지 않습니다.
      • 사용자 지정 접두사 및 접미사를 지원하지 않습니다.
      • 최소값 및 최대값을 지원하지 않습니다.
      • 값 루프를 지원하지 않습니다.
    • Radio Group
      • required를 지원하지 않습니다.
    • Grid/Tree Gird:
      • 열 선택을 지원하지 않습니다.
      • 행 작업(action strip)을 지원하지 않습니다.
    • Rating:
      • readonly 및 disabled 입력에 대해 [ngModel] 바인딩을 지원하지 않습니다(Angular의 경우).
      • 내보낸 코드에 대해 rating 요소의 반복을 지원하지 않습니다.
      • Angular 및 WC에만 포함되며 Blazor의 경우 Rating이 없습니다.

    지원되는 모든 구성 요소 목록은 앱 생성을 참조하세요.

    추가 리소스