Kelvin UI Components for Angular applications
npm install @kelvininc/angular-ui-componentsKelvin UI Components provides a set of reusable, high quality framework-agnostic UI components, this means you can use them with the current most popular Front-End Development Frameworks like React, Angular or if you prefer, the components are also available as W3C compliant WebComponents.
This is not just a library of UI components as it's also a style guide where you can see how the component looks and behaves by interacting with it, to showcase this we use Storybook, a free open-source tool.
Our Storybook is publicly available here
From the command prompt go to your app's root folder and execute:
``
npm install @kelvininc/angular-ui-components --save
Include the fonts in angular.json.
`json`
"styles": [
"node_modules/@kelvininc/angular-ui-components/assets/fonts/font-proxima-nova.css"
]
Include the icons in angular.json.
`json`
"assets": [
{
"glob": "svg-symbols.svg",
"input": "./node_modules/@kelvininc/angular-ui-components/assets",
"output": "."
}
]
Include the _KvUIComponentsModule_ in app.module.ts.
`ts
import { KvUIComponentsModule } from '@kelvininc/angular-ui-components';
...
@NgModule({
...
imports: [
...
KvUIComponentsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
`
Now you are ready to use all available Kelvin UI Components. For example:
`html`
...
[text]="'My Button'"
[smallSize]="true"
fixedWidth="250"
(buttonClick)="onButtonClick($event)"
>
...
Including the global style file you can access our foundation design system definitions like colors, spacings and typography
`css`
@import "@kelvininc/angular-ui-components/assets/styles/globals.scss";
Kelvin UI Components have two predefined themes StyleMode.Night and StyleMode.Light (StyleMode.Night is applied by default) that can be applied on library startup. For that you needapp.component.ts
pass the desired theme to the library configuration in your .
`typescript
import { initialize, StyleMode } from '@kelvininc/angular-ui-components';
export class AppComponent {
(...)
constructor() {
initialize({styleMode: StyleMode.Light});
}
}
`
In addition, you can customize the theme by changing some CSS properties.
Example: Setting the Primary Color
`css`
:root {
--kv-primary: #005cc7;
--kv-primary-rgb: 0, 92, 199;
--kv-primary-contrast: #fff;
--kv-primary-contrast-rgb: 255, 255, 255;
--kv-primary-dark: #0051af;
--kv-primary-light: #ccdef4;
}
By default, the KvIcon and KvIllustration components require an SVG file with all the kv-icons available. The default file is svg-symbols.svg which is provided after installing this dependency. For caching purposes, it is also provided a symbols.${checksum}.svg file after installation. If you are caching those SVGs in your project you should provide the latter to the library configuration in your app.component.ts.
`typescript
import { initialize } from '@kelvininc/angular-ui-components';
export class AppComponent {
(...)
constructor() {
initialize({ symbolsFileName: 'symbols.6e51ea0e37926eff2f3ef11e64be70fa.svg' });
}
}
`
By default the KvIcon and KvIllustration components will expect the svg-symbols.svg file to be served at the server root. This could not be your use-case if your application is being served on a relative path, e.g, https://dashboard.com/clients/home. In this case you will need to tell the library the base path to your assets url, which you can achieve by doing the following in your app.component.ts.
`typescript
import { initialize, StyleMode } from '@kelvininc/angular-ui-components';
export class AppComponent {
(...)
constructor() {
initialize({ baseAssetsUrl: '/clients/' });
}
}
``
For more information, visit our Storybook.