Blazor 셀렉트

    Ignite UI for Blazor 하면 드롭다운에 배치된 항목 목록에서 단일 항목을 선택할 수 있습니다. 이 양식 컨트롤은 단일 또는 다중 문자 일치를 기반으로 선택을 포함한 빠른 항목 목록 탐색을 제공합니다.

    Blazor Select Example

    Usage

    구성 요소를 사용하기 IgbSelect 전에 추가 구성 요소와 함께 등록해야 합니다.

    // in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbSelectModule));

    또한 구성 요소에 스타일을 적용하려면 추가 CSS 파일을 연결해야 합니다 IgbSelect. Blazor 웹 어셈블리 프로젝트의 wwwroot/index.html 파일 또는 Blazor Server 프로젝트의 Pages/_Host.cshtml 파일에 다음을 배치해야 합니다.

    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

    [!Note] Please note that the select header and group components are not mandatory unless you want to use them.

    구성 요소 사용을 시작하려면 선택할 목록과 IgbSelectItem 함께 를 IgbSelect 추가합니다.

    <IgbSelect>
    <IgbSelectItem Value="orange">Orange</IgbSelectItem>
    <IgbSelectItem Value="apple">Apple</IgbSelectItem>
    <IgbSelectItem Value="banana">Banana</IgbSelectItem>
    <IgbSelectItem Value="mango">Mango</IgbSelectItem>
</IgbSelect>

    선택하다

    ​IgbSelect 구성 요소는 구성 요소 내에서 IgbForm 사용할 수 있으므로 등록할 속성을 노출 Name 합니다. 또한 a Label와 Placeholder 속성이 있습니다. 이 Outlined 속성은 Material 테마와 관련하여 스타일 지정 목적으로만 사용됩니다. 기본 슬롯을 제외하고, 구성 요소는 ,,,, prefix​ ​footer​ ​helper-text를 toggle-icon​ ​suffix 포함한 header 몇 가지 다른 슬롯을 제공합니다. 구성 요소 크기는 CSS 변수를 사용하여--ig-size 변경할 수 있습니다.

    Item

    이 IgbSelectItem 구성 요소를 사용하면 사용자가 사용할 옵션 목록을 선언적으로 지정할 수 있습니다. IgbSelect 제어. 각 항목은 Value 선택 시 전달하는 데이터를 나타내는 속성입니다. 이 IgbSelectItem 항목의 텍스트 내용을 지정할 수 있는 기본 슬롯이 있습니다. 이 텍스트 내용은 다음과 같은 경우 값으로 사용됩니다. Value 속성이 에 없습니다. IgbSelectItem. 또한 이전 또는 이후에 렌더링할 사용자 지정 콘텐츠를 제공할 수도 있습니다. IgbSelectItem를 사용하는 콘텐츠 prefix 그리고 suffix 슬롯. 를 설정하여 선택한 항목을 미리 정의할 수 있습니다. Selected 재산. 를 통해 일부 또는 모든 항목을 비활성화할 수도 있습니다. Disabled 재산.

    ​IgbSelectHeader 사용하여 항목 그룹에 대한 헤더를 제공할 수 있습니다.

    <IgbSelect>
    <IgbSelectHeader>Tasks</IgbSelectHeader>
</IgbSelect>

    Group

    사용자가 시각적으로 함께 그룹화할 수 있도록 IgbSelectGroup 구성 요소의 여는 괄호와 닫는 괄호 사이에 여러 IgbSelectItem을 배치할 수 있습니다. IgbSelectGroup은 label 슬롯을 통해 레이블을 지정하고 Disabled 속성을 통해 비활성화할 수 있습니다.

    [!Note] Keep in mind that if a select group is disabled, you cannot enable separate items of it.

    <IgbSelect>
    <IgbSelectGroup>
        <span slot="label">Europe</span>

        <IgbSelectItem>
          <IgbIcon @ref="IconRef" slot="prefix" name="place" collection="material"></IgbIcon>
          Germany
          <span slot="suffix">DE</span>
        </IgbSelectItem>

        <IgbSelectItem>
          <IgbIcon slot="prefix" name="place" collection="material"></IgbIcon>
          France
          <span slot="suffix">FR</span>
        </IgbSelectItem>

        <IgbSelectItem>
          <IgbIcon slot="prefix" name="place" collection="material"></IgbIcon>
          Spain
          <span slot="suffix">ES</span>
        </IgbSelectItem>
    </IgbSelectGroup>
</IgbSelect>

    Validation

    또한 IgbSelect,, Disabled​ ​Autofocus와 같은 Required 대부분의 IgbInput 속성을 지원합니다. 또한 구성 요소는 유효성 검사에 바인딩된 메서드를 노출합니다.

    • reportValidity- 유효성을 확인하고 유효하지 않은 경우 구성요소에 초점을 맞춥니다.

    Keyboard Navigation

    선택 항목에 초점이 맞춰져 있고 옵션 목록이 표시되지 않는 경우:

    • 열기 Select 사용하여 대체 + ↑ ↓ 조합하거나 공간 아니면 그 입력하다 열쇠.
    • 닫기 Select 사용하여 대체 + ↑ 또는 ↓ 조합 또는 다음 중 하나 입력하다, 공간, Esc 또는 IgbTab 열쇠.
    • ​← → 키를 사용하면 목록의 이전 항목이 선택됩니다.
    • ​↑ ↓ 키를 사용하면 목록의 다음 항목을 선택할 수 있습니다.
    • ​Home 또는 End 키를 사용하면 목록의 첫 번째 또는 마지막 항목이 선택됩니다.
    • 문자를 입력하면 항목 목록을 쿼리하고 현재 사용자 입력과 가장 일치하는 항목을 선택합니다.

    선택 항목에 초점이 맞춰지고 옵션 목록이 표시되면 다음과 같습니다.

    • ​Enter 또는 Space 키를 사용하면 항목을 선택하고 목록을 닫을 수 있습니다.
    • ​← → 키를 사용하면 목록의 이전 항목이 활성화됩니다.
    • ​↑ ↓ 키를 사용하면 목록의 다음 항목이 활성화됩니다.
    • ​Home 또는 End 키를 사용하면 목록의 첫 번째 또는 마지막 항목이 활성화됩니다.

    [!Note] The IgbSelect component supports only single selection of items.

    API Reference

    Additional Resources