Lightningアプリケーションビルダーでコンポーネントを配置しているときに、別のコンポーネントとの間が気になることはありませんか。
通常、コンポーネントの間はSalesforceのスタイルが適用されるため詰めることができません。
それがLWCで作成したコンポーネントを使用している場合は間を詰めることができるのです。
方法はLWCのCSSでネガティブマージンを使用することです。
実現したいこと
LWCで作成したコンポーネントと他のコンポーネントの間(縦の余白)を詰めます。
設定手順
作成したLWCのCSSを開きます。ここではnegativeMarginButton.cssとしています。
CSSを作成していない場合は、フォルダを右クリックして「ファイルを作成」メニューから作成できます。
CSSで、ネガティブマージンを書きます。
.negative-m-bottom {
margin-bottom: -10px;
}HTMLファイルを開き、classに指定します。
<template>
<div class="slds-m-top_x-small negative-m-bottom">
<lightning-button class="slds-m-horizontal_x-small" label="テストボタン" onclick={eventHandle}></lightning-button>
</div>
</template>修正したファイルを保存してアップロードします。
修正したコンポーネントが配置されているページを開くと上下のコンポーネントの間が詰まっています。
下の画像のテストボタンがLWCで作成したコンポーネント、取引先名以下の項目は標準コンポーネントです。
注意
ネガティブマージンの値を大きくしすぎると下のコンポーネントと重なってしまうので注意が必要です。
今回の例でいうとボタンが押せなくなったことがありました。
まとめ
解決このように、LWCで作成したコンポーネントを使用している場合、ネガティブマージンを指定することでコンポーネントの間(縦の余白)を詰めることができます。
前提としてLWCで作成したコンポーネントであることが条件になり、使いどころはあまりないかもしれませんが、コンポーネント間の余白が気になる場合に試してみるとよいかもしれません。