![HP](/webuniversum/sites/default/files/2016-11/VLA_homeheader_imker%20%281%29_0.jpg)
![HP](/webuniversum/sites/default/files/2016-11/VLA_homeheader_imker%20%281%29_0.jpg)
Deze migratiegids geeft een overzicht van de belangrijkste verschillen tussen versie 1.x en 2.x van de componentenbibliotheek. Daarbij staat ook altijd een oplossing om de migratie zo vlot mogelijk te laten verlopen.
Vanaf versie 2.0 worden er 2 CSS bestanden gebruikt. De opsplitsing in 2 bestanden is bewust gedaan om stijl en functionaliteit te scheiden. (https://overheid.vlaanderen.be/webuniversum/aan-de-slag-met-ux-componenten)
De default CSS-file biedt de functionele opmaak van de componenten aan, dus de componenten in een 'naakte vorm'.
De andere CSS-file biedt de styling van de componenten volgens een vooraf gedefinieerd kleurenpalet.
Volgende wijzigingen zijn niet backwards compatible.
In de eerste versie van de componenten-bibliotheek werd een float-based grid-systeem gebruikt (notatie voorbeeld: .grid-item.grid-item--a-4). In versie 2.x maken we gebruik van een flexbox-based grid-systeem (notatie voorbeeld: .grid > .col--4-6). Het float-based grid-systeem is niet langer aanwezig in versie 2.x. Dit moet volledig vervangen worden door het nieuwe systeem.
Meer info: https://overheid.vlaanderen.be/webuniversum/alle-front-end-componenten#grid
De component "news-item" (.news-item) bestaat niet langer. De teaser-component is uitgebreid en vervangt news-item volledig.
Meer info: https://overheid.vlaanderen.be/webuniversum/alle-front-end-componenten#teaser
Bekijk ook de news-slider om nieuwsberichten te tonen.
Meer info: https://overheid.vlaanderen.be/webuniversum/alle-front-end-componenten#news-slider
De component "list-style" is hernoemd naar "bullet-list".
Meer info: https://overheid.vlaanderen.be/webuniversum/alle-front-end-componenten#bullet-list
Een spotlight-panel bestaat niet meer. De spotlight is uitgebreid en neemt alle functionaliteit van de spotlight-panel over.
Meer info: https://overheid.vlaanderen.be/webuniversum/alle-front-end-componenten#spotlight
De doormat heeft vanaf nu een kleur die licht contrasteert met de region-kleur. Zo is de doormat in een region–alt wit, en in een gewone region grijs.
De --alt variant heeft een transparante achtergrond waardoor de doormat minder opvallend aanwezig is.
Meer info: https://overheid.vlaanderen.be/webuniversum/alle-front-end-componenten#doormat
De oude component 'table' bestaat niet langer. De data-table bestaat nog wel.
Meer info: https://overheid.vlaanderen.be/webuniversum/alle-front-end-componenten#data-table
De doormat component is uitgebreid waardoor de tile-component overbodig is geworden. De tile is vanaf versie 2.0 niet langer beschikbaar.
Gebruik een doormat zonder doormat__text voor de functionaliteit van de tile.
Meer info: https://overheid.vlaanderen.be/webuniversum/alle-front-end-componenten#doormat
De naam banner voldeed niet langer om de functionaliteit van de component te beschrijven. Om verdere verwarring te voorkomen is de component hernoemd naar "content-header".
Meer info: https://overheid.vlaanderen.be/webuniversum/alle-front-end-componenten#headers-en-titels
Omdat de component 'infographic' een andere functie heeft dan de naam doet vermoeden is deze component opgenomen als variant van de infotext.
Meer info: https://overheid.vlaanderen.be/webuniversum/alle-front-end-componenten#infotext
In versie 2.0 is de component imagelink niet langer aanwezig.
Om de component beter te omschrijven is de naam aangepast naar 'person-info'.
Meer info: https://overheid.vlaanderen.be/webuniversum/alle-front-end-componenten#person-info
Zowel de popup als de popdown hadden gelijkaardige functionaliteit. Beide componenten zijn daarom samengevoegd en hernoemd naar popover.
Meer info: https://overheid.vlaanderen.be/webuniversum/alle-front-end-componenten#popover
De naam 'list' zorgde voor verwarring. De link-list is uitgebreid zodat deze de 'list' volledig vervangt.
Meer info: https://overheid.vlaanderen.be/webuniversum/alle-front-end-componenten#link-list
De component bottom-content is verwijderd.
De icon-link en bullet-link zijn verwijderd. Een vervanging vindt u onder links.
Meer info: https://overheid.vlaanderen.be/webuniversum/alle-front-end-componenten#links