@vmsw/styling

NPM package voor styling van VMSW toepassingen, gebaseerd op Webuniversum

Inhoudstafel

• Installatie
• Configuratie
• Gebruik components
• Gebruik JS-components
  • Drilldown
  • Select

Installatie

Om te beginnen, moet de npm package in de toepassing geïnstalleerd worden.

npm install @vmsw/styling

Configuratie

@vmsw/styling heeft 3 files in de dist folder: vmsw.webuniversum.css, vmsw.webuniversum.js en vmsw.webuniversum-reset.css vmsw.webuniversum.css en vmsw.webuniversum.js moeten geconfigureerd worden in angular.json:

angular.json

...
"styles": [
    ...
    "node_modules/@vmsw/styling/dist/vmsw.webuniversum.css"
],
"scripts": [
    ...
    "node_modules/@vmsw/styling/dist/vmsw.webuniversum.js"
]

vmsw.webuniversum-reset.css is een optioneel bestand dat styling van basiselementen gaat resetten, als dit geen problemen geeft laadt je dit ook best in:

angular.json

...
"styles": [
    ...
    "node_modules/@vmsw/styling/dist/vmsw.webuniversum-reset.css"
]

Dependencies

@vmsw/styling heeft als dependency FontAwesome 4, deze zal je zelf nog moeten toevoegen aan je project.

angular.json

...
"styles": [
    ...
    "node_modules/font-awesome/css/font-awesome.css"
]

Gebruik components

Volgende webuniversum componenten zijn momenteel beschikbaar:

• vl-ui-action-group
• vl-ui-button
• vl-ui-checkbox
• vl-ui-data-table
• vl-ui-document
• vl-ui-drilldown
• vl-ui-form-message
• vl-ui-form-structure
• vl-ui-icon
• vl-ui-icon-list
• vl-ui-input-field
• vl-ui-link
• vl-ui-link-list
• vl-ui-pager
• vl-ui-pill
• vl-ui-radio
• vl-ui-search
• vl-ui-select
• vl-ui-spotlight
• vl-ui-steps
• vl-ui-tabs
• vl-ui-textarea
• vl-ui-modal
• vl-ui-accordion
• vl-ui-progress-bar

Gebruik js-components

Om de js-components van Webuniversum te kunnen gebruiken, moeten de componenten manueel geïnitialiseerd worden.

[feature].component.ts

import { Component, OnInit } from '@angular/core';
...
declare var vl: any;

@ViewChild('element') public element: ElementRef;
ngOnInit() {
    ...
    vl.[component].dress(document.getElementById('[id]');
    vl.[component].dress(this.element.nativeElement); // The Angular way
}

Drilldown

@ViewChild('element') public element: ElementRef;
ngOnInit() {
    ...
    vl.drilldown.dress(document.getElementById('[id]');
    vl.[component].dress(this.element.nativeElement); // The Angular way
}

Select

@ViewChild('element') public element: ElementRef;
ngOnInit() {
    ...
    vl.select.dress(document.getElementById('[id]');
    vl.[component].dress(this.element.nativeElement); // The Angular way
}