Verwendung

Installation der Web Components

Die Schrack Seconet Komponenten sind als NPM Package verfügbar. Für die Verwendung der Komponenten muss zuerst folgendes Package, das die Komponenten in Form von Web-Components beinhaltet, installiert werden.

1// with npm
2npm install @schrack-seconet/components
3
4// with yarn
5yarn add @schrack-seconet/components

Verwendung mit einem Framework

Für die Verwendung der Web-Components mit einem Frontend Framework muss je nach Framework ein zusätzliches Package installiert werden. Dieses Package beinhaltet einen Wrapper für die Komponenten, damit diese mit dem jeweiligen Framework verwendet werden können.

React

1// with npm
2npm install @schrack-seconet/components-react
3
4// with yarn
5yarn add @schrack-seconet/components-react

Angular

1// with npm 
2npm install @schrack-seconet/components-angular
3
4// with yarn
5yarn add @schrack-seconet/components-angular        

Vue

1// with npm 
2npm install @schrack-seconet/components-vue
3
4// with yarn
5yarn add @schrack-seconet/components-vue

Bei der Verwendung der Komponenten mit Vue muss zusätzlich noch folgendes Polyfill ergänzt werden:

1defineCustomElements(window, {
2  ael: (el: any, eventName: string, cb: any, opts: any) => el.addEventListener(eventName.toLowerCase(), cb, opts),
3  rel: (el: any, eventName: string, cb: any, opts: any) => el.removeEventListener(eventName.toLowerCase(), cb, opts),
4  ce: (eventName: string, opts: any) => new CustomEvent(eventName.toLowerCase(), opts)
5} as any);

Beispiel

Anwendungsbeispiel der SLogo Komponente in React:

1import { SLogo } from "@schrack-seconet/components-react";
2
3
4export const Logo = () => {
5  return (
6    <SLogo variant="logo" />
7  )
8}