Lightning Web Component lightning-layout を使って入力フォームを作成する

2023年8月11日

環境
Salesforce

構文
lightning-layoutで「multiple-rows=”true”」を指定して複数列を表示します。
lightning-layout-item で「size=”6″」を指定して2列を表示します。
画面幅を12分割したうちのいくつ分の幅にするかを指定します。

操作例
入力フォームを2列表示にして作成します。
サンプルコード

<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={btnChange}></lightning-input>
            </lightning-layout-item>
        </template>
    </lightning-layout>
    <lightning-button label="次へ" onclick={btnClick}></lightning-button>
</template>