Web Components 선택

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

    Web Components 선택 예

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    이 샘플이 마음에 드시나요? 당사의 완전한 Ignite UI for Web Components 툴킷에 액세스하여 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

    용법

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

    npm install igniteui-webcomponents
cmd

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

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

defineComponents(IgcSelectComponent);
ts

    Ignite UI for Web Components에 대한 전체 소개를 보려면 시작하기 항목을 읽어보세요.

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

    구성 요소 사용을 시작하려면 선택할 목록과 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>
html

    선택하다

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

    안건

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

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

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

    EXAMPLE
    TS
    HTML
    CSS
    Edit in: 

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

    그룹

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

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

    EXAMPLE
    TS
    HTML
    CSS
    Edit in: 

    <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>
html
    Ignite UI for Web Components | CTA 배너

    확인

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

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

    키보드 탐색

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

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

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

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

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

    스타일링

    Ignite UI for Web Components의 모양을 변경할 수 있습니다 IgcSelectComponent 구성 요소와 해당 항목, 아래 나열된 노출된 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
    TS
    HTML
    index.css
    SelectStyling.css
    Edit in:

    API 참조

    추가 리소스