@maggioli-design-system/magma NPM

Maggioli Design System Web-Component

Questa libreria fornisce una lista di componenti basati sullo standard web-component agnostici rispetto ai framework Javascript

Fa uso della libreria @maggioli-design-system/styles per gli sitli dei componenti

Installation

npm i '@maggioli-design-system/magma'

Define Components

// insert in bootstrap file of client part of your application

import { defineCustomElements } from "@maggioli-design-system/magma/loader";

defineCustomElements();

Alternatively, if you wanted to take advantage of ES Modules, you could include the components using an import statement.

<html>
  <head>
    <script type="module">
      import { defineCustomElements } from '@maggioli-design-system/magma/loader/index.es2017.mjs';
      defineCustomElements();
    </script>
  </head>
  <body>
    <mds-text>Hello world</mds-text>
  </body>
</html>

Style

Import style used by components

/* global.css */

// color
@import "@maggioli-design-system/styles/dist/css/colors-rgb.css";

// font
@import '@fontsource/karla/400.css';
@import '@fontsource/karla/700.css';
@import '@fontsource/merriweather/400.css';
@import '@fontsource/merriweather/700.css';
@import '@fontsource/roboto-mono/400.css';
@import '@fontsource/roboto/500.css';
@import '@fontsource/roboto/700.css';
@import '@fontsource/roboto/900.css';

For more details see the library

Icon

Set the path where the mds-icon component will get the svg icons

window.sessionStorage.setItem('mdsIconSvgPath', 'assets/img/svg/');

If you are using React set this inside UseEffet otherwise window is not defined

For greater interoperability between components and frameworks, see the specific libraries for Angular and React

@floating-ui/dom @maggioli-design-system/design-tokens @maggioli-design-system/identity @maggioli-design-system/styles @stencil/core clsx crypto-js dayjs filesize fitty gsap idb-keyval luxon mime mustache

@infinitebrahmanuniverse/nolb-_mag @everything-registry/sub-chunk-570 @zalastax/nolb-_mag @maggioli-design-system/magma-react

8 months ago

11 months ago

8 months ago

11 months ago

11 months ago

5 months ago

6 months ago

6 months ago

7 months ago

7 months ago

7 months ago

8 months ago

9 months ago

8 months ago

8 months ago

9 months ago

8 months ago

10 months ago

12 months ago

4 years ago