tamuです。

lightning-cardを試してみました。

cardとは

一言でいうとコンテナです。 タイトル、アクション、フッタを持たせることができます。

こんな感じのやつです。

最小コード

1
2
3
<template>
    <lightning-card>カードです</lightning-card>
</template>

これをローカルサーバで起動するとこんな感じになります。


attribute

lightning-card のattributeは次のとおり。

icon-name

ヘッダ部分にアイコンを表示します。

アイコンは https://www.lightningdesignsystem.com/icons/ に一覧があります。

サンプル

1
<lightning-card icon-name="utility:animal_and_nature">がおー</lightning-card>

結果


title

ヘッダ部分にタイトルを表示します。

※ slotでも表現可能

サンプル

1
2
3
4
<lightning-card icon-name="utility:animal_and_nature"
                title="動物からの一言">
  がおー
</lightning-card>

結果


variant

カードの見え方が変わるようです。

basenarrow が指定でき、デフォルト値は base

base版


narrow版


ちょっとわからなかった。。。

slot

slotで指定できるのは以下のとおり。

title

タイトルを表示することができます。 太字にしたいとか、背景色を変えたいとか、そういうことをしないのであれば、attributeを使えとのこと。

サンプル

1
2
3
4
<lightning-card>
    <h1 slot="title">朝の挨拶</h1>
    おはようございます
</lightning-card>
1
2
3
4
5
h1 {
    color: white;
    font-weight: bold;
    background-color: blue;
}

結果


actions

lightning-buttonlightning-button-menu のようなアクション可能なコンポーネントを、タイトルの次(通常は右側)に表示することができます。

1
2
3
4
5
<lightning-card>
    <h1 slot="title">昼の挨拶</h1>
    こんにちは
    <lightning-button-icon icon-name="utility:down" slot="actions"></lightning-button-icon>
</lightning-card>

結果



なんかボタンがキツキツに見えるのですが、Lightningページに配置するとちゃんといい感じに見えます。

カードの下部にフッタを表示します。


こういう「すべて表示」のように使うと良いみたいです。

サンプル

1
2
3
4
5
6
7
8
<lightning-card>
    <h1 slot="title">夜の挨拶</h1>
    こんばんわ
    <lightning-button-icon icon-name="utility:down" slot="actions"></lightning-button-icon>
    <div slot="footer">
        以上です
    </div>
</lightning-card>

結果

default

bodyを示すプレースホルダーです。 使わなくていいかも。

参照元

Component Reference

Lightning Design System