Skip to content

Commit fa14f3b

Browse files
ppvgppvg
committed
WIP
1 parent be8def2 commit fa14f3b

31 files changed

+5906
-521
lines changed

‎docs/src/routes/(docs)/components/+page.svelte

+4-3
Original file line numberDiff line numberDiff line change
@@ -153,8 +153,8 @@
153153
Afbeeldingen - <code>img</code>
154154
<ul>
155155
<li><a href="{base}/components/logo">Logo</a></li>
156-
<li><a href="{base}/components/icons">Iconen</a></li>
157156
<li><a href="{base}/components/image-cover">Cover-afbeelding</a></li>
157+
<li><a href="{base}/components/image-icon">Icoon-afbeelding</a></li>
158158
<li><a href="{base}/components/image-round">Ronde afbeelding</a></li>
159159
<li><a href="{base}/components/image-square">Vierkante afbeelding</a></li>
160160
</ul>
@@ -170,16 +170,17 @@
170170
<li><a href="{base}/components/accordion">Accordeon</a></li>
171171
<li><a href="{base}/components/filter">Filter</a></li>
172172
<li><a href="{base}/components/header-navigation">Header</a></li>
173+
<li><a href="{base}/components/icons">Iconen</a></li>
173174
<li><a href="{base}/components/login-meta">Ingelogd als</a></li>
174175
<li><a href="{base}/components/collapsible">Inklapbaar component</a></li>
175176
<li><a href="{base}/components/card">Kaart</a></li>
176177
<li><a href="{base}/components/breadcrumb-bar">Kruimelpad - breadcrumb-bar</a></li>
177178
<li><a href="{base}/components/pagination">Paginering</a></li>
178-
<li><a href="{base}/components/tag">Tag</a></li>
179+
<li><a href="{base}/components/language-selector">Taalselectie</a></li>
179180
<li><a href="{base}/components/tabs">Tabbladen</a></li>
181+
<li><a href="{base}/components/tag">Tag</a></li>
180182
<li><a href="{base}/components/tiles">Tegelweergave</a></li>
181183
<li><a href="{base}/components/sidemenu">Zijmenu</a></li>
182-
<li><a href="{base}/components/language-selector">Taalselectie</a></li>
183184
</ul>
184185
</nav>
185186

‎docs/src/routes/(docs)/components/icons/+page.svelte

+66-79
Original file line numberDiff line numberDiff line change
@@ -5,116 +5,103 @@
55
<script>
66
import { base } from "$app/paths";
77
import Code from "$lib/Code.svelte";
8+
import SideMenu from "$lib/SideMenu.svelte";
89
</script>
910

1011
<svelte:head>
1112
<title>Iconen</title>
1213
</svelte:head>
1314

