Climatetrade Components

Usage

Installation.

npm i @climatetradecarbon/climatetrade-components

Add icons in your index.html

<link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">

Add styles in some global styles file

@import '@climatetradecarbon/climatetrade-components/index.css';

Example use Button

import { Button } from '@climatetradecarbon/climatetrade-components';
export function MyCustomComponent() {
  return <Button variant={'next'}>Hello world!</Button>
}

Gallery Component

Component for displaying images in a gallery with a Visor and Thumbnails of images.

| Prop | Type | Description | | -------- | -------------- | -------------------------------------------------------------------------------------------- | | width | string | Width of the gallery | | height | string | Height of visor | | size | GallerySizes | Mode of render images | | images | GalleryImage[] | List of images resources | | limit | number | Define the number of images to render | | onSelect | () => void | Define an injected callback for custom functionality when the user select an image | | onToggle | () => void | Define an injected callback for custom functionality when the user click on show more button |

Example:

<Gallery
  images={[
      '/1.jpg',
      '/2.jpg',
      '/3.jpg',
      '/4.jpg',
      '/5.jpg',
      '/6.jpg',
      '/7.jpg',
  ]}
/>