Barebones Components

Appearance

Return to top
On this page

WARNING

While the documentation is fairly complete, it is still in first draft.

Image (BonesImage)

Overview

The Barebones Image component uses reserves it's space with a wrapper div preventing content shift and uses browsers built in lazy loading to load images only when needed. An onload event allows you to customize any loaded animation.

Component parts

Part nameDescription
componentThe components root element, a wrapper around the image which reserves the image's space on the page until it's loaded.
imageThe image element.

Props

Prop nameDescription
imageThe image an Object of type Image, the Image type has 4 required properties, see types

Prop Types

Image 

export interface Image {
  url: string;
  width: number;
  height: number;
  alt: string;
}

Component Type 

export interface Image {
  parts: Parts;
  loadingDefault: string;
  loadedFalse: string;
  loadedTrue: string;
}

Examples

WARNING

Examples use tailwind/salient theme, to use this theme you may add it using the theme npx command and installing Tailwind JIT in your application. Read more about themes.

Code 

<BonesImage
  :image="{
    url: 'goodfellas.png',
    width: 150,
    height: 150,
    alt: 'Goodfellas movie poster',
  }"
/>
</BonesModal>

Output

Goodfellas movie poster