salesforce-lightning - Superbadge：Lightning 组件框架专家 - 第 3 步

Question

Superbadge：Lightning 组件框架专家 - 第 3 步

Answer 1

嗨@dipak，请使用这个CSS，如果这能解决问题，请告诉我们

.THIS.tile {
    position:relative;
    display: inline-block;
    width: 100%;
    height: 220px;
    padding: 1px !important;
}
.THIS.innertile {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
}
.THIS.lower-third {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: #FFFFFF;
    background-color: rgba(0, 0, 0, .4);
    padding: 6px 8px;
}

Answer 2

我遇到了同样的问题，这是我朋友的帮助，这是 Boat Tile 组件：

<lightning:button class="{!v.selected ? 'tile selected' : 'tile'}" onclick="{!c.onBoatClick}">
    <div style="{! 'background-image:url(\'' + v.boat.Picture__c + '\'); '}" class="innertile">
        <div class="lower-third">
            <h1 class="slds-truncate">
                {!v.boat.Contact__r.Name}
            </h1>
        </div>  
    </div>
</lightning:button>

这是船瓦 CSS ：

.THIS.tile {
position:relative;
display: inline-block;
width: 100%;
height: 220px;
padding: 1px !important;}

.THIS .innertile {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: 100%;}

.THIS .lower-third {
position: absolute;
bottom: 0;
left: 0;
right: 0;
color: #FFFFFF;
background-color: rgba(0, 0, 0, .4);
padding: 6px 8px;}

.THIS .tile .tile selected{
border: 3px solid rgb(0, 112, 210);}

这是船搜索结果组件：

<lightning:layout multipleRows="true" class="slds-align_absolute-center">
    <aura:iteration items="{!v.boat}" var="boat">
        <lightning:layoutItem flexibility="auto" size="3" padding="around-small">
            <c:BoatTile boat="{!boat}"
                        selected="{!equals(v.selectedBoatId, boat.Id) ? 'true' : 'false'}"/>
        </lightning:layoutItem>
    </aura:iteration>
    <aura:if isTrue="{!v.emptyBoatList}">
        <div>
            No boats found
        </div>
    </aura:if>
</lightning:layout>