React 카드 개요

Ignite UI for React 텍스트, 이미지, 아이콘, 버튼을 시각적으로 풍부한 프레젠테이션으로 표시하여 더 자세한 정보로의 진입점으로 활용할 수 있습니다. 카드를 사용하여 멀티미디어 대시보드를 만들 수 있습니다.

React 카드 예시

EXAMPLE

TSX

CSS

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import './CardOverview.css';
import { IgrCard, IgrCardMedia, IgrCardHeader,
    IgrCardContent, IgrCardActions, IgrCardModule,
    IgrIconButton, IgrIconButtonModule, IgrButton,
    IgrButtonModule, IgrRipple, IgrRippleModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrCardModule.register();
IgrButtonModule.register();
IgrIconButtonModule.register();
IgrRippleModule.register();

export default class CardOverview extends React.Component<any, any> {

    constructor(props: any) {
        super(props);
        this.iconRef = this.iconRef.bind(this);
    }

    public render(): JSX.Element {
        return (
            <div className="container sample center">
                <div className="card-wrapper">
                    <IgrCard>
                        <IgrCardMedia key="media">
                            <img key="mediaImg" src="https://images.unsplash.com/photo-1518235506717-e1ed3306a89b?ixlib=rb-1.2.1&auto=format&fit=crop&w=640&q=50"></img>
                        </IgrCardMedia>

                        <IgrCardHeader key="header">
                            <h3 key="headerTitle" slot="title">New York City</h3>
                            <h5 key="headerSubtitle" slot="subtitle">City in New York</h5>
                        </IgrCardHeader>

                        <IgrCardContent key="content">
                            <p key="contentParagraph">New York City comprises 5 boroughs sitting where the
                                Hudson River meets the Atlantic Ocean. At its core is Manhattan,
                                a densely populated borough that’s among the world’s major commercial,
                                financial and cultural centers.</p>
                        </IgrCardContent>

                        <IgrCardActions key="actions">
                            <IgrButton key="actionsBtn">
                                <span key="btnSpan">Read more</span>
                                <IgrRipple key="btnRipple" />
                            </IgrButton>
                            <div slot="end" key="endSlot">
                                <IgrIconButton key="twitterIcon" ref={this.iconRef} style={{marginRight: "10px"}} name="twitter" collection="material">
                                    <IgrRipple key="twitterRipple"/>
                                </IgrIconButton>
                                <IgrIconButton key="fbIcon" name="facebook" collection="material">
                                    <IgrRipple key="fbRipple"/>
                                </IgrIconButton>
                            </div>
                        </IgrCardActions>
                    </IgrCard>
                </div>
            </div>
        );
    }

    public iconRef(icon: IgrIconButton){
        if (!icon) { return; }

        const twitterIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 3H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2V5a2 2 0 00-2-2zm-1.13 6v.39a8.61 8.61 0 01-13.25 7.25 5.69 5.69 0 00.72 0 6 6 0 003.76-1.3 3 3 0 01-2.83-2.1 2.75 2.75 0 00.57.05 3 3 0 00.8-.1 3 3 0 01-2.43-3 3.13 3.13 0 001.37.38 3 3 0 01-.93-4 8.57 8.57 0 006.24 3.17 3.1 3.1 0 01-.08-.74 3 3 0 015.24-2A6.38 6.38 0 0019 6.22a3.07 3.07 0 01-1.36 1.68 6.22 6.22 0 001.74-.48A6.09 6.09 0 0117.87 9z"></path></svg>';
        const facebookIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 22zm0-20a10 10 0 00-1.727 19.841v-7.6h-2.61v-3.018h2.61V8.995A3.641 3.641 0 0114.16 5a21.367 21.367 0 012.332.119v2.7h-1.6c-1.255 0-1.5.6-1.5 1.471v1.929h2.993L16 14.245h-2.6v7.647A9.994 9.994 0 0012 2z"></path></svg>';

        icon.registerIconFromText("twitter", twitterIcon, "material");
        icon.registerIconFromText("facebook", facebookIcon, "material");

    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<CardOverview/>);
tsxコピー

.card-wrapper {
    max-width: 320px;
    min-width: 220px;
}

.center {
    align-items: center;
}cssコピー

Edit in: Codesandbox

이 샘플이 마음에 드시나요? Ignite UI for React 전체에 액세스하고 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

용법

카드를 사용하면 다양한 유형의 개체 또는 크기와 지원되는 작업이 다를 수 있는 유사한 개체로 구성된 콘텐츠를 쉽게 표시할 수 있습니다.

시작하기

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

npm install igniteui-react
cmd

그런 다음 필요한 CSS를 IgrCard 가져오고 다음과 같이 모듈을 등록해야 합니다.

import { IgrCardModule, IgrCard, IgrCardHeader, IgrCardContent, IgrCardMedia, IgrCardActions } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrCardModule.register();
tsx

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

그런 다음 데모 카드 템플릿을 나타내기 위해 다음 코드를 추가할 수 있습니다.

<IgrCard>
    <IgrCardMedia>
        <img src="https://images.unsplash.com/photo-1518235506717-e1ed3306a89b?ixlib=rb-1.2.1&auto=format&fit=crop&w=640&q=50"></img>
    </IgrCardMedia>
    <IgrCardHeader>
        <h3 slot="title">New York City</h3>
        <h5 slot="subtitle">City in New York</h5>
    </IgrCardHeader>
    <IgrCardContent>
        <p>New York City comprises 5 boroughs sitting where the
            Hudson River meets the Atlantic Ocean. At its core is Manhattan,
            a densely populated borough that’s among the world’s major commercial,
            financial and cultural centers.</p>
    </IgrCardContent>
    <IgrCardActions>
        <IgrButton>
            <span>Read more</span>
            <IgrRipple />
        </IgrButton>
        <div slot="end">
            <IgrIconButton name="twitter" collection="material">
                <IgrRipple />
            </IgrIconButton>
            <IgrIconButton name="facebook" collection="material">
                <IgrRipple />
            </IgrIconButton>
        </div>
    </IgrCardActions>
</IgrCard>
tsx

위에서 몇 가지 사항을 알 수 있습니다. 첫째, 우리가 원할 때 태그 머리글 제목으로서의 요소(예: h3 제목, 우리는 그것을 IgrCardHeader 태그에 삽입하고 슬롯 이름을 title. 반대로, 다른 제목 요소를 만들고 싶다면 subtitle 우리는 슬롯의 이름을 지정할 것입니다. subtitle.

카드에 표시하려는 이미지나 비디오는 태그 안에 래핑합니다 IgrCardMedia. 이를 IgrCardMedia 통해 내부에 배치된 콘텐츠의 크기를 조정하여 요소의 전체 콘텐츠 상자를 채우는 동안 종횡비를 유지할 수 있습니다. 개체의 종횡비가 상자의 종횡비와 일치하지 않으면 개체가 그에 맞게 잘립니다.

태그 안에 IgrCardContent 무엇이든 넣을 수 있습니다. 일반적으로 텍스트는 거기로 이동합니다.

​IgrCardActions 마지막으로 버튼과 같은 실행 가능한 항목을 배치하는 위치입니다.

미디어, 엄지손가락, 아바타

제목과 부제 옆의 카드 헤더에 이미지나 아이콘을 표시하려면 요소의 슬롯 속성을 thumbnail에 할당하면 됩니다.

위의 카드를 예로 들어 내용을 편집하고 다음과 같이 아바타를 추가할 수 있습니다. IgrCardHeader​ ​slot="thumbnail"​

<IgrCardHeader>
    <div slot="thumbnail">
        <IgrAvatar src="path/to/image" initials="TS" />
    </div>
    <h3 slot="title">Title</h3>
    <h5 slot="subtitle">Subtitle</h5>
</IgrCardHeader>
tsx

위의 예에서는 카드 헤더의 제목 및 부제와 함께 아바타를 표시합니다.

윤곽선 카드

카드에는 설정된 경우 카드에서 그림자를 제거하고 얇은 테두리로 대체하여 카드를 배경과 분리하는 outlined 속성이 있습니다.

수평 레이아웃

기본적으로 카드의 모든 섹션(헤더, 콘텐츠, 미디어, 작업)은 수직으로 배치됩니다. 수직 공간이 많을 때 좋습니다. 카드의 섹션을 수평으로 배치하고 싶다고 가정해 보겠습니다. 간단한 CSS를 사용하여 이러한 레이아웃을 구현할 수 있습니다.

다음은 윤곽선이 있는 가로 카드의 예입니다.

<IgrCard>
    <div className="card-horizontal">
        <div>
            <IgrCardHeader>
                <img src="https://static.infragistics.com/xplatform/images/music/rozes.jpg" slot="thumbnail"></img>
                <h5 slot="title">Rozes</h5>
                <h5 slot="subtitle">Under the Grave (2016)</h5>
            </IgrCardHeader>
            <IgrCardContent>
                <p>As I have always said: I write what’s real and what’s true,
                    even if it means throwing myself under the bus.</p>
            </IgrCardContent>
        </div>
        <div className="divider"></div>
        <IgrCardActions>
            <span className="material-icons">skip_previous</span>
            <span className="material-icons">play_arrow</span>
            <span className="material-icons">skip_next</span>
        </IgrCardActions>
    </div>
</IgrCard>
tsx

추가 div 요소를 사용하여 and를 IgrCardHeader 함께 묶고, 세 IgrCardContent 로로 정렬하고, 래핑 div 요소에 클래스를 적용.card-horizontal 하여 카드의 두 섹션을 가로로 정렬합니다.

​.card-horizontal 클래스가 적용되는 스타일은 다음과 같습니다.

.card-horizontal {
    display: flex;
    flex-direction: row;
    flex: 1 1 0%;
}

.card-horizontal img {
    width: 64px;
    height: 64px;
}

.card-horizontal igc-card-actions {
    justify-content: center;
}
css

모든 것이 순조롭게 진행되었다면 카드는 다음과 같아야 합니다.

EXAMPLE

TSX

CSS

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import './CardHorizontal.css';
import { IgrCard, IgrCardHeader, IgrCardContent, IgrCardActions, IgrCardModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrCardModule.register();

export default class CardHorizontal extends React.Component<any, any> {

    constructor(props: any) {
        super(props);
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <div className="card-wrapper">
                    <IgrCard>
                        <div key="cardContainer" className="card-horizontal">
                            <div key="cardHeaderContainer">
                                <IgrCardHeader key="cardHeader">
                                    <img key="headerImg" src="https://static.infragistics.com/xplatform/images/music/rozes.jpg" slot="thumbnail"></img>
                                    <h5 key="headerTitle" slot="title">Rozes</h5>
                                    <h5 key="headerSubtitle" slot="subtitle">Under the Grave (2016)</h5>
                                </IgrCardHeader>
                                <IgrCardContent key="cardContent">
                                    <p key="content">As I have always said: I write what’s real and what’s true,
                                        even if it means throwing myself under the bus.</p>
                                </IgrCardContent>
                            </div>
                            <div key="divider" className="divider"></div>
                            <IgrCardActions key="cardActions">
                                <span key="actionsPrevious" className="material-icons">skip_previous</span>
                                <span key="actionsPlay" className="material-icons">play_arrow</span>
                                <span key="actionsNext" className="material-icons">skip_next</span>
                            </IgrCardActions>
                        </div>
                    </IgrCard>
                </div>
            </div>
        );
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<CardHorizontal/>);
tsxコピー

.card-wrapper {
    max-width: 400px;
    min-width: 250px;
}

.card-horizontal {
    display: flex;
    flex-direction: row;
    flex: 1 1 0%;
}

.card-horizontal img {
    width: 64px;
    height: 64px;
}

.card-horizontal igc-card-actions {
    justify-content: center;
}

.divider {
    border-right: 1px solid darkgray;
}
cssコピー

Edit in: Codesandbox

대체 레이아웃

레이아웃으로 더욱 창의력을 발휘할 수 있습니다 IgrCard.

아래는 세로 카드를 만드는 방법을 보여주는 예로, 카드의 모든 섹션이 세로로 배치되고 세 IgrCardMedia로 섹션과 함께 표시됩니다.

<IgrCard>
    <div className="semi-horizontal">
        <div>
            <IgrCardHeader>
                <IgrAvatar src="https://static.infragistics.com/xplatform/images/music/singer_with_mic.jpg" slot="thumbnail" />
                <h5 slot="title">HERE</h5>
                <h5 slot="subtitle">by Mellow D</h5>
            </IgrCardHeader>
            <IgrCardContent>
                <p>Far far away, behind the word mountains,
                    far from the countries Vokalia and Consonantia,
                    there live the blind texts.</p>
            </IgrCardContent>
            <IgrCardActions>
                <IgrButton><span>Play Album</span></IgrButton>
            </IgrCardActions>
        </div>

        <IgrCardMedia className='card-media'>
            <img src="https://static.infragistics.com/xplatform/images/music/singer_female.jpg"></img>
        </IgrCardMedia>
    </div>
</IgrCard>
tsx

.semi-horizontal {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
}

.card-media {
    width: 96px;
    min-width: 96px;
}
css

EXAMPLE

TSX

CSS

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import './CardSemiHorizontal.css';
import { IgrCard, IgrCardHeader, IgrCardContent, IgrCardActions, IgrCardMedia, IgrAvatar, IgrButton, IgrAvatarModule, IgrButtonModule, IgrCardModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrCardModule.register();
IgrAvatarModule.register();
IgrButtonModule.register();

export default class CardSemiHorizontal extends React.Component<any, any> {

    constructor(props: any) {
        super(props);
    }

    public render(): JSX.Element {
        return (
            <div className="container sample center">
                <div className="card-wrapper">
                    <IgrCard>
                        <div key="cardContainer" className="semi-horizontal">
                            <div key="cardHeaderContainer" >
                                <IgrCardHeader key="header">
                                    <IgrAvatar key="headerAvatar" src="https://static.infragistics.com/xplatform/images/music/singer_with_mic.jpg" slot="thumbnail" />
                                    <h5 key="headerTitle" slot="title">HERE</h5>
                                    <h5 key="headerSubtitle" slot="subtitle">by Mellow D</h5>
                                </IgrCardHeader>

                                <IgrCardContent key="content">
                                    <p key="contentParagraph">Far far away, behind the word mountains,
                                        far from the countries Vokalia and Consonantia,
                                        there live the blind texts.</p>
                                </IgrCardContent>

                                <IgrCardActions key="actions">
                                    <IgrButton key="actionsBtn">
                                        <span key="btnCaption">Play Album</span>
                                    </IgrButton>
                                </IgrCardActions>
                            </div>
                            
                            <IgrCardMedia key="media" className='card-media'>
                                <img key="mediaImg" src="https://static.infragistics.com/xplatform/images/music/singer_female.jpg"></img>
                            </IgrCardMedia>
                        </div>
                    </IgrCard>
                </div>
            </div>
        );
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<CardSemiHorizontal/>);
tsxコピー

.card-wrapper {
    max-width: 400px;
    min-width: 250px;
}

.semi-horizontal {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
}

.card-media {
    width: 96px;
    min-width: 96px;
}

.divider {
    border-right: 1px solid darkgray;
}

.center {
    align-items: center;
}
cssコピー

Edit in: Codesandbox

카드 액션

카드 작업 영역에서는 이미 언급한 내용에 대한 추가 구성을 허용합니다.

슬롯 이름을 전환하여 텍스트 버튼과 아이콘 버튼의 순서를 바꿀 수 있습니다.

<IgrCardActions>
    <IgrButton>
        <span>Read more</span>
        <IgrRipple />
    </IgrButton>
    <div slot="end">
        <IgrIconButton ref={this.iconRef} className="marginIcon" name="twitter" collection="material">
            <IgrRipple />
        </IgrIconButton>
        <IgrIconButton name="facebook" collection="material">
            <IgrRipple />
        </IgrIconButton>
    </div>
</IgrCardActions>
tsx

이제 아이콘 버튼이 텍스트 버튼 앞에 나타납니다.

간단히 슬롯 속성을 생략하고 요소가 기본 슬롯으로 이동하도록 하여 그 사이에 더 많은 콘텐츠를 추가할 수도 있습니다.

스타일링

카드는 서로 다른 요소를 래핑하는 컨테이너이기 때문에 스타일링은 빌딩 블록(the IgrCardHeader, IgrCardContent,, IgrCardMedia​ ​IgrCardActions 및 sub-components)의 스타일을 지정하여 수행됩니다.

igc-card {
  background-color: var(--ig-secondary-900);
}

igc-card-content,
igc-card-header::part(title) { 
  color: var(--ig-primary-500-contrast);
}

igc-card-header > *[slot="subtitle"] {
  color: var(--ig-warn-500);
  opacity: 0.9;
}

igc-icon-button::part(base) {
  background-color: var(--ig-primary-300);
}
css

EXAMPLE

TSX

CSS

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import './CardStyling.css';
import { IgrCard, IgrCardMedia, IgrCardHeader, IgrCardContent, IgrCardActions, IgrIconButton, IgrRipple, IgrCardModule, IgrIconButtonModule, IgrRippleModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrCardModule.register();
IgrIconButtonModule.register();
IgrRippleModule.register();

export default class CardStyling extends React.Component<any, any> {

    constructor(props: any) {
        super(props);           
        this.iconRef = this.iconRef.bind(this);        
    }

    public render(): JSX.Element {
        return (
            <div className="container sample center">
                <div className="card-wrapper">
                    <IgrCard>
                        <IgrCardMedia key="media" height="180px">
                            <img key="mediaImg" src="https://images.unsplash.com/photo-1541516160071-4bb0c5af65ba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80"></img>
                        </IgrCardMedia>

                        <IgrCardHeader className="header" key="header">
                            <h3 key="headerTitle" slot="title">Jane Doe</h3>
                            <h5 key="headerSubtitle" slot="subtitle">Professional Photographer</h5>
                        </IgrCardHeader>

                        <IgrCardContent key="content">
                            <p key="contentParagraph">Hi! I am Jane, photographer and filmmaker.
                                Photography is a way of feeling, of touching,
                                of loving. What you have caught on film is captured forever...
                                it remembers little things, long after you have
                                forgotten everything.</p>
                        </IgrCardContent>

                        <IgrCardActions key="actions">
                            <div key="actionsEndSlot" slot="end">
                                <IgrIconButton ref={this.iconRef} key="twitterBtn" name="twitter" collection="material">
                                    <IgrRipple key="twitterRipple"/>
                                </IgrIconButton>

                                <IgrIconButton key="fbButton" name="facebook" collection="material">
                                    <IgrRipple key="fbRipple"/>
                                </IgrIconButton>

                                <IgrIconButton key="instaBtn" name="instagram" collection="material">
                                    <IgrRipple key="instaRipple"/>
                                </IgrIconButton>
                            </div>
                        </IgrCardActions>

                    </IgrCard>
                </div>                
            </div>
        );
    }

    public iconRef(icon: IgrIconButton){
        if(!icon){
            return;
        }

        const twitterIcon = "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M19 3H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2V5a2 2 0 00-2-2zm-1.13 6v.39a8.61 8.61 0 01-13.25 7.25 5.69 5.69 0 00.72 0 6 6 0 003.76-1.3 3 3 0 01-2.83-2.1 2.75 2.75 0 00.57.05 3 3 0 00.8-.1 3 3 0 01-2.43-3 3.13 3.13 0 001.37.38 3 3 0 01-.93-4 8.57 8.57 0 006.24 3.17 3.1 3.1 0 01-.08-.74 3 3 0 015.24-2A6.38 6.38 0 0019 6.22a3.07 3.07 0 01-1.36 1.68 6.22 6.22 0 001.74-.48A6.09 6.09 0 0117.87 9z'></path></svg>";
        const facebookIcon = "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M12 22zm0-20a10 10 0 00-1.727 19.841v-7.6h-2.61v-3.018h2.61V8.995A3.641 3.641 0 0114.16 5a21.367 21.367 0 012.332.119v2.7h-1.6c-1.255 0-1.5.6-1.5 1.471v1.929h2.993L16 14.245h-2.6v7.647A9.994 9.994 0 0012 2z'></path></svg>";
        const instagramIcon = "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M19 3H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2V5a2 2 0 00-2-2zm-7 14.64A5.64 5.64 0 1117.64 12 5.65 5.65 0 0112 17.64zm5.86-10.18a1.32 1.32 0 111.32-1.32 1.32 1.32 0 01-1.32 1.32zM15.66 12A3.66 3.66 0 1112 8.34 3.66 3.66 0 0115.66 12z'></path></svg>";

        icon.registerIconFromText("facebook", facebookIcon, "material");
        icon.registerIconFromText("twitter", twitterIcon, "material");
        icon.registerIconFromText("instagram", instagramIcon, "material");        
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<CardStyling/>);
tsxコピー

.card-wrapper {
    max-width: 320px;
    min-width: 220px;
}

igc-card {
    background-color: #011627;
}

igc-card-content,
igc-card-header > *[slot="title"]{
    color: #FEFEFE;
}

igc-card-header > *[slot="subtitle"] {
    color: #ECAA53;
    opacity: 0.9;
}

igc-icon-button+igc-icon-button {
    margin-left: 10px;
}

.center {
    align-items: center;
}cssコピー

Edit in: Codesandbox

요약

이 글에서는 카드 구성 요소로 많은 것을 다루었습니다. 간단한 카드를 만들고 이미지를 추가하여 조금 더 매력적으로 만들었습니다. 아바타, 버튼, 아이콘과 같은 추가 React 카드 내부에 사용하여 경험을 풍부하게 하고 기능을 추가했습니다. 마지막으로 빌딩 블록의 주요 색상을 변경하여 카드의 모양을 변경했습니다.

API 참조

• IgrAvatar
• IgrButton
• IgrCardActions
• IgrCardContent
• IgrCardHeader
• IgrCardMedia
• IgrCard
• IgrIconButton
• IgrIcon
• Styling & Themes

추가 리소스

• Ignite UI for React 포럼
• Ignite UI for React GitHub