我正在学习aura框架,但我遇到了一个问题。我实际上使用的是带有 4 个字段的嵌套布局,但不知何故它只显示了前 2 个字段。谁能帮我显示所有这 4 个字段吗?
这是我的代码。正如您所看到的,有一条评论第 2 行,该评论下方有两个字段,但在我的页面上不可见。
组件
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global">
<div class="c-container">
<lightning:layout multipleRows="true">
<lightning:layoutItem padding="around-small" size="12">
<div class="page-section page-header">
<h2>General Information</h2>
</div>
</lightning:layoutItem>
<lightning:layoutItem padding="around-small" size="12">
<div class="page-main">
<lightning:layout>
<lightning:layoutItem padding="around-small" size="6">
<div class="slds-p-around_medium lgc-bg">
<lightning:input name="firstName" label="First Name" />
</div>
</lightning:layoutItem>
<lightning:layoutItem padding="around-small" size="6">
<div class="slds-p-around_medium lgc-bg">
<lightning:input name="lastName" label="Last Name" required="true" />
</div>
</lightning:layoutItem>
<!-- This row 2 is not visible -->
<lightning:layoutItem padding="around-small" size="6">
<div class="slds-p-around_medium lgc-bg">
<lightning:input type="email" name="email1" value="[email protected]" label="Email" required="true" />
</div>
</lightning:layoutItem>
<lightning:layoutItem padding="around-small" size="6">
<div class="slds-p-around_medium lgc-bg">
<lightning:input type="tel" label="Phone" name="phone" required="true" />
</div>
</lightning:layoutItem>
</lightning:layout>
</div>
</lightning:layoutItem>
<lightning:layoutItem flexibility="auto" padding="around-small" size="12">
<div class="page-footer page-section">
<h2>Footer</h2>
</div>
</lightning:layoutItem>
</lightning:layout>
</div>
</aura:component>
CSS
.THIS.c-container {
border: 1px solid #d8dde6;
margin: 10px 0 20px 0;
}
.THIS .page-section {
border: solid 1px #ccc;
padding: 1rem;
}
.THIS .page-header,
.THIS .page-footer {
height: 50px;
}
.THIS .page-main {
background: #f8f8f8;
}
.THIS .page-left,
.THIS .page-right {
background: #f0efef;
}
我们根据网格引用 Lightning:layoutItem 中的大小。您的网格中最多可以有 12 列,因此我们会相应地选择大小。 请将此代码替换为您的代码-
<lightning:layout>
<lightning:layoutItem padding="around-small" size="3">
<div class="slds-p-around_medium lgc-bg">
<lightning:input name="firstName" label="First Name" />
</div>
</lightning:layoutItem>
<lightning:layoutItem padding="around-small" size="3">
<div class="slds-p-around_medium lgc-bg">
<lightning:input name="lastName" label="Last Name" required="true" />
</div>
</lightning:layoutItem>
<!-- This row 2 is not visible -->
<lightning:layoutItem padding="around-small" size="3">
<div class="slds-p-around_medium lgc-bg">
<lightning:input type="email" name="email1" value="[email protected]" label="Email" required="true" />
</div>
</lightning:layoutItem>
<lightning:layoutItem padding="around-small" size="3">
<div class="slds-p-around_medium lgc-bg">
<lightning:input type="tel" label="Phone" name="phone" required="true" />
</div>
</lightning:layoutItem>
</lightning:layout>
请访问以下链接了解有关 Aura 中 Grid 的更多信息。
https://www.lightningdesignsystem.com/utilities/grid/
谢谢
我已经看到你的代码了。仅当您从左向右移动页面时,所有 4 个字段都会出现在页面上,您也可以看到其他两个字段。
场景1: 正如您所看到的,如果您想在一行中显示 2 个字段,在另一行中显示其他 2 个字段。
为此,您需要更改代码中的一行。 (multipleRows="true" 将其添加到您的布局中将解决您的问题)
示例:
<lightning:layout multipleRows="true">
<lightning:layoutItem size="6"> </lightning:layoutItem>
<lightning:layoutItem size="6"> </lightning:layoutItem>
<lightning:layoutItem size="6"> </lightning:layoutItem>
<lightning:layoutItem size="6"> </lightning:layoutItem>
</lightning:layout>
场景2: 正如您所看到的,如果您希望所有四个字段都在一行中,则需要更改大小。
示例:
<lightning:layout>
<lightning:layoutItem size="3"> </lightning:layoutItem>
<lightning:layoutItem size="3"> </lightning:layoutItem>
<lightning:layoutItem size="3"> </lightning:layoutItem>
<lightning:layoutItem size="3"> </lightning:layoutItem>
</lightning:layout>