React Select

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

    React Select 예시

    EXAMPLE
    TSX
    CSS
    Edit in:

    이 샘플이 마음에 드시나요? Ignite UI for React 전체에 액세스하고 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

    용법

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

    npm install igniteui-react
cmd

    그런 다음 필요한 IgrSelectItem CSS를 IgrSelect 가져 와서 다음과 같이 모듈을 등록해야합니다.

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

IgrSelectModule.register();
IgrSelectItemModule.register();
tsx

    선택 헤더 및 그룹 구성 요소는 사용을 원하지 않는 한 필수 사항이 아닙니다.

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

    <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>
tsx

    선택하다

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

    안건

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

    EXAMPLE
    TSX
    CSS
    Edit in:

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

    EXAMPLE
    TSX
    CSS
    Edit in: 

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

    그룹

    구성 요소의 여는 대괄호와 닫는 대괄호 사이에 여러 IgrSelectItem 개의 s를 IgrSelectGroup 배치하여 사용자가 시각적으로 그룹화할 수 있습니다. 슬롯을 IgrSelectGroup​ ​label 통해 레이블을 지정할 수 있으며 속성을 통해 비활성화할 수 있습니다 disabled.

    선택 그룹이 비활성화된 경우에는 해당 그룹의 개별 항목을 활성화할 수 없습니다.

    EXAMPLE
    TSX
    CSS
    Edit in: 

    <IgrSelect>
  <IgrSelectGroup>
    <span slot="label">Europe</span>

    <IgrSelectItem>
      <span slot="prefix">
        <IgrIcon name="place" ref={iconPlace} collection="material"></IgrIcon>
      </span>
      <span> Germany </span>
      <span slot="suffix">DE</span>
    </IgrSelectItem>

    <IgrSelectItem>
      <span slot="prefix">
        <IgrIcon name="place" ref={iconPlace} collection="material"></IgrIcon>
      </span>
      <span> France </span>
      <span slot="suffix">FR</span>
    </IgrSelectItem>

    <IgrSelectItem>
      <span slot="prefix">
        <IgrIcon name="place" ref={iconPlace} collection="material"></IgrIcon>
      </span>
      <span> Spain </span>
      <span slot="suffix">ES</span>
    </IgrSelectItem>
  </IgrSelectGroup>
</IgrSelect>
tsx
    Ignite UI for React | CTA 배너

    확인

    또한 IgrSelect, disabled, autofocus와 같은 required 대부분의 IgrInput 속성을 지원합니다. 또한 구성 요소는 유효성 검사에 바인딩된 메서드를 노출합니다.

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

    키보드 탐색

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

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

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

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

    IgrSelect 구성 요소는 단일 항목 선택만 지원합니다.

    스타일링

    Ignite UI for React의 모양을 변경할 수 있습니다 IgrSelect 구성 요소와 해당 항목, 아래 나열된 노출된 CSS 부분을 사용합니다.

    구성요소 선택

    부품명 설명
    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);
}
css

    EXAMPLE
    TSX
    CSS
    Edit in:

    API 참조

    추가 리소스