Web Components 선택
Ignite UI for Web Components 하면 드롭다운에 배치된 항목 목록에서 단일 항목을 선택할 수 있습니다. 이 양식 컨트롤은 단일 또는 다중 문자 일치를 기반으로 선택을 포함한 빠른 항목 목록 탐색을 제공합니다.
Web Components 선택 예
용법
먼저 다음 명령을 실행하여 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] 선택 헤더 및 그룹 구성 요소는 사용하려는 경우가 아니면 필수가 아닙니다.
구성 요소 사용을 시작하려면 선택할 목록과 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
변경할 수 있습니다.
안건
이 IgcSelectItemComponent
구성 요소를 사용하면 사용자가 사용할 옵션 목록을 선언적으로 지정할 수 있습니다. IgcSelectComponent
제어. 각 항목은 value
선택 시 전달하는 데이터를 나타내는 속성입니다. 이 IgcSelectItemComponent
항목의 텍스트 내용을 지정할 수 있는 기본 슬롯이 있습니다. 이 텍스트 내용은 다음과 같은 경우 값으로 사용됩니다. value
속성이 에 없습니다. IgcSelectItemComponent
. 또한 이전 또는 이후에 렌더링할 사용자 지정 콘텐츠를 제공할 수도 있습니다. IgcSelectItemComponent
를 사용하는 콘텐츠 prefix
그리고 suffix
슬롯. 를 설정하여 선택한 항목을 미리 정의할 수 있습니다. Selected
재산. 를 통해 일부 또는 모든 항목을 비활성화할 수도 있습니다. disabled
재산.
머리글
IgcSelectHeaderComponent
사용하여 항목 그룹에 대한 헤더를 제공할 수 있습니다.
<igc-select> <igc-select-header>Tasks</igc-select-header> </igc-select>
그룹
사용자가 시각적으로 함께 그룹화할 수 있도록 IgcSelectGroupComponent
구성 요소의 여는 괄호와 닫는 괄호 사이에 여러 IgcSelectItemComponent
를 배치할 수 있습니다. IgcSelectGroupComponent
는 label
슬롯을 통해 레이블을 지정하고 disabled
속성을 통해 비활성화할 수 있습니다.
[!Note] 선택 그룹이 비활성화된 경우 해당 그룹의 개별 항목을 활성화할 수 없다는 점에 유의하세요.
<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>
확인
또한 IgcSelectComponent
,, disabled
autofocus
와 같은 required
대부분의 IgcInputComponent
속성을 지원합니다. 또한 구성 요소는 유효성 검사에 바인딩된 메서드를 노출합니다.
reportValidity
- 유효성을 확인하고 유효하지 않은 경우 구성요소에 초점을 맞춥니다.
키보드 탐색
선택 항목에 초점이 맞춰져 있고 옵션 목록이 표시되지 않는 경우:
- 열기
select
사용하여 대체 + ↑ ↓ 조합하거나 공간 아니면 그 입력하다 열쇠. - 닫기
select
사용하여 대체 + ↑ 또는 ↓ 조합 또는 다음 중 하나 입력하다, 공간, Esc 또는IgcTabComponent
열쇠. - ← → 키를 사용하면 목록의 이전 항목이 선택됩니다.
- ↑ ↓ 키를 사용하면 목록의 다음 항목을 선택할 수 있습니다.
- Home 또는 End 키를 사용하면 목록의 첫 번째 또는 마지막 항목이 선택됩니다.
- 문자를 입력하면 항목 목록을 쿼리하고 현재 사용자 입력과 가장 일치하는 항목을 선택합니다.
선택 항목에 초점이 맞춰지고 옵션 목록이 표시되면 다음과 같습니다.
- Enter 또는 Space 키를 사용하면 항목을 선택하고 목록을 닫을 수 있습니다.
- ← → 키를 사용하면 목록의 이전 항목이 활성화됩니다.
- ↑ ↓ 키를 사용하면 목록의 다음 항목이 활성화됩니다.
- Home 또는 End 키를 사용하면 목록의 첫 번째 또는 마지막 항목이 활성화됩니다.
[! [! 참고]
IgcSelectComponent
구성 요소는 단일 항목 선택만 지원합니다.
스타일링
아래 나열된 노출된 CSS 부분을 사용하여 Ignite UI for Web Components IgcSelectComponent
구성 요소 및 해당 항목의 모양을 변경할 수 있습니다.
CSS 부분
구성요소 선택
부품명 | 설명 |
---|---|
input |
캡슐화된 IGC 입력. |
label |
캡슐화된 텍스트 레이블입니다. |
list |
옵션 목록을 보유하는 래퍼입니다. |
prefix |
입력 전에 콘텐츠를 렌더링하는 접두사 래퍼입니다. |
suffix |
입력 후 콘텐츠를 렌더링하는 접미사 래퍼입니다. |
toggle-icon |
접미사 래퍼 내부의 콘텐츠를 렌더링하는 토글 아이콘 래퍼입니다. |
helper-text |
입력 아래에 콘텐츠를 렌더링하는 도우미 텍스트 래퍼입니다. |
품목 구성요소 선택
부품명 | 설명 |
---|---|
content |
항목의 텍스트 콘텐츠를 보유하는 기본 래퍼입니다. |
prefix |
기본 래퍼 앞에 콘텐츠를 렌더링하는 접두사 래퍼입니다. |
suffix |
기본 래퍼 뒤에 콘텐츠를 렌더링하는 접미사 래퍼입니다. |
그룹 구성요소 선택
부품명 | 설명 |
---|---|
label |
선택한 그룹 항목 위에 콘텐츠를 렌더링하는 라벨 래퍼입니다. |