SLDSとは？

Salesforce Lightning Design System
下記のように.appファイルにSLDSを追加することで、トップレベルコンポーネントおよびそのすべての子コンポーネント内で、SLDS リソース (スタイルシート、アイコンなど) の場所について気にせずに、SLDS ツールと技法を使用できるようになる

<aura:application extends="force:slds">
        <!-- This component is the real "app" -->
        <!-- c:expenses/ -->
</aura:application>

解説

extends="force:slds"属性により、Lightning Experience と Salesforce アプリケーションによって提供される、Lightning Design System スタイルが組み込まれて、このアプリケーションで SLDS が有効になる
実際のアプリケーション（動作するもの）は<c:expenses/>の部分となる
SLDSを読み込んでおくだけで、下記のようなclass名が使用できる(よってcssも効いている)ようになると認識している
例えば、下記コードを見てみる。

<aura:component>
    <!-- PAGE HEADER -->
    <lightning:layout class="slds-page-header slds-page-header_object-home">
        <lightning:layoutItem>
            <lightning:icon iconName="standard:scan_card" alternativeText="My Expenses"/>
        </lightning:layoutItem>
        <lightning:layoutItem padding="horizontal-small">
            <div class="page-section page-header">
                <h1 class="slds-text-heading_label">Expenses</h1>
                <h2 class="slds-text-heading_medium">My Expenses</h2>
            </div>
        </lightning:layoutItem>
    </lightning:layout>
    <!-- / PAGE HEADER -->
<aura:component>

この部分は下記のようにrenderingされる。

f:id:mankozooyork:20220209113154p:plain

CSSを特に気にしていないのに、こうなる(SLDSスタイルと自動的に連動する)！

下記のように<lightning:layout>内に記述することで
- Layoutの中のLayoutItemの幅を変えられる
- size="6" によって、全幅の 50% (サイズ 6/12) の<div>コンテナを作成できる

<lightning:layoutItem padding="around-small" size="6">

フォーム

<form class="slds-form_stacked">と<lightning:input/>を使用する
<lightning:input/>でtypeを指定しない場合は、デフォルトでtext型になる
それぞれの<lightning:input/>にaura:idを指定することによって、フォーム項目から値を読み取ることが可能に
その他属性
- min: 最低入力値
- step: 小数点のフォーマット
- placeholder: 例の値

<!-- NEW EXPENSE FORM -->
    <lightning:layout>
        <lightning:layoutItem padding="around-small" size="6">
                <!-- CREATE NEW EXPENSE -->
                <div aria-labelledby="newexpenseform">
                    <!-- BOXED AREA -->
                    <fieldset class="slds-box slds-theme_default slds-container_small">
                    <legend id="newexpenseform" class="slds-text-heading_small
                      slds-p-vertical_medium">
                      Add Expense
                    </legend>
                    <!-- CREATE NEW EXPENSE FORM -->
                    <form class="slds-form_stacked">
                        <lightning:input aura:id="expenseform" label="Expense Name"
                                         name="expensename"
                                         value="{!v.newExpense.Name}"
                                         required="true"/>
                        <lightning:input type="number" aura:id="expenseform" label="Amount"
                                         name="expenseamount"
                                         min="0.1"
                                         formatter="currency"
                                         step="0.01"
                                         value="{!v.newExpense.Amount__c}"
                                         messageWhenRangeUnderflow="Enter an amount that's at least $0.10."/>
                        <lightning:input aura:id="expenseform" label="Client"
                                         name="expenseclient"
                                         value="{!v.newExpense.Client__c}"
                                         placeholder="ABC Co."/>
                        <lightning:input type="date" aura:id="expenseform" label="Expense Date"
                                         name="expensedate"
                                         value="{!v.newExpense.Date__c}"/>
                        <lightning:input type="checkbox" aura:id="expenseform" label="Reimbursed?"
                                         name="expreimbursed"
                                         checked="{!v.newExpense.Reimbursed__c}"/>
                        <lightning:button label="Create Expense"
                                          class="slds-m-top_medium"
                                          variant="brand"
                                          onclick="{!c.clickCreate}"/>
                    </form>
                    <!-- / CREATE NEW EXPENSE FORM -->
                  </fieldset>
                  <!-- / BOXED AREA -->
                </div>
                <!-- / CREATE NEW EXPENSE -->
        </lightning:layoutItem>
    </lightning:layout>
    <!-- / NEW EXPENSE FORM -->

上記コードのvalue属性を使用するために、コンポーネントに対して属性定義を行う必要がある
- <aura:attribute name="foo"/>に指定した値をフォームで使用する
- 下記コードでは、default属性を全て初期値にセットしている

    <aura:attribute name="newExpense" type="Expense__c"
         default="{ 'sobjectType': 'Expense__c',
                        'Name': '',
                        'Amount__c': 0,
                        'Client__c': '',
                        'Date__c': '',
                        'Reimbursed__c': false }"/>

' P '

whatever I will forget

Aura コンポーネントデータの入力(1/2)

SLDSとは？

解説

フォーム