@vmsw/styling

NPM package voor styling van VMSW toepassingen, gebaseerd op [Webuniversum](https://overheid.vlaanderen.be/webuniversum/v3/documentation)

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@vmsw/styling
2.4.2a year ago3 years agoMinified + gzip package size for @vmsw/styling in KB

Readme

@vmsw/styling
NPM package voor styling van VMSW toepassingen, gebaseerd op Webuniversum
Inhoudstafel
- [Drilldown](#Drilldown)
- [Select](#Select)
Installatie
Om te beginnen, moet de npm package in de toepassing geïnstalleerd worden. ```console 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 ```javascript ... "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 ```javascript ... "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 ```javascript ... "styles":
...
"node_modules/font-awesome/css/font-awesome.css"
```
Gebruik components
Volgende webuniversum componenten zijn momenteel beschikbaar:
Gebruik js-components
Om de js-components van Webuniversum
te kunnen gebruiken, moeten de componenten manueel geïnitialiseerd worden. feature.component.ts ```typescript import { Component, OnInit } from '@angular/core'; ... declare var vl: any; ``` ```typescript @ViewChild('element') public element: ElementRef; ngOnInit() {
...
vl.[component].dress(document.getElementById('[id]');
vl.[component].dress(this.element.nativeElement); // The Angular way
} ```

Drilldown

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

Select

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