React Card (カード) の概要

Ignite UI for React Card は、テキスト、画像、アイコン、およびボタンを視覚的にリッチなプレゼンテーションで表示し、より詳細な情報へのエントリ ポイントとして機能します。Card を使用してマルチメディア ダッシュボードを作成できます。

React Card の例

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ツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

使用方法

Card コンポーネントは、様々なオブジェクト タイプ、サイズやサポートされるアクションが異なる同様のオブジェクトから成るコンテンツを表示できます。

作業の開始

まず、次のコマンドを実行して、対応する Ignite UI for React npm パッケージをインストールする必要があります:

npm install igniteui-react
cmd

次に、以下のように、IgrCard とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります:

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 カード

カードの 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 要素を使用して IgrCardHeader と IgrCardContent をバンドルし、それらを垂直方向に整列させ、.card-horizontal クラスをラッピング div 要素に適用して、カードの 2 つのセクションを水平方向に整列させます。

.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

これで、アイコン ボタンがフラット スタイル テキスト ボタンの前に表示されます。

また、slot プロパティを省略して要素をデフォルトのスロットに移動するだけで、間にコンテンツを追加することもできます。

スタイル設定

カードはさまざまな要素をラップするコンテナであるため、スタイル設定は、その基本要素 (IgrCardHeader、IgrCardContent、IgrCardMedia、および IgrCardActions のサブコンポーネント) をスタイル設定することによって行われます。

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

まとめ

このトピックでは Card コンポーネントの詳細について説明しました。シンプルなカードを作成し、画像をいくつか追加して、もう少し魅力的にしました。カード内にアバター、ボタン、アイコンなどの追加の React を使用して、エクスペリエンスを充実させ、いくつかの機能を追加しました。そして最後に、基本要素の原色を変更することでカードの外観を変更しました。

API リファレンス

• IgrAvatar
• IgrButton
• IgrCardActions
• IgrCardContent
• IgrCardHeader
• IgrCardMedia
• IgrCard
• IgrIconButton
• IgrIcon
• スタイル設定 & テーマ

その他のリソース

• Ignite UI for React フォーラム (英語)
• Ignite UI for React GitHub (英語)