Web Components Card (カード) の概要

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

Web Components Card の例

使用方法

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

作業の開始

まず、次のコマンドを実行して Ignite UI for Web Components をインストールする必要があります。

npm install igniteui-webcomponents

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

defineComponents(IgcCardComponent);

Ignite UI for Web Components の完全な概要については、作業の開始トピックを参照してください。

次に、デモのカードテンプレートを表すために、以下のコードを追加します:

<igc-card>
    <igc-card-media>
        <img src="https://images.unsplash.com/photo-1518235506717-e1ed3306a89b?ixlib=rb-1.2.1&auto=format&fit=crop&w=640&q=50">
    </igc-card-media>

    <igc-card-header>
        <h3 slot="title">New York</h3>
        <h5 slot="subtitle">City in New York</h5>
    </igc-card-header>

    <igc-card-content>
        <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>
    </igc-card-content>

    <igc-card-actions>
        <igc-button slot="start">
            <igc-ripple></igc-ripple>
            Read more
        </igc-button>
        <div slot="end">
            <igc-icon-button name="twitter" style="margin-right: 10px;">
                <igc-ripple></igc-ripple>
            </igc-icon-button>
            <igc-icon-button name="facebook">
                <igc-ripple></igc-ripple>
            </igc-icon-button>
        </div>
    </igc-card-actions>
</igc-card>

上記を確認することができます。まず、h3 見出しのように、要素をヘッダータイトルとしてタグ付けする場合は、要素を IgcCardHeaderComponent タグの間に配置し、そのスロット名を title に設定します。逆に、別の見出し要素を subtitle にしたい場合は、そのスロットに subtitle という名前を付けます。

カードに表示する画像や動画は、IgcCardMediaComponent タグで囲みます。IgcCardMediaComponent を使用すると、内部に配置されたコンテンツのサイズを変更して、要素のコンテンツボックス全体を埋めながらアスペクト比を維持できます。オブジェクトのアスペクト比がボックスのアスペクト比と一致しない場合、オブジェクトは収まるようにクリップされます。

IgcCardContentComponent タグ内には何でも配置できます。通常テキストが配置されます。

最後に、IgcCardActionsComponent は、ボタンなどのアクション可能な項目を配置する場所です。

メディア、サムネイル、アバター

タイトルとサブタイトルの横のカードヘッダーに画像またはアイコンを表示する場合は、要素のスロットプロパティを thumbnail に割り当てることで実行できます。

上記のカードを例にとると、IgcCardHeaderComponent の内容を編集し、slot="thumbnail" でアバターを追加できます。

<igc-card-header>
    <igc-avatar slot="thumbnail" src="path/to/image" initials="TS"></igc-avatar>

    <h3 slot="title">Title</h3>
    <h5 slot="subtitle">Subtitle</h5>
</igc-card-header>

上記の例では、カードヘッダーのタイトルとサブタイトルの横にアバターが表示されます。

Outlined カード

カードの outlined 属性を設定すると、細い境界線と置き換えてカードと背景を区別してカードからすべてのシャドウを削除します。

水平レイアウト

デフォルトでは、カードのすべてのセクション (ヘッダー、コンテンツ、メディア、アクション) は縦にレイアウトされています。垂直方向のスペースが多くある場合に便利です。カードのセクションを水平に配置したいとします。このようなレイアウトは、簡単な CSS で実現できます。

以下はアウトラインのある水平カードの例です。

<igc-card outlined>
    <div class="card-horizontal">
        <div>
            <igc-card-header>
                <img src="ROZES-Under-the-Grave.jpg" slot="thumbnail">
                <h5 slot="title">Rozes</h5>
                <h5 slot="subtitle">Under the Grave (2016)</h5>
            </igc-card-header>
            <igc-card-content>
                <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>
            </igc-card-content>
        </div>
        <div class="divider"></div>
        <igc-card-actions>
            <igc-icon-button name="previous"></igc-icon-button>
            <igc-icon-button name="play"></igc-icon-button>
            <igc-icon-button name="next"></igc-icon-button>
        </igc-card-actions>
    </div>
</igc-card>

追加の div 要素を使用して IgcCardHeaderComponent と IgcCardContentComponent をバンドルし、それらを垂直方向に整列させ、.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;
}

すべて適切に設定できると、結果は以下のようになります。

その他のレイアウト

IgcCardComponent のレイアウトを使用すると、創造をさらに発展させることもできます。

以下は、半水平カードを作成する方法を示す例です。このカードでは、カードのすべてのセクションが垂直に配置され、IgcCardMediaComponent が垂直セクションの横に表示されます。

<igc-card>
    <div class="semi-horizontal">
        <div>
            <igc-card-header>
                <igc-avatar src="mellow_d.jpg" slot="thumbnail">MD</igc-avatar>
                <h5 slot="title">HERE</h5>
                <h5 slot="subtitle">by Mellow D</h5>
            </igc-card-header>
            <igc-card-content>
                <p>Far far away, behind the word mountains,
                    far from the countries Vokalia and Consonantia,
                    there live the blind texts.</p>
            </igc-card-content>
            <igc-card-actions>
                <igc-button>play album</igc-button>
            </igc-card-actions>
        </div>
        <igc-card-media class="card-media">
            <img src="here_media.jpg">
        </igc-card-media>
    </div>
</igc-card>

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

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

カードアクション

カードのアクション領域では、すでに説明したコンテンツに追加の設定を加えることができます。

テキストボタンとアイコンボタンのスロット名を切り替えることで、それらの順序を逆にすることができます。

<igc-card-actions>
    <igc-button slot="end">
        <igc-ripple></igc-ripple>
        Read more
    </igc-button>
    <div slot="start">
        <igc-icon-button name="twitter">
            <igc-ripple></igc-ripple>
        </igc-icon-button>
        <igc-icon-button name="facebook">
            <igc-ripple></igc-ripple>
        </igc-icon-button>
    </div>
</igc-card-actions>

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

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

スタイル設定

カードはさまざまな要素をラップするコンテナであるため、スタイル設定は、その基本要素 (ヘッダー、コンテンツ、メディア、およびアクションのサブコンポーネント) をスタイル設定することによって行われます。さらに、header コンポーネント (IgcCardHeaderComponent) は、3 つの CSS パーツ (header、title、subtitle) を公開します。これにより、ラッピング要素と 2 つのタイトル要素のスタイルを設定できます。

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

igc-card-content,
igc-card-header::part(title) {
    color: #FEFEFE;
}

igc-card-header::part(subtitle) {
    color: #ECAA53;
    opacity: 0.9;
}

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

まとめ

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

Web Components Card (カード) の概要

Web Components Card の例

使用方法

作業の開始

メディア、サムネイル、アバター

Outlined カード

水平レイアウト

その他のレイアウト

カードアクション

スタイル設定

まとめ

API リファレンス

その他のリソース

Web Components Card (カード) の概要

Web Components Card の例

使用方法

作業の開始

メディア、サムネイル、アバター

Outlined カード

水平レイアウト

その他のレイアウト

カード アクション

スタイル設定

まとめ

API リファレンス

その他のリソース

カードアクション