LWCで入力フォームを２列表示にする【Salesforce】

Lightning Web Component で入力フォームを作成する際、２列表示にする方法を共有します。

今回の実装例では lightning-input を使いましたが、lightning-input-field を使う場合も同様のやり方で実現できます。

ポイント
実装例

ポイント

lightning-layout で、multiple-rows=”true” とする

これにより、複数列での表示が可能になります。

lightning-layout-item で、size=”6″ とする

この size では、画面幅を12分割したうちのいくつ分の幅にするかを指定します。今回は２列表示なので、”6″ にします。３列表示なら “4” 、４列表示なら “3” にする感じです。

実装例

<template>
    <lightning-layout multiple-rows="true">
        <template for:each={inputFields} for:item="field">
            <lightning-layout-item flexibility="auto" size="6" key={field}>
                <lightning-input label={field.label} onchange={handleChange}></lightning-input>
            </lightning-layout-item>
        </template>
    </lightning-layout>
    <lightning-button label="次へ" onclick={handleClick}></lightning-button>
</template>