Finish
ready
A visual component for displaying color swatches.
Example
Loading
Code
HTML
import { NbhdFinish } from '@fbin-web/neighborhood-core';<nbhd-finish name="Chrome" identifier="64430" href="https://shop.moen.com/products/64430"
image="https://moen.widen.net/content/3d7ihxrfrz/png/chrome_100.png" label="finish">
</nbhd-finish>React
import { NbhdFinish } from '@fbin-web/neighborhood-react';
const App = () => (
<>
<NbhdFinish
name="Chrome"
identifier="64430"
href="https://shop.moen.com/products/64430"
image="https://moen.widen.net/content/3d7ihxrfrz/png/chrome_100.png"
label="finish"></NbhdFinish>
</>
);Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
href
|
href
|
string
|
Specifies the URL to link to when the finish is clicked. | |
product
|
ProductContent
|
Product option data associated with the finish. This property is not settable via attribute. | ||
name
|
name
|
string
|
The name of the finish. | |
identifier
|
identifier
|
string
|
The identifier of the finish. | |
image
|
image
|
string
|
The URL of the finish image. | |
shape
|
shape
|
circle | square
|
circle
|
The shape of the finish. |
label
|
label
|
string
|
finish
|
The label for the finish. |
active
|
active
|
boolean
|
false
|
Whether the finish is active and selected. |
Product Content Data Structure
The ProductContent interface defines the structure for product content data used with finish components.
| Property | Type | Required | Description |
|---|---|---|---|
title
|
string
|
No | The title of the product content. |
identifier
|
string
|
No | The identifier of the product content. |
image
|
MediaContent
|
No | MediaContent object containing image/video data for the product content. See Media Structure section for details. |
badges
|
string[]
|
No | An array of badge labels for the product content. |
Media Content Structure
The MediaContent interface defines the structure for media objects used in product content.
| Property | Type | Required | Description |
|---|---|---|---|
src
|
string
|
Yes | The source URL of the media file. |
alt
|
string
|
Yes | Alternative text for the media, used for accessibility. |
cssClass
|
string
|
No | Additional CSS class to apply to the media element. |
crop
|
boolean
|
No | Enable crop for the media when displayed. |
imageFocus
|
center | top | top-right | right | bottom-right | bottom | bottom-left | left | top-left
|
No | The focal point for the media image. |
Events
| Name | Description | Event Detail |
|---|---|---|
nbhd-finish-hover
|
Emitted when the mouse enters the finish component. | { product: ProductOption } |
nbhd-finish-hover-out
|
Emitted when the mouse leaves the finish component. | {} |
CSS Parts
| Name | Description |
|---|---|
base
|
The component's base wrapper. |
wrapper
|
Wrapper around the finish image. |
image
|
The finish image. |
link
|
Link wrapping finish image. |