Индустриальная дизайн-система
Русский
5.9.0 (ng18)

Быстрый старт

Default install:

You can easily install Prizm UI using Angular CLI by running the following command: 

ng add  @prizm-ui/install

Manual install:

Required > Install theme and core: 

npm i @prizm-ui/core
npm i @prizm-ui/theme

Optional > Install helpers: 

npm i @prizm-ui/helpers

Optional > Install components: 

npm i @prizm-ui/components

Optional > Install charts library: 

npm i @prizm-ui/charts
How setup global styles from @prizm-ui/styles ?

Add our styles to angular config:

"assets": [
     // ....
    ],
   "styles": [
     // (Required) Add for use our theme
     "node_modules/@prizm-ui/theme/src/styles/styles.less",
     // (Optional) Add for use our components
     "node_modules/@prizm-ui/components/src/styles/styles.less",
   ],

Or you can add to your root styles.less

// (Required) Add for use our theme
 @import "~@prizm-ui/theme/src/styles/styles.less";
 // (Optional) Add only for use our components library
 @import "~@prizm-ui/components/src/styles/styles.less";
How can you use our icons?

To use our icons as svg, please install our library

npm i @prizm-ui/icons

If you want to lazy load icons

npm i @prizm-ui/icons-loader

But if you want to use fonts not only as svg, and also as font, please add to your angular config 

"assets": [
      {
        "glob": "**/*",
        "input": "node_modules/@prizm-ui/icons/src/styles/icons-base",
        "output": "assets/prizm/icons/base"
      },
      {
        "glob": "**/*",
        "input": "node_modules/@prizm-ui/icons/src/styles/icons-full",
        "output": "assets/prizm/icons/full"
      }
  ],
  "styles": [
    "node_modules/@prizm-ui/icons/src/styles/styles.less",
    "node_modules/@prizm-ui/icons/src/styles/icons-base/prizm-base-icons.css",
    "node_modules/@prizm-ui/icons/src/styles/icons-base/prizm-base-icons-location.css",
    "node_modules/@prizm-ui/icons/src/styles/icons-full/prizm-full-icons.css",
    "node_modules/@prizm-ui/icons/src/styles/icons-full/prizm-full-icons-location.css"
   ],
 or you can only import to your root styles.less 
@import "~@prizm-ui/icons/src/styles/icons-24/prizm-icons.css;
 
  @font-face {
    font-family: 'prizm-icons';
    src: url('[YOUR PATH TO STYLES]/icons-24/prizm-icons.ttf?1772816e867a80e18921a5b7d83b4205') format('truetype'),
      url('[YOUR PATH TO STYLES]/icons-24/prizm-icons.woff?1772816e867a80e18921a5b7d83b4205') format('woff'),
      url('[YOUR PATH TO STYLES]/icons-24/prizm-icons.eot?1772816e867a80e18921a5b7d83b4205#iefix') format('embedded-opentype'),
      url('[YOUR PATH TO STYLES]/icons-24/prizm-icons.woff2?1772816e867a80e18921a5b7d83b4205') format('woff2');
    };