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

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

Lightningコンポーネントを使う

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

Component Library

ボタングループを使ってボタンを表示するために、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を使います。

Lightning Design System

例えば、ポップオーバー(ツールチップとも言います)を表示する場合は、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)を使います。

Design Tokens - Lightning Design System

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」とします。