@zanichelli/zanichelli-footer NPM

Zanichelli Footer Component

This is the Zanichelli Footer Component.

Install

Download the package running this command:

yarn add @zanichelli/zanichelli-footer

or import with jsDelivr or Unpkg in your html:

// using jsDelivr
<script type="module" src="https://cdn.jsdelivr.net/npm/@zanichelli/zanichelli-footer/dist/wc/zanichelli-footer/zanichelli-footer.esm.js"></script>

// using unpkg
<script type="module" src="https://unpkg.com/@zanichelli/zanichelli-footer"></script>

Albe Web Components dependency

This component requires Albe Web Components Library. You can install Albe via NPM

yarn add @zanichelli/albe-web-components

or include it in your app with script tag:

// using jsDelivr
<script type="module" src="https://cdn.jsdelivr.net/npm/@zanichelli/albe-web-components/dist/web-components-library/web-components-library.esm.js"></script>

// using unpkg
<script type="module" src="https://unpkg.com/@zanichelli/albe-web-components/dist/web-components-library/web-components-library.esm.js"></script>

You need to include stylesheet too:

// using jsDelivr
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@zanichelli/albe-web-components/www/build/web-components-library.css" />

// using unpkg
<link type="text/css" rel="stylesheet" href="https://unpkg.com/@zanichelli/albe-web-components/www/build/web-components-library.css" />

Usage custom element

import { defineCustomElements as defineAlbeComponents, applyPolyfills } from '@zanichelli/albe-web-components/loader';
import { defineCustomElements as defineZanichelliFooter } from '@zanichelli/zanichelli-footer/dist/wc/loader';

applyPolyfills().then(() => {
  defineAlbeComponents(window);
  defineZanichelliFooter(window);
});

return <zanichelli-footer></zanichelli-footer>;

Usage React Bindings

import { ZanichelliFooter } from '@zanichelli/zanichelli-footer/dist/react';

return <ZanichelliFooter />;

Props & Slots

The component has the following props:

content-max-width (optional): Maximum width of footer content,
env (optional): Environment to handle file with json info, only usefull for testing purpose if it's needed to change the json,
onetrust (optional): Enable OneTrust preference settings, true by default

The component has the following slots as well:

product-version-credits: to be used if your application needs to show upper footer section with product name, version and credits,
product-button: to be used if your application needs to show upper footer section with product button

Example:

<div slot="product-version-credits">
  <z-body level={5} variant="semibold">NOME PRODOTTO</z-body>
  <z-body level={5}>0.0.0 - </z-body>
  <z-link target="_blank" textcolor="white">Credits</z-link>
</div>
<div slot="product-button">
  <z-label>Hai bisogno di aiuto? </z-label>
  <z-button variant="dark-bg" size="small">SEGNALA UN PROBLEMA</z-button>
</div>