Web Components 선택

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

    Web Components Select Example

    Usage

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

    npm install igniteui-webcomponents

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

    import {
    defineComponents,
    IgcSelectComponent
}
from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcSelectComponent);

    Ignite UI for Web Components 에 대한 전체 소개는 시작 항목을 참조하세요.

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

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

    <igc-select>
    <igc-select-item value="orange">Orange</igc-select-item>
    <igc-select-item value="apple">Apple</igc-select-item>
    <igc-select-item value="banana">Banana</igc-select-item>
    <igc-select-item value="mango">Mango</igc-select-item>
</igc-select>

    선택하다

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

    Item

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

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

    <igc-select>
    <igc-select-header>Tasks</igc-select-header>
</igc-select>

    Group

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

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

    <igc-select>
    <igc-select-group>
        <span slot="label">Europe</span>

        <igc-select-item>
          <igc-icon @ref="IconRef" slot="prefix" name="place" collection="material"></igc-icon>
          Germany
          <span slot="suffix">DE</span>
        </igc-select-item>

        <igc-select-item>
          <igc-icon slot="prefix" name="place" collection="material"></igc-icon>
          France
          <span slot="suffix">FR</span>
        </igc-select-item>

        <igc-select-item>
          <igc-icon slot="prefix" name="place" collection="material"></igc-icon>
          Spain
          <span slot="suffix">ES</span>
        </igc-select-item>
    </igc-select-group>
</igc-select>

    Validation

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

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

    Keyboard Navigation

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

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

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

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

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

    Styling

    아래 나열된 노출된 CSS 부분을 사용하여 Ignite UI for Web Components IgcSelectComponent 구성 요소 및 해당 항목의 모양을 변경할 수 있습니다.

    CSS Parts

    구성요소 선택

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

    품목 구성요소 선택

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

    그룹 구성요소 선택

    부품명 설명
    label 선택한 그룹 항목 위에 콘텐츠를 렌더링하는 라벨 래퍼입니다.

    API Reference

    Additional Resources