lightning-cardを試してみる

tamuです。

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

cardとは

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

こんな感じのやつです。

cardのサンプル

最小コード

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

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

cardの最小構成

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>

結果

titleのサンプル

variant

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

base か narrow が指定でき、デフォルト値は base 。

base版

variantのサンプル: base

narrow版

variantのサンプル: 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;
}

結果

slotのサンプル: title

actions

lightning-button や lightning-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>

結果

slotのサンプル: actions

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

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>

結果

slotのサンプル: footer

default

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

参照元

Component Reference: https://developer.salesforce.com/docs/component-library/bundle/lightning-card/specification
Lightning Design System: https://www.lightningdesignsystem.com/components/cards/; コンポーネントのattributeやslotだけだといい感じのデザインにならないです。ここを参照していい感じのデザインにしましょう。