Web Components 목록 개요

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

    Web Components List Example

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

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.

    Usage

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

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

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

defineComponents(IgcListComponent);
ts

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

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

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

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

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

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

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

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

    ​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>
html
    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})`);
});
ts

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

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    Ignite UI for Web Components | CTA Banner

    Styling

    는 IgcListComponent 여러 CSS 부분을 노출하여 스타일을 완전히 제어할 수 있도록 합니다.

    이름 설명
    start 시작 컨테이너입니다.
    end 끝 컨테이너입니다.
    content 헤더 및 사용자 지정 콘텐츠 컨테이너입니다.
    header 제목 및 부제목 컨테이너입니다.
    title 제목 컨테이너입니다.
    subtitle 자막 컨테이너입니다. 
    igc-list-header {
  font-size: 20px;
  font-weight: 700;
  color: var(--ig-primary-700);
}

igc-list-item::part(title) {
  font-size: 18px;
  color: var(--ig-primary-600);
}

igc-list-item::part(subtitle) {
  color: var(--ig-primary-300);
}
css

    EXAMPLE
    TS
    HTML
    index.css
    ListStyling.css
    Edit in:

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

    API References

    Additional Resources