Lightning Web ComponentsをLightning Web Componentsらしく作る方法

Lightning Web ComponentsをLighting Web Componentsらしく作る方法をご紹介します。

Lightningコンポーネントを使う

一番簡単で間違いがないのが、予め準備されているLightningコンポーネントを使うことです。

https://developer.salesforce.com/docs/component-library/overview/components

ボタングループを使ってボタンを表示するために、lightning-button-groupとlighting-buttonを使ってみます。

<template>
    <div class="slds-row">
        <div class="slds-col">
            <div class="slds-float_right">
                <lightning-button-group class="slds-m-right_x-small">
                    <lightning-button-icon icon-name="utility:chevronleft"></lightning-button-icon>
                    <lightning-button variant="neutral" label={labels.CalendarToday}></lightning-button>
                    <lightning-button-icon icon-name="utility:chevronright"></lightning-button-icon>
                </lightning-button-group>
            </div>
        </div>
    </div>
</template>

こんな感じになります。

Lightning Design Systemを使う

Lightingコンポーネントでサポートされていないものを実装する場合は、Lightning Design Systemを使います。

https://lightningdesignsystem.com/

例えば、ポップオーバー(ツールチップとも言います)を表示する場合は、LightningコンポーネントではサポートされていないのでLightning Design Systemを使います。

<template>
    <div if:true={isShow}>
        <div class="slds-popover slds-popover_tooltip slds-nubbin_bottom-left" role="tooltip" id="tooltip" style="position:absolute;top:0px;left:0px;">
            <div class="slds-popover__body">
                ツールチップメッセージ
            </div>
        </div>
    </div>
</template>

こんな感じでポップオーバーが表示できます。

Lightning Web Componentsで使われているスタイルを使う

カレンダーを実装するような固有のコンポーネントを開発する場合で、Lightning Web Componentsらしく見えるものを開発する場合は、Lightning Web Componentsで使われているスタイル(Design Token)を使います。

https://lightningdesignsystem.com/design-tokens/

Design Tokenを使う場合は、上記URLでFormatをLightningに切り替えます。

実装したいトークンを見つけます。

ここでは、角丸のボーダーを使います(t(borderRadiusSmall)を使います)

Supportが「GA」でないと使えないので確認してください。

Lightning Web ComponentsでCSSファイルを作成します。

CSSファイルはLightning Web Componentsと同じフォルダに、「Lightning Web Components名.css」で作成します。

作成したCSSで使いたいDesign Tokenを以下のように使います。

cal-day-event {
    text-align: left;
    font-size: 0.4em;
    font-weight: var(--lwc-fontWeightLight);
    color: var(--lwc-colorTextInverse);
    background-color: var(--lwc-colorBrandDark);
    border-radius: var(--lwc-borderRadiusSmall);
}

borderRadiusSmallを使う場合は、「val(–lwc-borderRadiusSmall」とします。