React Select

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

    React Select Example

    Usage

    먼저, 다음 명령을 실행하여 Ignite UI for React 설치해야 합니다.

    npm install igniteui-react

    그 다음에는 와 ,IgrSelect 그리고 필요한 CSS를 이렇게 가져오IgrSelectItem 면 됩니다:

    import { IgrSelect, IgrSelectItem } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

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

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

    <IgrSelect>
  <IgrSelectItem value="Orange"><span>Orange</span></IgrSelectItem>
  <IgrSelectItem value="Apple"><span>Apple</span></IgrSelectItem>
  <IgrSelectItem value="Banana"><span>Banana</span></IgrSelectItem>
  <IgrSelectItem value="Mango"><span>Mango</span></IgrSelectItem>
</IgrSelect>

    선택하다

    컴포넌트는IgrSelect 컴포넌트Form 내부에서 사용할 수 있어, 등록할 속성을 노출시킵니다name. 또한 alabel와placeholder 성관계를 가집니다. 이 부동산은outlined Material 테마와 관련해 스타일링 목적으로만 사용됩니다. 기본 슬롯을 제외하고, 이 컴포넌트는 몇 가지 다른 슬롯을 제공합니다. 예를 들어header,footer​helper-text​prefix​suffix​toggle-icon 컴포넌트 크기는 CSS 변수를--ig-size 사용하여 변경할 수 있습니다.

    Item

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

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

    <IgrSelect>
  <IgrSelectHeader>
    <span>Tasks</span>
  </IgrSelectHeader>
</IgrSelect>

    Group

    컴포넌트의IgrSelectItem 개방과 닫는 괄호 사이에 여러IgrSelectGroup 개의 s를 배치할 수 있어, 사용자가 시각적으로 이들을 함께 묶을 수 있습니다. 슬롯IgrSelectGroup을 통해label 레이블을 지정할 수 있고, 속성으로disabled 비활성화할 수 있습니다.

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

    <IgrSelect>
  <IgrSelectGroup>
    <span slot="label">Europe</span>
    <IgrSelectItem>
      <span slot="prefix">
        <IgrIcon name="place" collection="material"></IgrIcon>
      </span>
      <span> Germany </span>
      <span slot="suffix">DE</span>
    </IgrSelectItem>
    <IgrSelectItem>
      <span slot="prefix">
        <IgrIcon name="place" collection="material"></IgrIcon>
      </span>
      <span> France </span>
      <span slot="suffix">FR</span>
    </IgrSelectItem>
    <IgrSelectItem>
      <span slot="prefix">
        <IgrIcon name="place" collection="material"></IgrIcon>
      </span>
      <span> Spain </span>
      <span slot="suffix">ES</span>
    </IgrSelectItem>
  </IgrSelectGroup>
</IgrSelect>

    Validation

    또한, 이 건물은IgrSelect 대부분의IgrInput 부동산required​disabled​autofocus, 예를 들어 , 이 컴포넌트는 또한 검증에 묶인 메서드를 노출합니다:

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

    Keyboard Navigation

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

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

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

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

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

    Styling

    아래에 나열된 노출된 CSS 부품을 사용하여 Ignite UI for ReactIgrSelect 컴포넌트와 그 항목들의 외관을 변경할 수 있습니다:

    구성요소 선택

    부품명 설명
    input 캡슐화된 IGC 입력.
    label 캡슐화된 텍스트 레이블입니다.
    list 옵션 목록을 보유하는 래퍼입니다.
    prefix 입력 전에 콘텐츠를 렌더링하는 접두사 래퍼입니다.
    suffix 입력 후 콘텐츠를 렌더링하는 접미사 래퍼입니다.
    toggle-icon 접미사 래퍼 내부의 콘텐츠를 렌더링하는 토글 아이콘 래퍼입니다.
    helper-text 입력 아래에 콘텐츠를 렌더링하는 도우미 텍스트 래퍼입니다.

    품목 구성요소 선택

    부품명 설명
    content 항목의 텍스트 콘텐츠를 보유하는 기본 래퍼입니다.
    prefix 기본 래퍼 앞에 콘텐츠를 렌더링하는 접두사 래퍼입니다.
    suffix 기본 래퍼 뒤에 콘텐츠를 렌더링하는 접미사 래퍼입니다.

    그룹 구성요소 선택

    부품명 설명
    label 선택한 그룹 항목 위에 콘텐츠를 렌더링하는 라벨 래퍼입니다. 
    igc-select::part(base) {
  background: var(--ig-primary-50);
}

igc-select-item[active] {
  background: var(--ig-secondary-300);
}

igc-select::part(input) {
  background-color: var(--ig-primary-50);
}

igc-select::part(prefix),
igc-select::part(suffix) {
  color: var(--ig-secondary-500-contrast);
  background: var(--ig-secondary-500);
}

    API Reference

    Additional Resources