@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.

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

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