Zanichelli Toolbox Web Components Library

Zanichelli's components for tools application

Installation

Download the package by running yarn add @zanichelli/zanichelli-toolbox or import it in your html using Unpkg o jsDelivr:

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

Remember to also include the stylesheet:

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

Using custom elements

import { defineCustomElements as defineToolboxComponents, applyPolyfills } from "@zanichelli/zanichelli-toolbox/loader";
applyPolyfills().then(() => {
  defineAlbeComponents(window);
});

Then use the relative tag as a usual component in your markup.

<section>
  <zt-button icon="rectangle" />
</section>

Using React bindings

import React from "react";
import ReactDOM from "react-dom";
import "@zanichelli/zanichelli-toolbox/www/build/web-components-library.css";
import { defineCustomElements as defineToolboxComponents, applyPolyfills } from "@zanichelli/zanichelli-toolbox/loader";
import { ZtButton } from "@zanichelli/zanichelli-toolbox/react";
applyPolyfills().then(() => {
  defineCustomElements(window);
});
ReactDOM.render(<ZtButton icon="rectangle" />, document.getElementById("root"));

Development

• Download the repo using git clone [email protected]:zanichelli/zanichelli-toolbox.git
• In the project's root folder, run yarn
• yarn start to serve development http://localhost:3333

Storybook:

# Start Storybook
yarn storybook

for live reloading of edits in stories:

# Start Storybook
yarn storybook watch