Skip to content

README.md

Latest commit

 

History

History
96 lines (77 loc) · 4.21 KB

README.md

File metadata and controls

96 lines (77 loc) · 4.21 KB

Rijkshuisstijl Community Componenten - Web Components

Dit project wordt niet gesteund door het Ministerie van Algemene Zaken.

Het toepassen van design-elementen uit dit project is strikt verboden voor organisaties die geen deel uitmaken van de centrale overheid van Nederland.

Deze package is onderdeel van het Rijkshuisstijl Community project.

Aan de slag met Web Components

Om de componenten van de Rijkshuisstijl-community te gebruiken, installeer je het web-components npm package.

De componenten hebben geen eigen styling. Om de Rijkshuisstijl aan je project toe te voegen, installeer je het design-tokens npm package en component-css npm package.

Note

Let erop dat je beide de @rijkshuisstijl-community/design-tokens/dist/index.css importeert en de component een child is van een element waar de rhc-theme op is toegepast. Anders zie je de component zonder styling.

npm install @rijkshuisstijl-community/web-components @rijkshuisstijl-community/components-css @rijkshuisstijl-community/design-tokens

Dit installeert de componenten, de design tokens en de styling. Om deze te gebruiken, importeer je ze in jouw app, Vervolgens kun je de componenten in je HTML gebruiken:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>RHC web-components</title>
    <!-- componenten importeren -->
    <script type="module">
      import { ButtonWebComponent } from '@rijkshuisstijl-community/web-components';

      // NB: let op dat je hier elk te gebruiken component definieert
      customElements.define('rhc-button', ButtonWebComponent);
    </script>
    <!-- design tokens importeren -->
    <link
      rel="stylesheet"
      href="node_modules/@rijkshuisstijl-community/design-tokens/dist/uitvoerend-groen/index.css"
    />
    <!-- css importeren -->
    <link rel="stylesheet" href="node_modules/@rijkshuisstijl-community/components-css/dist/index.css" />
  </head>
  <body>
    <!--geef alle thema tokens mee aan child components voor styling-->
    <div class="rhc-theme">
      <rhc-button>Click Here!</rhc-button>
    </div>
  </body>
</html>

Thema toepassen

Voor de themas maken we gebruik van de volgende 2 packages: design-tokens npm package en component-css npm package.

Dit pakket bevat de CSS-variabelen van het design systeem. Importeer het index.css-bestand uit de dist map van het pakket, en omring het deel van je applicatie waar je het thema wilt toepassen met het Rijkshuisstijl-thema met de rhc-theme class.

Thema wijzigen

Om een ander thema toe te passen moet je het importeren van import '@rijkshuisstijl-community/design-tokens/dist/{thema}/index.css'; en de class aanpassen naar het desbetreffende thema. Zie het volgende voorbeeld om het uitvoerend-groen thema toe te passen:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>RHC web-components</title>
    <!-- componenten importeren -->
    <script type="module">
      import { ButtonWebComponent } from '@rijkshuisstijl-community/web-components';
      customElements.define('rhc-button', ButtonWebComponent);
    </script>
    <!-- design tokens importeren -->
    <link
      rel="stylesheet"
      href="node_modules/@rijkshuisstijl-community/design-tokens/dist/uitvoerend-groen/index.css"
    />
    <!-- css importeren -->
    <link rel="stylesheet" href="node_modules/@rijkshuisstijl-community/components-css/dist/index.css" />
  </head>
  <body>
    <!--geef alle thema tokens mee aan child components voor styling-->
    <div class="uitvoerend-groen">
      <rhc-button>Click Here!</rhc-button>
    </div>
  </body>
</html>

Bekijk de packages/font/README.md voor de meerdere manieren om de lettertypen te installeren voor jouw project.
⚡