14-
<main id="main-content" tabindex="-1">
15-
<article id="button-base">
15+
<main class="sidemenu" id="main-content" tabindex="-1">
16+
<SideMenu>
17+
<ul>
18+
<li><a href="#introduction">Introductie</a></li>
19+
<li><a href="#usage">Iconen gebruiken</a></li>
20+
<li><a href="#examples">Voorbeelden</a></li>
21+
<li><a href="#available-icons">Beschikbare iconen</a></li>
22+
<li><a href="#add-other-icons">Andere iconen toevoegen</a></li>
23+
<li><a href="#related">Gerelateerde pagina's</a></li>
24+
</ul>
25+
</SideMenu>
26+
<article>
1627
<div>
1728
<section id="introduction">
1829
<h1>Iconen</h1>
1930
<p>
20-
Voor het toevoegen van iconen binnen de website kan gebruikt gemaakt worden van de
21-
unicode-codes.
31+
Voor het toevoegen van iconen binnen de website kan gebruik gemaakt worden van een
32+
icoon-lettertype via de classes <code>icon</code> en
33+
<code>icon-{"{naam}"}</code>.
2234
</p>
23-
35+
<p>
36+
Standaard maken deze classes gebruik van het meegeleverde icoon-lettertype van het thema.
37+
Zie <a href="#available-icons">beschikbare iconen</a> voor meer informatie over deze
38+
standaard iconen. Daarnaast is het mogelijk om applicatie-specifieke iconen toe te voegen.
39+
Zie hiervoor <a href="#add-other-icons">andere iconen toevoegen</a>.
40+
</p>
41+
</section>
42+
<section id="usage">
43+
<h2>Iconen gebruiken</h2>
44+
<p>
45+
Iconen kunnen toegepast worden op allerlei HTML-elementen, waaronder <code>span</code>,
46+
<code>a</code>, <code>p</code> en <code>button</code>.
47+
</p>
48+
<h3>Benodigde stappen</h3>
2449
<ol>
50+
<li>Voeg de <code>icon</code> class toe aan het element.</li>
2551
<li>
26-
Voeg de class <code>icon</code> toe om gebruik te maken van de visuele weergave van een icoonknop.
27-
</li>
28-
<li>
29-
Voeg iconen toe aan het project.
30-
<ul>
31-
<li><a href="{base}/components/iconset-create">Iconset aanmaken</a></li>
32-
<li><a href="{base}/components/iconset-add">Iconset toevoegen</a></li>
33-
</ul>
52+
Voeg een <code>icon-{"{naam}"}</code> class toe, bijvoorbeeld
53+
<code>icon-check</code>
54+
om het <span class="icon icon-check">check</span>-icoon te gebruiken.
3455
</li>
3556
<li>
36-
<a href="#usage">Iconen gebruiken.</a>
37-
<ul>
38-
<li>
39-
<a href="#icon-within">Iconen toevoegen binnen de HTML</a>
40-
</li>
41-
<li>
42-
<a href="#icon-within-css">Iconen toevoegen via CSS</a>
43-
</li>
44-
</ul>
57+
Voeg een toegankelijke naam toe binnen het element. Deze wordt visueel verborgen, maar
58+
is belangrijk voor screenreader-gebruikers en voor wanneer CSS niet geladen kan worden.
4559
</li>
4660
</ol>
4761
</section>
48-
49-
<section id="usage">
50-
<h2>Iconen gebruiken</h2>
51-
52-
<h3 id="icon-within-html">Binnen HTML</h3>
53-
<p>Iconen als afbeelding toevoegen.</p>
54-
55-
<h4>Visueel voorbeeld:</h4>
56-
<img src="$img/cat.svg" class="icon" />
57-
58-
<h4>HTML-voorbeeld:</h4>
62+
<section id="examples">
63+
<h2>Voorbeelden</h2>
64+
<h3><code>span</code></h3>
65+
<h4>Visueel voorbeeld</h4>
66+
<span class="icon icon-calendar">Kalender</span>
67+
<h4>HTML-voorbeeld</h4>
68+
<Code language="html" code={`<span class="icon icon-calendar">Kalender</span>`} />
69+
<h3><code>button</code></h3>
70+
<h4>Visueel voorbeeld</h4>
71+
<button class="icon icon-on-off">Aan- of uitschakelen</button>
72+
<h4>HTML-voorbeeld</h4>
5973
<Code
6074
language="html"
61-
code={`
62-
<img src="cat.svg" class="icon">
63-
`}
75+
code={`<button class="icon icon-on-off">Aan- of uitschakelen</button>`}
6476
/>
65-
66-
<h3 id="icon-within-css">Via CSS</h3>
77+
</section>
78+
<section id="available-icons">
79+
<h2>Beschikbare iconen</h2>
6780
<p>
68-
Het onderstaande voorbeeld bevat een <code>span</code>. Andere html-attributen zijn ook
69-
mogelijk. Onder andere: <code>a</code>, <code>p</code>, <code>button</code>.
81+
De thema's worden geleverd met een icoon-lettertype en met <code>icon-{"{naam}"}</code>
82+
classes voor een aantal standaard-sets. Zie de
83+
<a href="{base}/components/icons/default-sets">standaard icoon-sets</a> voor een overzicht
84+
van de beschikbare iconen.
7085
</p>
86+
</section>
87+
<section id="add-other-icons">
88+
<h2>Andere iconen toevoegen</h2>
7189
<p>
72-
<strong>Let op:</strong> Voeg eerst een iconenset toe aan het project met indien nodig een
73-
eigen referentielijst. Voor meer informatie zie:
74-
<a href="{base}/components/iconset-add">Iconset toevoegen</a>
90+
Er zijn twee manieren om iconen te gebruiken die niet beschikbaar zijn in de icoon-sets
91+
van het thema:
7592
</p>
76-
77-
<h4>Visueel voorbeeld:</h4>
78-
<button class="icon icon-cat">Kat</button>
79-
80-
<h4>HTML-voorbeeld:</h4>
81-
<Code
82-
language="html"
83-
code={`
84-
<button class="icon icon-cat">Kat</button>
85-
`}
86-
/>
87-
</section>
88-
89-
<section id="global-icon-font">
90-
<h2>Applicatie icoonlettertype definiëren</h2>
91-
<ol>
92-
<li>
93-
Voeg het icoonlettertype toe aan het project. Voor informatie zie:
94-
<a href="{base}/components/iconset-add">Icoonset toevoegen</a>.
95-
</li>
93+
<ul>
94+
<li>Gebruik een losse <a href="{base}/components/image-icon">icoon-afbeelding</a>.</li>
9695
<li>
97-
Defineer het lettertype binnen het bestand
98-
<code>manon/icon/icon-base-variables</code> via de variabele
99-
<code>font-family</code>. Bijvoorbeeld:
100-
<code>--icon-font-family: "Manon icons";</code>. Zie ook
101-
<a href="{base}/import-styling#styling-override-variables"
102-
>De styling van een component aanpassen</a
103-
>.
96+
Voeg een applicatie-specifieke icoon-set toe. Zie <a
97+
href="{base}/components/icons/add-set">icoon-set toevoegen</a
98+
> voor instructies.
10499
</li>
105-
</ol>
106-
</section>
107-
108-
<section id="variables">
109-
<h2>Instelbare variabelen</h2>
110-
<ul>
111-
<li><a href="{base}/variables#font-family">font-family</a></li>
112100
</ul>
113101
</section>
114-
115102
<section id="related">
116103
<h2>Gerelateerde pagina's</h2>
117-
<a href="{base}/components/icons-test">Test- en voorbeelden-pagina</a>
104+
<a href="{base}/components/icons/test">Test- en voorbeelden-pagina</a>
118105
</section>
119106
</div>
120107
</article>

0 commit comments

Comments
 (0)