The library relies on Bootstrap 4's grid system. If you are not using Bootstrap in your project already, please make sure to add it as an extra import.

Example usage

Generic HTML import

Import CSS inside <head> section:

<link rel="stylesheet" href="/node_modules/@zurich/web-sdk/css/styles.min.css" />

Import JS at the bottom of the <body> section:

<script src="/node_modules/@zurich/web-sdk/js/scripts.min.js"></script>

JavaScript frameworks

While using this Zurich Web SDK component in frameworks like ReactJS, Vue, and Angular which assume full control of the DOM we recommend not to import @zurich/web-sdk/js/scripts.min.js. Both Zurich Web SDK and the framework may attempt to mutate the same DOM element, resulting in bugs.

Use provided CSS @zurich/web-sdk/css/styles.min.css and HTML examples to create your own implementation of given component in a specific framework.

Please refer to component docs files for HTML code snippets and CSS classes applied.

Angular 11+

Inside your angular.json file, add the following to your projects styles and scripts arrays:

To projects -> <your-app> -> architect -> build -> options -> styles:

Add node_modules/@zurich/web-sdk/css/styles.min.css

Rebuild your app to include the new imports

React

Import CSS at the beginning of your app, e.g. at the top of src/index.js:

import '@zurich/web-sdk/css/styles.min.css';

Alternatively, if using sass, import into your root sass file:

@import '~@zurich/web-sdk/css/styles.min.css';

Vue.JS

Import CSS at the top of your main JS file, e.g. src/main.js:

CSS:

import '@zurich/web-sdk/js/scripts.min.js;

Zcroller API

Zcroller guide

Animations based on animate.css

NOTE: You will need to include animate.css as a dependency. It is not included in the SDK.

Property	Type	Description	Values
data-zcroller	String	Animation action to apply to given element	See animate.css options
data-zcroller-delay	String	Add delay to animation	"1s", "2s", "3s", "4s", "5s"
data-zcroller-speed	String	Control the speed of animation	"slow", "slower", "fast", "faster"
data-infinite	Boolean	Makes animation infinite

FAQs

What is @zurich/web-sdk?

Is @zurich/web-sdk popular?

Is @zurich/web-sdk well maintained?

Last updated on 08 Sep 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install