Blazor 셀렉트

    Ignite UI for Blazor 드롭다운에 배치된 항목 목록에서 단일 선택을 허용합니다. 이 폼 컨트롤은 단일 또는 여러 문자 일치에 따라 선택을 포함한 빠른 항목 목록 탐색을 제공합니다.

    Blazor Select Example

    Usage

    컴포넌트IgbSelect를 사용하기 전에 추가 컴포넌트와 함께 등록해야 합니다:

    // in Program.cs file

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

    스타일링을 컴포넌트에 적용하려면 추가 CSS 파일을 연결해야 합니다IgbSelect. 다음 내용은 Blazor Web Assembly 프로젝트의 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.

    컴포넌트를 사용하기 위해 선택할 수 있는 목록IgbSelect과 함께 추가IgbSelectItem 하세요:

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

    선택하다

    The IgbSelect component can be used inside a Form component, thus it exposes a Name property to be registered with. It also has a Label, and Placeholder properties. The Outlined property is used for styling purposes only when it comes to the Material theme. Except for the default slot, the component provides a few other slots including header, footer, helper-text, prefix, suffix, and toggle-icon. The component size can be changed using the --ig-size CSS variable.

    Item

    그IgbSelectItem 컴포넌트는 사용자가 다음 단계에 대해 사용할 옵션 목록을 선언적으로 지정할 수 있게 합니다.IgbSelect 제어. 각 아이템은Value 선택 시 보유하는 데이터를 나타내는 속성입니다. 그IgbSelectItem 기본 슬롯이 있어 아이템의 텍스트 내용을 지정할 수 있습니다. 이 텍스트 내용은 만약Value 재산은 해당 위에 존재하지 않습니다.IgbSelectItem. 또한 다음에 렌더링할 수 있도록 맞춤형 콘텐츠를 제공할 수도 있습니다.IgbSelectItem 콘텐츠를 사용하여prefix 그리고suffix 슬롯. 선택한 항목을 미리 정의하면 다음에Selected 재산. 또한 일부 또는 모든 아이템을 비활성화할 수도 있습니다.Disabled 재산.

    항목을IgbSelectHeader 사용해 항목 그룹의 헤더를 제공할 수 있습니다.

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

    Group

    컴포넌트의IgbSelectItem 개방과 닫는 괄호 사이에 여러IgbSelectGroup 개의 s를 배치할 수 있어, 사용자가 시각적으로 이들을 함께 묶을 수 있습니다. 슬롯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 대부분의IgbInput 부동산Required​Disabled​Autofocus, 예를 들어 , 이 컴포넌트는 또한 검증에 묶인 메서드를 노출합니다:

    • reportValidity- 유효성을 검사하고 유효하지 않으면 컴포먼스에 집중합니다.

    Keyboard Navigation

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

    • 열기Select 사용 Alt + ↑ ↓ 조합 또는 클릭하여 우주 또는 들어가다 열쇠.
    • 닫기Select 사용 Alt + ↑ 또는 ↓ 조합 또는 들어가다, 우주, ESC 또는IgbTab 키.
    • ​← → 키를 사용하면 목록의 이전 항목이 선택됩니다.
    • ​↑ ↓ 키를 사용하면 목록의 다음 항목을 선택할 수 있습니다.
    • 또는 END 키를 HOME 사용하면 목록의 첫 번째 또는 마지막 항목이 선택됩니다.
    • 문자를 입력하면 항목 목록을 쿼리하고 현재 사용자 입력과 가장 일치하는 항목을 선택합니다.

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

    • 또는 SPACE 키를 사용하면 ENTER 항목이 선택되고 목록이 닫힙니다.
    • ​← → 키를 사용하면 목록의 이전 항목이 활성화됩니다.
    • ​↑ ↓ 키를 사용하면 목록의 다음 항목이 활성화됩니다.
    • 또는 END 키를 사용하면 HOME 목록의 첫 번째 또는 마지막 항목이 활성화됩니다.

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

    API Reference

    Additional Resources