4열 열의 페이지 레이아웃 만들기

3082 단어 Salesforce
확실히, 옛날 본 Salesforce의 블로그에 방법이 쓰여졌습니다만 ... 라고 생각해

그 때는 3 컬럼 레이아웃. 3열이 생기면 4열도 가능하니 대답했는데 마음에 들지 않았던 것 같습니다.

어쩔 수 없기 때문에 실제로 움직이는 것으로 대답했습니다.

조금 여백 설정이 필요할 것 같은 느낌입니다만...



템플릿용 구성요소
<aura:component implements="lightning:homeTemplate" access="global" >
    <aura:attribute name="first" type="Aura.Component[]" />
    <aura:attribute name="second" type="Aura.Component[]" />
    <aura:attribute name="third" type="Aura.Component[]" /> 
    <aura:attribute name="fourth" type="Aura.Component[]" /> 
    <aura:attribute name="all" type="Aura.Component[]" /> 

    <div class="slds-grid slds-wrap">
        <div class="slds-col slds-size_1-of-4">
            <span>{!v.first}</span>
        </div>
        <div class="slds-col slds-size_1-of-4">
            <span>{!v.second}</span>
        </div>
        <div class="slds-col slds-size_1-of-4">
            <span>{!v.third}</span>
        </div>
        <div class="slds-col slds-size_1-of-4">
            <span>{!v.fourth}</span>
        </div>      

        <div class="slds-col slds-size_4-of-4">
            <span>{!v.all}</span>
        </div>   
    </div>
</aura:component>

디자인
<design:component label="My Four column Page">
    <flexipage:template>

        <flexipage:region name="first" defaultWidth="SMALL">
            <flexipage:formfactor type="MEDIUM" width="SMALL"/>
        </flexipage:region>

        <flexipage:region name="second" defaultWidth="SMALL">
            <flexipage:formfactor type="MEDIUM" width="SMALL"/>
        </flexipage:region>

        <flexipage:region name="third" defaultWidth="SMALL">
            <flexipage:formfactor type="MEDIUM" width="SMALL"/>
        </flexipage:region>

        <flexipage:region name="fourth" defaultWidth="SMALL">
            <flexipage:formfactor type="MEDIUM" width="SMALL"/>
        </flexipage:region>

        <flexipage:region name="all" defaultWidth="SMALL">
            <flexipage:formfactor type="MEDIUM" width="SMALL"/>
        </flexipage:region>

    </flexipage:template>
</design:component>

그런데, 베스트 앤서는 받을 수 있을까?

Create section grid for page layout
흐름에서 승인 프로세스 호출
lwc-rxjs: A reactive programming library for Salesforce LWC

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage