Installation
Quantum design system - Quantum angular components library.
Install package
After installing npm or yarn, and having configured the artifactory, you can install @qtm/angular
with this command:
- npm
- yarn
npm install -S @qtm/angular@latest
yarn add @qtm/angular@latest
Install fonts
The Quantum design system was designed with the Roboto font in mind. The Roboto fonts will not be automatically loaded by the Thales design system. The developer is responsible for loading all fonts used in their application.
Roboto & Roboto Mono fonts have a few easy ways to get started.
- cdn
- npm
- yarn
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap"
rel="stylesheet"
/>
npm install -S @fontsource/roboto @fontsource/roboto-mono
Import in CSS (example: src/styles.css in Angular CLI):
@import '@fontsource/roboto';
@import '@fontsource/roboto-mono';
yarn add @fontsource/roboto @fontsource/roboto-mono
Import in CSS (example: src/styles.css in Angular CLI):
@import '@fontsource/roboto';
@import '@fontsource/roboto-mono';
As the fontsource documentation says, importing the '@fontsource/roboto'
or the '@fontsource/roboto-mono'
only imports the font weight 400. In order to support more weight or styles, and to import the same configuration as the CDN, you can import the fontsource as below:
import '@fontsource/roboto/100.css';
import '@fontsource/roboto/300.css';
import '@fontsource/roboto/400.css';
import '@fontsource/roboto/500.css';
import '@fontsource/roboto/700.css';
import '@fontsource/roboto/900.css';
import '@fontsource/roboto/100-italic.css';
import '@fontsource/roboto/300-italic.css';
import '@fontsource/roboto/400-italic.css';
import '@fontsource/roboto/500-italic.css';
import '@fontsource/roboto/700-italic.css';
import '@fontsource/roboto/900-italic.css';
Install icons
The Quantum Design System was designed with the Material icons in mind.
The Material icons will not automatically be loaded by the Quantum Design System. The developer is responsible for loading all icons used in their application.
- cdn
- npm
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
rel="stylesheet"
/>
npm install material-icons@latest
Import in JS (example: src/index.js):
import 'material-icons/iconfont/material-icons.css';
or import in CSS:
@import 'material-icons/iconfont/material-icons.css';
or import in HTML:
<link
href="/path/to/material-icons/iconfont/material-icons.css"
rel="stylesheet"
/>
Usage
Once you have installed this package, you just have to import components you need in your Angular application !
import { QtmComponentLibraryModule } from '@qtm/angular';
@NgModule({
...
imports: [
...
QtmComponentLibraryModule
],
})
Here is an example of the integration of a Button component:
<qtm-button
variant="filled"
color="primary"
(clickEvent)="..."
>
Clicked
</qtm-button>
Import styles
You need to import the css file to see the component styling. It can be done in 2 ways:
- Option 1: Import the css directly into the styles.css file
@import '@qtm/web-components/dist/web-components/web-components.css';
- Option 2: add styles to your angular.json configuration:
"yourApp": {
"architect": {
"build": {
"options": {
"styles": [
"node_modules/@qtm/web-components/dist/web-components/web-components.css"
]
}
}
}
}
Utilities (Optional)
It provides you with a complete CSS with a huge set of utility classes as it is generated with Tailwind CSS. Then it will be up to you to optimize for production by purging the CSS according to the classes used in your HTML.
By importing into the global.css file:
@import '@qtm/css/dist/utilities.css';
For example:
<div class="flex p-m mb-m">
<p class="text-primary-500">
Hello
<span class="font-bold">World!</span>
<span role="img" aria-label="Tada!"> 🎉 </span>
</p>
</div>
If you already using Tailwind CSS in your project or you want to take full advantage of all its features like functions & directives by building your own classes via @apply for example. You can check our package @qtm/tailwind-preset which will explain to you how to use Quantum styles in a Tailwind project.