Web Components 목록 개요

Ignite UI for Web Components 항목 그룹을 표시할 때 매우 유용합니다. 간단한 텍스트 항목 목록을 만들거나 다양한 레이아웃 요소의 배열을 포함하는 더 복잡한 목록을 만들 수 있습니다. IgcListComponent 구성 요소는 항목 행을 표시하고 하나 이상의 헤더도 지원합니다. 각 목록 항목은 완전히 템플릿화 가능하며 유효한 HTML 또는 기타 구성 요소를 지원합니다.

Web Components List Example

다음 예는 이름과 전화번호 속성이 있는 연락처로 채워진 목록을 나타냅니다. 아래에 설명된 IgcListComponent 구성 요소는 IgcAvatarComponent 및 IgcButtonComponent 요소를 사용하여 사용자 경험을 풍부하게 하고 텍스트 및 통화 작업에 대한 아바타 사진 및 버튼 설정 기능을 노출합니다.

Usage

기본적으로 목록 웹 구성 요소를 사용하면 항목의 수직 목록을 쉽게 표시할 수 있습니다.

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

npm install igniteui-webcomponents

import { defineComponents, IgcListComponent } from 'igniteui-webcomponents';

defineComponents(IgcListComponent);

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

Add List Items

이제 다음 코드를 추가하여 간단한 항목 목록을 얻을 수 있습니다.

    <igc-list>
        <igc-list-header>Header</igc-list-header>
        <igc-list-item>
            <h2 slot="title">Item 1</h2>
        </igc-list-item>
        <igc-list-item>
            <h2 slot="title">Item 2</h2>
        </igc-list-item>
        <igc-list-item>
            <h2 slot="title">Item 3</h2>
        </igc-list-item>
    </igc-list>

모든 것이 순조롭게 진행되면 브라우저에 다음이 표시됩니다.

게임을 조금 강화하고 목록 항목을 향상시켜 보겠습니다. 이름 아래에 이름과 전화번호가 표시되는 연락처 목록을 만들고 싶다고 가정해 보겠습니다. 이를 달성하기 위해 다음 예에서 설명한 대로 목록 항목과 함께 제공되는 일부 슬롯을 사용할 수 있습니다.

<igc-list>
    <igc-list-header>
        <h1>Contacts</h1>
    </igc-list-header>
    <igc-list-item>
        <h2 slot="title">Terrance Orta</h2>
        <span slot="subtitle">770-504-2217</span>
    </igc-list-item>
    <igc-list-item>
        <h2 slot="title">Richard Mahoney</h2>
        <span slot="subtitle">423-676-2869</span>
    </igc-list-item>
    <igc-list-item>
        <h2 slot="title">Donna Price</h2>
        <span slot="subtitle">859-496-2817</span>
    </igc-list-item>
</igc-list>

위의 코드를 구현한 후 목록 구성 요소는 이제 다음과 같아야 합니다.

Adding Avatar and Buttons

IgcListComponent 구성 요소와 함께 다른 구성 요소 중 일부를 사용하여 경험을 풍부하게 하고 일부 기능을 추가할 수 있습니다. 이름과 전화번호 왼쪽에 멋진 사진 아바타가 있을 수 있습니다. 또한 사용자가 연락처에 문자를 보내고 전화를 걸 수 있도록 오른쪽에 몇 가지 버튼을 추가할 수 있으므로 연락처 목록 구성 요소를 업데이트하여 아바타와 버튼을 표시해 보겠습니다. 목록 항목의 슬롯 중 일부를 사용하여 이를 수행할 수 있습니다.

    <igc-list>
        <igc-list-header>
            <h1>Job Positions</h1>
        </igc-list-header>
        <igc-list-item>
            <igc-avatar slot="start" src="https://randomuser.me/api/portraits/men/27.jpg" shape="circle">
                AA
            </igc-avatar>
            <h2 slot="title">Terrance Orta</h2>
            <span slot="subtitle">770-504-2217</span>
            <igc-button slot="end" variant="outlined">
                Text
            </igc-button>
            <igc-button slot="end" variant="outlined">
                Call
            </igc-button>
        </igc-list-item>
        <igc-list-item>
            <igc-avatar slot="start" src="https://randomuser.me/api/portraits/men/1.jpg" shape="circle">
                AA
            </igc-avatar>
            <h2 slot="title">Richard Mahoney</h2>
            <span slot="subtitle">423-676-2869</span>
            <igc-button slot="end" variant="outlined">
                Text
            </igc-button>
            <igc-button slot="end" variant="outlined">
                Call
            </igc-button>
        </igc-list-item>
        <igc-list-item>
            <igc-avatar slot="start" src="https://randomuser.me/api/portraits/women/50.jpg" shape="circle">
                AA
            </igc-avatar>
            <h2 slot="title">Donna Price</h2>
            <span slot="subtitle">859-496-2817</span>
            <igc-button slot="end" variant="outlined">
                Text
            </igc-button>
            <igc-button slot="end" variant="outlined">
                Call
            </igc-button>
        </igc-list-item>
    </igc-list>

start 슬롯은 목록 항목의 다른 모든 콘텐츠 앞에 일종의 미디어를 추가하는 데 사용됩니다. 대상 요소(이 경우 IgcAvatarComponent 구성 요소)에도 기본 위치와 간격이 제공됩니다.

end 슬롯은 스위치, 버튼, 확인란 등으로 표시되는 일종의 작업이나 메타데이터가 있는 목록 항목에 사용됩니다. 우리는 IgcButtonComponent 구성 요소를 사용합니다.

또한 사용자가--ig-size CSS 변수를 사용하여 목록의 크기를 변경할 수 있도록 허용하겠습니다. 모든 크기 값을 표시하기 위해 일부 라디오 버튼을 추가하겠습니다. 이렇게 하면 하나를 선택할 때마다 목록의 크기가 변경됩니다.

<igc-radio-group id="radio-group" alignment="horizontal">
    <igc-radio name="size" value="small" label-position="after">Small</igc-radio>
    <igc-radio name="size" value="medium" label-position="after">Medium</igc-radio>
    <igc-radio name="size" value="large" label-position="after" checked>Large</igc-radio>
</igc-radio-group>

this.list = document.getElementById('list') as IgcListComponent;
this.radioGroup = document.getElementById('radio-group') as IgcRadioGroupComponent;

this.radioGroup.addEventListener('click', (radio: any) => {
    this.list.style.setProperty('--ig-size', `var(--ig-size-${radio.target.value})`);
});

위 코드를 구현한 결과는 다음과 같아야 합니다.

Styling

노출된 CSS 부분(title, subtitle 및 end 중 일부를 사용하여 목록의 모양을 변경할 수 있습니다.

igc-list-header {
    font-size: 20px;
    font-weight: 700;
    color: #3f51b5;
}

igc-list-item::part(title) {
    font-size: 18px;
    color: #3f51b5;
}

igc-list-item::part(subtitle) {
    color: #0099ff;
}

igc-list-item::part(end) {
    --ig-secondary-500: 230,48%,47%;
}

이 기사에서는 IgcListComponent 구성 요소에 대해 많은 내용을 다루었습니다. 먼저 텍스트 항목이 포함된 간단한 목록을 만들었습니다. 그런 다음 IgcAvatarComponent 및 IgcButtonComponent와 같은 Ignite UI for Web Components 사용하여 연락처 항목 목록을 만들고 여기에 기능을 추가했습니다. 마지막으로 노출된 CSS 부분을 통해 컴포넌트의 외형을 변경했습니다.