Lightning Web Components Specialist Superbadge Solution Boat Tile Component
- Get link
- X
- Other Apps
BOAT TILE COMPONENT
boatTile.html
<template>
<div onclick={selectBoat} class={tileClass}>
<div style= {backgroundStyle} class="tile"></div>
<div class="lower-third">
<h1 class="slds-truncate slds-text-heading_medium">{boat.Name}</h1>
<h2 class="slds-truncate slds-text-heading_small">{boat.Contact__r.Name}</h2>
<div class="slds-text-body_small">
Price: <lightning-formatted-number maximum-fraction-digits="2" format-style="currency" currency-code="USD" value={boat.Price__c}>
</lightning-formatted-number>
</div>
<div class="slds-text-body_small">Length: {boat.Length__c}
</div>
<div class="slds-text-body_small">Type: {boat.BoatType__r.Name}
</div>
<!-- Boat information goes here -->
</div>
</div>
</template>
.tile {
width: 100%;
height: 220px;
padding: 1px !important;
background-position: center;
background-size: cover;
border-radius: 5px;
}
.selected {
border: 3px solid rgb(0, 95, 178);
border-radius: 5px;
}
.tile-wrapper {
cursor: pointer;
padding: 5px;
}
boatTile.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>49.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__RecordPage</target>
<target>lightning__AppPage</target>
</targets>
</LightningComponentBundle>
- Get link
- X
- Other Apps
Comments
Post a Comment