msg-core

v1.0.0

Published

a year ago

A reusable component library for MSG Systems Internal Design System

Downloads

120

0High
0Medium
0Low

antoniomarasescu

MSG Core Lib

Description

A reusable component library for MSG Systems Internal Design System.

The documentation is available here in a Storybook format.

Prerequisites and Installation

Install the library using your preferred package manager:

# for npm
$ npm install msg-core
# for yarn
$ yarn add msg-core
# for pnpm
$ pnpm add msg-core

To use the assets or styles provided by the library, add the following line to your project's angular.json (or project.json):

 "build": {
   ...
   "options": {
     ...
     "assets": {
       ...
       { "glob": "**/*", "input": "node_modules/msg-core/assets/", "output": "./assets" }
     },
    "styles": [..., "node_modules/msg-core/styles/index.scss"],
    "stylePreprocessorOptions": {
       "includePaths": ["node_modules/msg-core/styles", "node_modules"]
     }
   }
   }
 }

In a global .scss file add the CSS variables for the theming, as described in the Theming Section

In your index.html import the Material Icons and the Roboto Font

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>MsgCoreDemo</title>
    <base href="/" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap"
      rel="stylesheet"
    />
    <!--Import this-->
    <link
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet"
    />
    <!--Import this-->
  </head>
  <body>
    <app-root></app-root>
  </body>
</html>

An example of a demo application can be found in the MSG Core Demo App
The design system can be found at MSG Core Design System.

Using a component

Import the component

import { ButtonComponent } from 'msg-core';

Use it in the html template file
```
  <ngx-msg-button label="It works"/>
```

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

MSG Core Lib

Description

Prerequisites and Installation

Using a component