@vmsw/styling

NPM package voor styling van VMSW toepassingen, gebaseerd op Webuniversum

• Installatie

• Configuratie

• Gebruik components

• Gebruik JS-components

- [Drilldown](#Drilldown)

- [Select](#Select)

Om te beginnen, moet de npm package in de toepassing geïnstalleerd worden. ```console npm install @vmsw/styling ``` @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"

``` 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 ```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

} ```