@rijkshuisstijl-community/web-components 1.2.0 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +64 -22
- package/dist/index.mjs +3703 -3522
- package/package.json +11 -10
package/README.md
CHANGED
|
@@ -11,44 +11,86 @@ Deze package is onderdeel van het [Rijkshuisstijl Community](https://github.com/
|
|
|
11
11
|
|
|
12
12
|
## Aan de slag met Web Components
|
|
13
13
|
|
|
14
|
-
Om de
|
|
14
|
+
Om de componenten van de Rijkshuisstijl-community te gebruiken, installeer je het [web-components npm package](https://www.npmjs.com/package/@rijkshuisstijl-community/web-components).
|
|
15
15
|
|
|
16
|
-
|
|
17
|
-
npm install --save-dev @rijkshuisstijl-community/web-components
|
|
18
|
-
```
|
|
19
|
-
|
|
20
|
-
Dit installeert de Web Components. Om deze componenten te gebruiken, importeer je ze in je project en plaats je ze in de HTML.
|
|
16
|
+
De componenten hebben geen eigen styling. Om de Rijkshuisstijl aan je project toe te voegen, installeer je het [design-tokens npm package](https://www.npmjs.com/package/@rijkshuisstijl-community/design-tokens) en [component-css npm package](https://www.npmjs.com/package/@rijkshuisstijl-community/components-css).
|
|
21
17
|
|
|
22
|
-
|
|
18
|
+
> [!NOTE]
|
|
19
|
+
> 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.
|
|
23
20
|
|
|
24
|
-
```
|
|
25
|
-
|
|
21
|
+
```bash
|
|
22
|
+
npm install --save-dev @rijkshuisstijl-community/web-components @rijkshuisstijl-community/components-css @rijkshuisstijl-community/design-tokens
|
|
26
23
|
```
|
|
27
24
|
|
|
25
|
+
Dit installeert de componenten, de design tokens en de styling. Om deze te gebruiken, importeer je ze in jouw app,
|
|
28
26
|
Vervolgens kun je de componenten in je HTML gebruiken:
|
|
29
27
|
|
|
30
28
|
```html
|
|
31
|
-
|
|
29
|
+
<!DOCTYPE html>
|
|
30
|
+
<html lang="en">
|
|
31
|
+
<head>
|
|
32
|
+
<title>RHC web-components</title>
|
|
33
|
+
<!-- componenten importeren -->
|
|
34
|
+
<script type="module">
|
|
35
|
+
import { ButtonWebComponent } from '@rijkshuisstijl-community/web-components';
|
|
36
|
+
|
|
37
|
+
// NB: let op dat je hier elk te gebruiken component definieert
|
|
38
|
+
customElements.define('rhc-button', ButtonWebComponent);
|
|
39
|
+
</script>
|
|
40
|
+
<!-- design tokens importeren -->
|
|
41
|
+
<link
|
|
42
|
+
rel="stylesheet"
|
|
43
|
+
href="node_modules/@rijkshuisstijl-community/design-tokens/dist/uitvoerend-groen/index.css"
|
|
44
|
+
/>
|
|
45
|
+
<!-- css importeren -->
|
|
46
|
+
<link rel="stylesheet" href="node_modules/@rijkshuisstijl-community/components-css/dist/index.css" />
|
|
47
|
+
</head>
|
|
48
|
+
<body>
|
|
49
|
+
<!--geef alle thema tokens mee aan child components voor styling-->
|
|
50
|
+
<div class="rhc-theme">
|
|
51
|
+
<rhc-button>Click Here!</rhc-button>
|
|
52
|
+
</div>
|
|
53
|
+
</body>
|
|
54
|
+
</html>
|
|
32
55
|
```
|
|
33
56
|
|
|
34
57
|
### Thema toepassen
|
|
35
58
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
```bash
|
|
39
|
-
npm install --save-dev @rijkshuisstijl-community/design-tokens
|
|
40
|
-
```
|
|
59
|
+
Voor de themas maken we gebruik van de volgende 2 packages: [design-tokens npm package](https://www.npmjs.com/package/@rijkshuisstijl-community/design-tokens) en [component-css npm package](https://www.npmjs.com/package/@rijkshuisstijl-community/components-css).
|
|
41
60
|
|
|
42
61
|
Dit pakket bevat de CSS-variabelen van het design systeem. Importeer het `index.css`-bestand uit de `dist` map van het
|
|
43
|
-
pakket, en omring het deel van je applicatie waar je het thema wilt toepassen met
|
|
62
|
+
pakket, en omring het deel van je applicatie waar je het thema wilt toepassen met het Rijkshuisstijl-thema met de `rhc-theme` class.
|
|
44
63
|
|
|
45
|
-
|
|
46
|
-
<link rel="stylesheet" href="node_modules/@rijkshuisstijl-community/design-tokens/dist/index.css" />
|
|
47
|
-
<link rel="stylesheet" href="node_modules/@rijkshuisstijl-community/components-css/dist/index.css" />
|
|
64
|
+
#### Thema wijzigen
|
|
48
65
|
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
66
|
+
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.
|
|
67
|
+
Zie het volgende voorbeeld om het uitvoerend-groen thema toe te passen:
|
|
68
|
+
|
|
69
|
+
```html
|
|
70
|
+
<!DOCTYPE html>
|
|
71
|
+
<html lang="en">
|
|
72
|
+
<head>
|
|
73
|
+
<title>RHC web-components</title>
|
|
74
|
+
<!-- componenten importeren -->
|
|
75
|
+
<script type="module">
|
|
76
|
+
import { ButtonWebComponent } from '@rijkshuisstijl-community/web-components';
|
|
77
|
+
customElements.define('rhc-button', ButtonWebComponent);
|
|
78
|
+
</script>
|
|
79
|
+
<!-- design tokens importeren -->
|
|
80
|
+
<link
|
|
81
|
+
rel="stylesheet"
|
|
82
|
+
href="node_modules/@rijkshuisstijl-community/design-tokens/dist/uitvoerend-groen/index.css"
|
|
83
|
+
/>
|
|
84
|
+
<!-- css importeren -->
|
|
85
|
+
<link rel="stylesheet" href="node_modules/@rijkshuisstijl-community/components-css/dist/index.css" />
|
|
86
|
+
</head>
|
|
87
|
+
<body>
|
|
88
|
+
<!--geef alle thema tokens mee aan child components voor styling-->
|
|
89
|
+
<div class="uitvoerend-groen">
|
|
90
|
+
<rhc-button>Click Here!</rhc-button>
|
|
91
|
+
</div>
|
|
92
|
+
</body>
|
|
93
|
+
</html>
|
|
52
94
|
```
|
|
53
95
|
|
|
54
96
|
Bekijk de [packages/font/README.md](https://github.com/nl-design-system/rijkshuisstijl-community/blob/main/packages/font/README.md) voor de meerdere manieren om de lettertypen te installeren voor jouw project.
|