qc-trousse-sdg 1.3.2 → 1.4.0-develop.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 +5 -1
- package/dist/js/qc-sdg.min.js +1 -1
- package/package.json +3 -3
- package/public/index.html +375 -296
- package/public/js/qc-doc-sdg.js +5043 -1580
- package/public/js/qc-sdg.js +8111 -3685
- package/rollup.config.js +1 -0
- package/src/doc/components/Code.svelte +10 -15
- package/src/doc/components/Exemple.svelte +18 -15
- package/src/doc/components/Switch.svelte +7 -6
- package/src/doc/components/TopNav.svelte +6 -3
- package/src/doc/components/color-doc.svelte +2 -2
- package/src/doc/qc-doc-sdg.js +4 -1
- package/src/sdg/_components.js +10 -9
- package/src/sdg/components/Alert/Alert.svelte +69 -0
- package/src/sdg/components/Alert/AlertWC.svelte +24 -0
- package/src/sdg/components/ExternalLink/ExternalLink.svelte +96 -0
- package/src/sdg/components/ExternalLink/ExternalLinkWC.svelte +15 -0
- package/src/sdg/components/Icon/Icon.svelte +26 -0
- package/src/sdg/components/Icon/IconWC.svelte +20 -0
- package/src/sdg/components/IconButton/IconButton.svelte +30 -0
- package/src/sdg/components/IconButton/IconButtonWC.svelte +19 -0
- package/src/sdg/components/Notice/Notice.svelte +83 -0
- package/src/sdg/components/Notice/NoticeWC.svelte +25 -0
- package/src/sdg/components/PivFooter/PivFooter.svelte +51 -0
- package/src/sdg/components/PivFooter/PivFooterWC.svelte +52 -0
- package/src/sdg/components/PivFooter/_defaultCopyright.svelte +11 -0
- package/src/sdg/components/PivHeader/PivHeader.svelte +144 -0
- package/src/sdg/components/PivHeader/PivHeaderWC.svelte +68 -0
- package/src/sdg/components/PivHeader/_defaultLinks.svelte +24 -0
- package/src/sdg/components/SearchBar/SearchBar.svelte +67 -0
- package/src/sdg/components/SearchBar/SearchBarWC.svelte +17 -0
- package/src/sdg/components/SearchInput/SearchInput.svelte +17 -26
- package/src/sdg/components/SearchInput/SearchInputWC.svelte +16 -0
- package/src/sdg/components/{toTop.svelte → ToTop/ToTop.svelte} +31 -38
- package/src/sdg/components/ToTop/ToTopWC.svelte +16 -0
- package/src/sdg/components/utils.js +1 -1
- package/src/sdg/components/Button/IconButton.svelte +0 -29
- package/src/sdg/components/Icon.svelte +0 -39
- package/src/sdg/components/PivHeader/pivHeader.svelte +0 -158
- package/src/sdg/components/SearchBar/searchBar.svelte +0 -87
- package/src/sdg/components/alert.svelte +0 -88
- package/src/sdg/components/componentWrapper.js +0 -24
- package/src/sdg/components/externalLink.svelte +0 -92
- package/src/sdg/components/notice.svelte +0 -83
- package/src/sdg/components/pivFooter.svelte +0 -65
package/public/index.html
CHANGED
|
@@ -1,25 +1,25 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
|
-
<!--suppress ALL -->
|
|
3
|
-
<html lang="fr">
|
|
4
|
-
<head>
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
</head>
|
|
22
|
-
<body>
|
|
2
|
+
<!--suppress ALL -->
|
|
3
|
+
<html lang="fr">
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8">
|
|
6
|
+
<meta name="viewport"
|
|
7
|
+
content="width=device-width, initial-scale=1.0">
|
|
8
|
+
<link rel="stylesheet"
|
|
9
|
+
href="css/qc-sdg.css">
|
|
10
|
+
<link rel="stylesheet"
|
|
11
|
+
href="css/qc-doc-sdg.css">
|
|
12
|
+
<title>Documentation technique du Système de design gouvernemental</title>
|
|
13
|
+
<script defer
|
|
14
|
+
src='js/qc-sdg.js'
|
|
15
|
+
sdg-css-filename="qc-sdg.css">
|
|
16
|
+
</script>
|
|
17
|
+
<script defer
|
|
18
|
+
src='js/qc-doc-sdg.js'
|
|
19
|
+
sdg-css-filename="qc-doc-sdg.css">
|
|
20
|
+
</script>
|
|
21
|
+
</head>
|
|
22
|
+
<body>
|
|
23
23
|
<header>
|
|
24
24
|
<qc-piv-header id="pivEntete"
|
|
25
25
|
title-text="Trousse de développement du Système de design gouvernemental"
|
|
@@ -29,10 +29,10 @@
|
|
|
29
29
|
<qc-doc-top-nav></qc-doc-top-nav>
|
|
30
30
|
<div class="qc-container">
|
|
31
31
|
<h1>
|
|
32
|
-
<span class="qc-subhead"id="version"></span>
|
|
32
|
+
<span class="qc-subhead" id="version"></span>
|
|
33
33
|
Documentation technique
|
|
34
34
|
</h1>
|
|
35
|
-
<nav class="main-menu"_
|
|
35
|
+
<nav class="main-menu" _
|
|
36
36
|
aria-label="Navigation principale">
|
|
37
37
|
<h2 class="qc-h4">Bases</h2>
|
|
38
38
|
<ul>
|
|
@@ -178,13 +178,13 @@
|
|
|
178
178
|
title="Violet"
|
|
179
179
|
></qc-color-doc>
|
|
180
180
|
|
|
181
|
-
<hr
|
|
181
|
+
<hr/>
|
|
182
182
|
|
|
183
183
|
<!-- grille horizontale -->
|
|
184
184
|
<h2 id="grille">Grille horizontale</h2>
|
|
185
185
|
<qc-doc-exemple caption="Présentation de la grille sur 12 colonnes"
|
|
186
186
|
code-target-id="exemple-grille"
|
|
187
|
-
|
|
187
|
+
>
|
|
188
188
|
<div id="grid-samples">
|
|
189
189
|
<div id="background">
|
|
190
190
|
<div class="qc-row">
|
|
@@ -290,25 +290,25 @@
|
|
|
290
290
|
</qc-doc-exemple>
|
|
291
291
|
<p>
|
|
292
292
|
<strong>Points de rupture</strong><br/>
|
|
293
|
-
<code
|
|
293
|
+
<code>--qc-breakpoint-sm<br>
|
|
294
294
|
--qc-breakpoint-md<br>
|
|
295
295
|
--qc-breakpoint-lg
|
|
296
296
|
</code>
|
|
297
297
|
</p>
|
|
298
298
|
<p>
|
|
299
299
|
<strong>Gouttière</strong><br/>
|
|
300
|
-
<code
|
|
300
|
+
<code>--qc-breakpoint-gutter</code>
|
|
301
301
|
</p>
|
|
302
302
|
|
|
303
|
-
<hr
|
|
303
|
+
<hr/>
|
|
304
304
|
|
|
305
305
|
<!-- images -->
|
|
306
306
|
<h2 id="figures">Figures</h2>
|
|
307
307
|
<p>Les figures servent en général pour l’affichage des images.</p>
|
|
308
308
|
<qc-doc-exemple id="exemple-figure"
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
<figure
|
|
309
|
+
caption="Exemple d’affichage d’une image"
|
|
310
|
+
>
|
|
311
|
+
<figure>
|
|
312
312
|
<img src="img/figure-sample.png"
|
|
313
313
|
alt="Image avec légende">
|
|
314
314
|
<figcaption>
|
|
@@ -318,9 +318,9 @@
|
|
|
318
318
|
</figcaption>
|
|
319
319
|
</figure>
|
|
320
320
|
</qc-doc-exemple>
|
|
321
|
-
<!-- <qc-code target-id="exemple-figure"></qc-code>-->
|
|
321
|
+
<!-- <qc-code target-id="exemple-figure"></qc-code>-->
|
|
322
322
|
|
|
323
|
-
<hr
|
|
323
|
+
<hr/>
|
|
324
324
|
|
|
325
325
|
<!-- liens -->
|
|
326
326
|
<h2 id="liens">Liens</h2>
|
|
@@ -328,43 +328,72 @@
|
|
|
328
328
|
<dl>
|
|
329
329
|
<dt>Lien interne</dt>
|
|
330
330
|
<dd><a href="javascript:;" class="not-visited">Lien interne</a></dd>
|
|
331
|
-
<dd
|
|
331
|
+
<dd>
|
|
332
|
+
<qc-external-link><a href="javascript:;" class="not-visited">Lien externe</a></qc-external-link>
|
|
333
|
+
</dd>
|
|
332
334
|
|
|
333
335
|
<dt>Lien au survol (pseudo-classe :hover)</dt>
|
|
334
336
|
<dd><a href="javascript:;" class="pseudo-hover">Lien interne</a></dd>
|
|
335
|
-
<dd
|
|
336
|
-
|
|
337
|
+
<dd>
|
|
338
|
+
<qc-external-link><a href="javascript:;" class="pseudo-hover">Lien externe</a>
|
|
339
|
+
</qc-external-link>
|
|
340
|
+
</dd>
|
|
341
|
+
<dt>Lien au focus (pseudo-classe :focus)</dt>
|
|
337
342
|
<dd><a href="javascript:;" class="pseudo-focus">Lien interne</a></dd>
|
|
338
|
-
<dd
|
|
339
|
-
|
|
343
|
+
<dd>
|
|
344
|
+
<qc-external-link><a href="javascript:;" class="pseudo-focus">Lien externe</a>
|
|
345
|
+
</qc-external-link>
|
|
346
|
+
</dd>
|
|
347
|
+
<dt>Lien au clic (pseudo-classe :active)</dt>
|
|
340
348
|
<dd><a href="javascript:;" class="pseudo-active">Lien interne</a></dd>
|
|
341
|
-
<dd
|
|
342
|
-
|
|
349
|
+
<dd>
|
|
350
|
+
<qc-external-link><a href="javascript:;" class="pseudo-active">Lien externe</a>
|
|
351
|
+
</qc-external-link>
|
|
352
|
+
</dd>
|
|
353
|
+
<dt>Lien visité (pseudo-classe :visited)</dt>
|
|
343
354
|
<dd><a href="javascript:;" class="pseudo-visited">Lien interne</a></dd>
|
|
344
|
-
<dd
|
|
355
|
+
<dd>
|
|
356
|
+
<qc-external-link><a href="javascript:;" class="pseudo-visited">Lien externe</a>
|
|
357
|
+
</qc-external-link>
|
|
358
|
+
</dd>
|
|
345
359
|
</dl>
|
|
346
360
|
</qc-doc-exemple>
|
|
347
361
|
|
|
348
362
|
|
|
349
363
|
<h3>Lien externe (qc-external-link)</h3>
|
|
350
364
|
|
|
351
|
-
<p>Le composant <code>qc-external-link</code> ajoute une icône à la fin du lien, séparée du dernier mot par
|
|
352
|
-
|
|
365
|
+
<p>Le composant <code>qc-external-link</code> ajoute une icône à la fin du lien, séparée du dernier mot par
|
|
366
|
+
une espace insécable.</p>
|
|
367
|
+
<p>NB : le composant <code>qc-external-link</code> est ouvert, c-à-d. qu'il ne contient pas de DOM d'ombre (<i>shadow
|
|
368
|
+
DOM</i>).</p>
|
|
353
369
|
|
|
354
370
|
<h4>Exemples</h4>
|
|
355
371
|
|
|
356
|
-
<qc-doc-exemple
|
|
372
|
+
<qc-doc-exemple
|
|
373
|
+
caption="Exemple de lien externe avec différentes tailles de police. Réduire la fenêtre pour constater que l’icône ne se sépare pas du lien au passage à la ligne.">
|
|
357
374
|
<p class="qc-font-size-xl">
|
|
358
|
-
Lorem ipsum
|
|
375
|
+
Lorem ipsum
|
|
376
|
+
<qc-external-link><a href="http://www.external.domain.com/">Lorem ipsum dolor sit amet, consectetur
|
|
377
|
+
adipiscing</a></qc-external-link>
|
|
378
|
+
elit
|
|
359
379
|
</p>
|
|
360
380
|
<p class="qc-font-size-lg">
|
|
361
|
-
Lorem ipsum
|
|
381
|
+
Lorem ipsum
|
|
382
|
+
<qc-external-link><a href="http://www.external.domain.com/">Lorem ipsum dolor sit amet, consectetur
|
|
383
|
+
adipiscing</a></qc-external-link>
|
|
384
|
+
elit
|
|
362
385
|
</p>
|
|
363
386
|
<p class="qc-font-size-md">
|
|
364
|
-
Lorem ipsum
|
|
387
|
+
Lorem ipsum
|
|
388
|
+
<qc-external-link><a href="http://www.external.domain.com/">Lorem ipsum dolor sit amet, consectetur
|
|
389
|
+
adipiscing</a></qc-external-link>
|
|
390
|
+
elit
|
|
365
391
|
</p>
|
|
366
392
|
<p class="qc-font-size-sm">
|
|
367
|
-
Lorem ipsum
|
|
393
|
+
Lorem ipsum
|
|
394
|
+
<qc-external-link><a href="http://www.external.domain.com/">Lorem ipsum dolor sit amet, consectetur
|
|
395
|
+
adipiscing</a></qc-external-link>
|
|
396
|
+
elit
|
|
368
397
|
</p>
|
|
369
398
|
|
|
370
399
|
|
|
@@ -372,47 +401,49 @@
|
|
|
372
401
|
|
|
373
402
|
<h4>Attributs</h4>
|
|
374
403
|
<div class="table-overflow">
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
404
|
+
<table class="qc-table qc-striped component-attributes-description">
|
|
405
|
+
<thead>
|
|
406
|
+
<tr>
|
|
407
|
+
<th>Nom</th>
|
|
408
|
+
<th>Valeur attendue</th>
|
|
409
|
+
<th>Valeur par défaut</th>
|
|
410
|
+
<th>Description</th>
|
|
411
|
+
</tr>
|
|
412
|
+
</thead>
|
|
413
|
+
<tbody>
|
|
385
414
|
<tr>
|
|
386
415
|
<td>img-alt</td>
|
|
387
416
|
<td>Texte</td>
|
|
388
417
|
<td>
|
|
389
418
|
<dl>
|
|
390
|
-
<dt>Français</dt
|
|
391
|
-
<
|
|
419
|
+
<dt>Français</dt>
|
|
420
|
+
<dd>Ce lien dirige vers un autre site.</dd>
|
|
421
|
+
<dt>Anglais</dt>
|
|
422
|
+
<dd>This link directs to another site.</dd>
|
|
392
423
|
</dl>
|
|
393
424
|
</td>
|
|
394
425
|
<td>Texte alternatif de l’image du lien externe.</td>
|
|
395
426
|
</tr>
|
|
396
|
-
|
|
397
|
-
|
|
427
|
+
</tbody>
|
|
428
|
+
</table>
|
|
398
429
|
</div>
|
|
399
|
-
<hr
|
|
430
|
+
<hr/>
|
|
400
431
|
|
|
401
432
|
<!-- liste -->
|
|
402
433
|
<h2 id="liste">Liste</h2>
|
|
403
434
|
<qc-doc-exemple caption="Exemple de listes">
|
|
404
435
|
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
436
|
+
<ul>
|
|
437
|
+
<li>Élément de liste 1</li>
|
|
438
|
+
<li>Élément de liste 2</li>
|
|
439
|
+
<li>Élément de liste 3
|
|
440
|
+
<ul>
|
|
441
|
+
<li>Élément de liste 3.1</li>
|
|
442
|
+
<li>Élément de liste 3.2</li>
|
|
443
|
+
</ul>
|
|
444
|
+
</li>
|
|
445
|
+
<li>Élément de liste 4</li>
|
|
446
|
+
</ul>
|
|
416
447
|
<ol>
|
|
417
448
|
<li>Élément de liste 1</li>
|
|
418
449
|
<li>Élément de liste 2</li>
|
|
@@ -437,33 +468,34 @@
|
|
|
437
468
|
<p>Lorem ipsum dolor sit amet</p>
|
|
438
469
|
</qc-doc-exemple>
|
|
439
470
|
|
|
440
|
-
<hr
|
|
471
|
+
<hr/>
|
|
441
472
|
|
|
442
473
|
<!-- niveaux de titres -->
|
|
443
474
|
<h2 id="titre">Niveaux de titres</h2>
|
|
444
475
|
<qc-doc-exemple caption="Exemples de titres"
|
|
445
476
|
code-target-id="liste-titres"
|
|
477
|
+
>
|
|
478
|
+
<div role="presentation"
|
|
479
|
+
id="liste-titres"
|
|
446
480
|
>
|
|
447
|
-
<
|
|
448
|
-
|
|
449
|
-
>
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
<h5 class="qc-h5">Titre de niveau 5</h5>
|
|
458
|
-
<h6 class="qc-h6">Titre de niveau 6</h6>
|
|
459
|
-
</div>
|
|
481
|
+
<h1 class="qc-h1">Titre de niveau 1</h1>
|
|
482
|
+
<h1 id="exemple-titre-h1"
|
|
483
|
+
class="qc-h1"><span class="qc-subhead ">Surtitre</span>Titre de niveau 1 avec surtitre
|
|
484
|
+
</h1>
|
|
485
|
+
<h2 class="qc-h2">Titre de niveau 2</h2>
|
|
486
|
+
<h3 class="qc-h3">Titre de niveau 3</h3>
|
|
487
|
+
<h4 class="qc-h4">Titre de niveau 4</h4>
|
|
488
|
+
<h5 class="qc-h5">Titre de niveau 5</h5>
|
|
489
|
+
<h6 class="qc-h6">Titre de niveau 6</h6>
|
|
490
|
+
</div>
|
|
460
491
|
</qc-doc-exemple>
|
|
461
492
|
|
|
462
|
-
<hr
|
|
493
|
+
<hr/>
|
|
463
494
|
|
|
464
495
|
<!-- ombrages -->
|
|
465
496
|
<h2 id="ombrages">Ombrages</h2>
|
|
466
|
-
<p>Pour appliquer un ombrage sur un élément, il suffit de lui appliquer la classe <code>qc-shading-X</code>,
|
|
497
|
+
<p>Pour appliquer un ombrage sur un élément, il suffit de lui appliquer la classe <code>qc-shading-X</code>,
|
|
498
|
+
X étant le niveau d’élévation. </p>
|
|
467
499
|
<qc-doc-exemple
|
|
468
500
|
caption="Exemple des différents niveaux d’élévation."
|
|
469
501
|
code-target-id="liste-elevation">
|
|
@@ -476,16 +508,28 @@
|
|
|
476
508
|
</div>
|
|
477
509
|
</qc-doc-exemple>
|
|
478
510
|
|
|
479
|
-
<hr
|
|
511
|
+
<hr/>
|
|
480
512
|
|
|
481
513
|
<!-- paragraphes -->
|
|
482
514
|
<h2 id="paragraphes">Paragraphes</h2>
|
|
483
515
|
<qc-doc-exemple caption="Exemple de paragraphe">
|
|
484
|
-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin iaculis sapien vitae tempor porttitor.
|
|
485
|
-
|
|
516
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin iaculis sapien vitae tempor porttitor.
|
|
517
|
+
Morbi tincidunt lorem et neque commodo varius. Suspendisse pretium risus sit amet nisi tempus, ut
|
|
518
|
+
euismod ex euismod. Nulla eget ullamcorper justo. Quisque cursus eget ex eget cursus. Suspendisse
|
|
519
|
+
potenti. Donec a risus viverra dolor sodales elementum. In lobortis ligula vitae libero pretium,
|
|
520
|
+
vitae fermentum nulla varius. Sed felis libero, facilisis vitae turpis in, ullamcorper bibendum
|
|
521
|
+
erat.</p>
|
|
522
|
+
<p>Aliquam rutrum sollicitudin lorem, vitae elementum tellus cursus ut. Vivamus in sodales risus.
|
|
523
|
+
Maecenas neque ante, faucibus non lobortis et, auctor non sem. Integer nec hendrerit dolor. Mauris
|
|
524
|
+
odio elit, viverra quis dolor sit amet, finibus auctor ex. Aliquam dapibus vestibulum metus a
|
|
525
|
+
blandit. Etiam vitae augue id dui interdum viverra. In at metus nec augue accumsan iaculis.
|
|
526
|
+
Suspendisse interdum, orci quis posuere ultrices, neque orci gravida diam, eu gravida nulla justo ac
|
|
527
|
+
nisi. Nullam vitae sapien id augue imperdiet vehicula id et risus. Cras egestas aliquam magna eu
|
|
528
|
+
aliquam. Sed aliquam semper est in imperdiet. Pellentesque non ultrices nibh. Nullam hendrerit
|
|
529
|
+
dictum gravida. Aliquam vel arcu in odio dapibus malesuada.</p>
|
|
486
530
|
</qc-doc-exemple>
|
|
487
531
|
|
|
488
|
-
<hr
|
|
532
|
+
<hr/>
|
|
489
533
|
|
|
490
534
|
<!-- polices de caractères -->
|
|
491
535
|
<h2 id="polices">Polices de caractères</h2>
|
|
@@ -493,7 +537,7 @@
|
|
|
493
537
|
<h3><strong>Roboto</strong></h3>
|
|
494
538
|
<qc-doc-exemple id="font-roboto"
|
|
495
539
|
caption="Exemple de texte en roboto, avec différentes graisses."
|
|
496
|
-
|
|
540
|
+
>
|
|
497
541
|
<div style="font-family: var(--qc-font-family-header);">
|
|
498
542
|
<p style="font-weight:var(--qc-font-weight-header-regular);">
|
|
499
543
|
ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789,abcdefghijklmnopqrstuvwxyz0123456789<br>
|
|
@@ -509,13 +553,13 @@
|
|
|
509
553
|
</p>
|
|
510
554
|
</div>
|
|
511
555
|
</qc-doc-exemple>
|
|
512
|
-
<!-- <qc-code target-id="font-roboto"></qc-code>-->
|
|
556
|
+
<!-- <qc-code target-id="font-roboto"></qc-code>-->
|
|
513
557
|
</div>
|
|
514
558
|
<div>
|
|
515
559
|
<h3><strong>Open Sans</strong></h3>
|
|
516
560
|
<qc-doc-exemple id="font-open-sans"
|
|
517
561
|
caption="Exemple de texte en open sans, avec différentes graisses."
|
|
518
|
-
|
|
562
|
+
>
|
|
519
563
|
<div style="font-family: var(--qc-font-family-content);">
|
|
520
564
|
<p style="font-weight:var(--qc-font-weight-content-regular);">
|
|
521
565
|
ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789,abcdefghijklmnopqrstuvwxyz0123456789<br>
|
|
@@ -531,7 +575,7 @@
|
|
|
531
575
|
</p>
|
|
532
576
|
</div>
|
|
533
577
|
</qc-doc-exemple>
|
|
534
|
-
<!-- <qc-code target-id="font-open-sans"></qc-code>-->
|
|
578
|
+
<!-- <qc-code target-id="font-open-sans"></qc-code>-->
|
|
535
579
|
</div>
|
|
536
580
|
|
|
537
581
|
<!-- Séparateur -->
|
|
@@ -539,13 +583,13 @@
|
|
|
539
583
|
|
|
540
584
|
<qc-doc-exemple caption="Exemple de séparateur">
|
|
541
585
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
|
|
542
|
-
<hr
|
|
586
|
+
<hr/>
|
|
543
587
|
<p>A autem consequuntur cum cupiditate dignissimos, dolore doloribus,</p>
|
|
544
588
|
</qc-doc-exemple>
|
|
545
589
|
|
|
546
|
-
<!-- <qc-code target-id="separateur-exemple"></qc-code>-->
|
|
590
|
+
<!-- <qc-code target-id="separateur-exemple"></qc-code>-->
|
|
547
591
|
|
|
548
|
-
<hr
|
|
592
|
+
<hr/>
|
|
549
593
|
|
|
550
594
|
<!-- alerte générale -->
|
|
551
595
|
<h2 id="alert">Alerte générale (qc-alert)</h2>
|
|
@@ -553,7 +597,7 @@
|
|
|
553
597
|
<h4>Alerte jaune</h4>
|
|
554
598
|
<p>
|
|
555
599
|
<a href="javascript:;"
|
|
556
|
-
|
|
600
|
+
id="show-qc-alert"
|
|
557
601
|
hidden
|
|
558
602
|
>
|
|
559
603
|
Réafficher l'alerte
|
|
@@ -561,81 +605,86 @@
|
|
|
561
605
|
</p>
|
|
562
606
|
|
|
563
607
|
<qc-doc-exemple id="alert-warning"
|
|
564
|
-
caption="Exemple d'alerte jaune"
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
608
|
+
caption="Exemple d'alerte jaune">
|
|
609
|
+
<qc-alert id="alerte-masquable"
|
|
610
|
+
type="warning"
|
|
611
|
+
maskable="true"
|
|
612
|
+
content="Alerte jaune d'importance élevée"
|
|
613
|
+
>
|
|
614
|
+
</qc-alert>
|
|
571
615
|
</qc-doc-exemple>
|
|
572
|
-
<!-- <qc-code target-id="alert-warning"></qc-code>-->
|
|
616
|
+
<!-- <qc-code target-id="alert-warning"></qc-code>-->
|
|
573
617
|
|
|
574
618
|
<h4>Alerte bleue</h4>
|
|
575
619
|
<qc-doc-exemple id="alert-general"
|
|
576
|
-
caption="Exemple d'alerte générale"
|
|
620
|
+
caption="Exemple d'alerte générale">
|
|
577
621
|
<qc-alert type="general"
|
|
578
622
|
maskable="false">
|
|
579
623
|
<p>Alerte bleue d'importance modérée <a href="javascript:;">avec un lien textuel</a></p>
|
|
580
624
|
</qc-alert>
|
|
581
625
|
</qc-doc-exemple>
|
|
582
626
|
|
|
583
|
-
<!-- <qc-code target-id="alert-general"></qc-code>-->
|
|
627
|
+
<!-- <qc-code target-id="alert-general"></qc-code>-->
|
|
584
628
|
|
|
585
629
|
<h3>Documentation technique</h3>
|
|
586
630
|
|
|
587
631
|
<h4>Attributs</h4>
|
|
588
632
|
<div class="table-overflow">
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
633
|
+
<table class="qc-table qc-striped component-attributes-description">
|
|
634
|
+
<thead>
|
|
635
|
+
<tr>
|
|
636
|
+
<th>Nom</th>
|
|
637
|
+
<th>Valeur attendue</th>
|
|
638
|
+
<th>Valeur par défaut</th>
|
|
639
|
+
<th>Description</th>
|
|
640
|
+
</tr>
|
|
641
|
+
</thead>
|
|
642
|
+
<tr>
|
|
643
|
+
<td>type</td>
|
|
644
|
+
<td>"general" ou "warning"</td>
|
|
645
|
+
<td>"general"</td>
|
|
646
|
+
<td>Type de l'alerte : s'il s'agit d'une alerte bleue ou jaune</td>
|
|
647
|
+
</tr>
|
|
648
|
+
<tr>
|
|
649
|
+
<td>maskable</td>
|
|
650
|
+
<td>"true" ou "false"</td>
|
|
651
|
+
<td>"true"</td>
|
|
652
|
+
<td>Afficher le bouton de fermeture de l'alerte</td>
|
|
653
|
+
</tr>
|
|
654
|
+
<tr>
|
|
655
|
+
<td>content</td>
|
|
656
|
+
<td>Texte</td>
|
|
657
|
+
<td>Chaine vide</td>
|
|
658
|
+
<td>Afficher le contenu de l'alerte</td>
|
|
659
|
+
</tr>
|
|
660
|
+
<tr>
|
|
661
|
+
<td>hide</td>
|
|
662
|
+
<td>"true" ou "false"</td>
|
|
663
|
+
<td>"false"</td>
|
|
664
|
+
<td>Masque ou affiche l'alerte</td>
|
|
665
|
+
</tr>
|
|
666
|
+
<tr>
|
|
667
|
+
<td>full-width</td>
|
|
668
|
+
<td>"true" ou "false"</td>
|
|
669
|
+
<td>"false"</td>
|
|
670
|
+
<td>Affiche le contenu de l’alerte dans un conteneur pleine-largeur (classe css
|
|
671
|
+
qc-container-fluid)
|
|
672
|
+
</td>
|
|
673
|
+
</tr>
|
|
674
|
+
</table>
|
|
629
675
|
</div>
|
|
630
676
|
|
|
631
677
|
<h4>Événement JS</h4>
|
|
632
678
|
|
|
633
|
-
<p>Un événement JS <code class="qc-bg-color-grey-pale">qc.alert.hide</code> est émis à la fermeture de
|
|
679
|
+
<p>Un événement JS <code class="qc-bg-color-grey-pale">qc.alert.hide</code> est émis à la fermeture de
|
|
680
|
+
l'alerte</p>
|
|
634
681
|
<script id="qc-alert-event-exemple">
|
|
635
682
|
/* Fermer l'alerte jaune pour voir un message dans la console de votre navigateur */
|
|
636
683
|
document.addEventListener(
|
|
637
684
|
'qc.alert.hide',
|
|
638
|
-
(e) => {
|
|
685
|
+
(e) => {
|
|
686
|
+
console.log('Fermeture de l\'alerte id=\'' + e.target.id + '\'');
|
|
687
|
+
}
|
|
639
688
|
)
|
|
640
689
|
</script>
|
|
641
690
|
<qc-code target-id="qc-alert-event-exemple"
|
|
@@ -646,24 +695,24 @@
|
|
|
646
695
|
<p>Ci-dessous, la zone d'ajout de contenu HTML (balise <slot>) délimitée en pointillé.</p>
|
|
647
696
|
<qc-doc-exemple caption="Présentation des zone d'ajout de contenu"
|
|
648
697
|
hide-code
|
|
649
|
-
|
|
698
|
+
>
|
|
650
699
|
<qc-alert id="qc-alert-slots">
|
|
651
700
|
<div style="border:2px dashed; padding: var(--qc-spacer-xs);">
|
|
652
701
|
Contenu par défaut
|
|
653
702
|
</div>
|
|
654
703
|
</qc-alert>
|
|
655
704
|
</qc-doc-exemple>
|
|
656
|
-
<!-- <qc-code target-id="qc-alert-slots"></qc-code>-->
|
|
705
|
+
<!-- <qc-code target-id="qc-alert-slots"></qc-code>-->
|
|
657
706
|
|
|
658
|
-
<hr
|
|
707
|
+
<hr/>
|
|
659
708
|
|
|
660
709
|
<!-- avis -->
|
|
661
710
|
<h2 id="notice">Avis (qc-notice)</h2>
|
|
662
711
|
<h3>Exemples</h3>
|
|
663
712
|
|
|
664
713
|
<qc-doc-exemple id="exemple-avis-neutre"
|
|
665
|
-
|
|
666
|
-
|
|
714
|
+
caption="Exemple d’avis neutres"
|
|
715
|
+
>
|
|
667
716
|
<qc-notice type="advice"
|
|
668
717
|
icon="ampoule"
|
|
669
718
|
title="Nouvelle règlementation"
|
|
@@ -682,11 +731,11 @@
|
|
|
682
731
|
content="Les nouveaux règlements de pêche seront en vigeur à partir du 12 mai.">
|
|
683
732
|
</qc-notice>
|
|
684
733
|
</qc-doc-exemple>
|
|
685
|
-
<!-- <qc-code target-id="exemple-avis-neutre" ></qc-code>-->
|
|
734
|
+
<!-- <qc-code target-id="exemple-avis-neutre" ></qc-code>-->
|
|
686
735
|
|
|
687
736
|
|
|
688
737
|
<qc-doc-exemple id="exemple-avis-avertissement"
|
|
689
|
-
|
|
738
|
+
caption="Exemple d’avertissement (avec et sans <i><code>slot</code></i>)"
|
|
690
739
|
>
|
|
691
740
|
<qc-notice type="warning"
|
|
692
741
|
title="Migration des <i>contenus</i>"
|
|
@@ -695,91 +744,95 @@
|
|
|
695
744
|
|
|
696
745
|
<qc-notice type="warning">
|
|
697
746
|
<h2>Migration des <i>contenus</i></h2>
|
|
698
|
-
<p>Les contenus seront transférés dans Québec.ca à partir du 16 février et le site sera fermé le 20
|
|
747
|
+
<p>Les contenus seront transférés dans Québec.ca à partir du 16 février et le site sera fermé le 20
|
|
748
|
+
avril.</p>
|
|
699
749
|
</qc-notice>
|
|
700
750
|
</qc-doc-exemple>
|
|
701
751
|
|
|
702
|
-
<!-- <qc-code target-id="exemple-avis-avertissement" ></qc-code>-->
|
|
752
|
+
<!-- <qc-code target-id="exemple-avis-avertissement" ></qc-code>-->
|
|
703
753
|
|
|
704
754
|
|
|
705
755
|
<qc-doc-exemple id="exemple-avis-succes"
|
|
706
|
-
|
|
756
|
+
caption="Exemple d’avis de succès"
|
|
707
757
|
>
|
|
708
758
|
<qc-notice type="success"
|
|
709
759
|
title="Votre demande d'inscription a été reçue"
|
|
710
760
|
content="Votre code de confirmation sera envoyé par courriel.">
|
|
711
761
|
</qc-notice>
|
|
712
762
|
</qc-doc-exemple>
|
|
713
|
-
<!-- <qc-code target-id="exemple-avis-succes" ></qc-code>-->
|
|
763
|
+
<!-- <qc-code target-id="exemple-avis-succes" ></qc-code>-->
|
|
714
764
|
|
|
715
765
|
|
|
716
766
|
<qc-doc-exemple id="exemple-avis-erreur"
|
|
717
|
-
|
|
767
|
+
caption="Exemple d’avis d’erreur"
|
|
718
768
|
>
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
769
|
+
<qc-notice type="error"
|
|
770
|
+
title="Des erreurs sont présentes dans le formulaire.">
|
|
771
|
+
<ul>
|
|
772
|
+
<li>
|
|
773
|
+
<a href="javascript:;">Le champ « Nom de famille » est obligatoire ;</a>
|
|
774
|
+
</li>
|
|
775
|
+
<li>
|
|
776
|
+
<a href="javascript:;">Le champ « Prénom » est obligatoire ;</a>
|
|
777
|
+
</li>
|
|
778
|
+
<li>
|
|
779
|
+
<a href="javascript:;">Le champ « Numéro de dossier » est obligatoire.</a>
|
|
780
|
+
</li>
|
|
781
|
+
</ul>
|
|
782
|
+
</qc-notice>
|
|
733
783
|
</qc-doc-exemple>
|
|
734
784
|
|
|
735
|
-
<!-- <qc-code target-id="exemple-avis-erreur" ></qc-code>-->
|
|
785
|
+
<!-- <qc-code target-id="exemple-avis-erreur" ></qc-code>-->
|
|
736
786
|
|
|
737
787
|
<h3>Documentation technique</h3>
|
|
738
788
|
|
|
739
789
|
<h4>Attributs</h4>
|
|
740
790
|
<div class="table-overflow">
|
|
741
|
-
|
|
742
|
-
|
|
791
|
+
<table class="qc-table qc-striped component-attributes-description">
|
|
792
|
+
<thead>
|
|
743
793
|
<tr>
|
|
744
794
|
<th>Nom</th>
|
|
745
795
|
<th>Valeur attendue</th>
|
|
746
796
|
<th>Valeur par défaut</th>
|
|
747
797
|
<th>Description</th>
|
|
748
798
|
</tr>
|
|
749
|
-
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
|
|
756
|
-
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
799
|
+
</thead>
|
|
800
|
+
<tbody>
|
|
801
|
+
<tr>
|
|
802
|
+
<td>title</td>
|
|
803
|
+
<td>Texte</td>
|
|
804
|
+
<td>Chaine vide</td>
|
|
805
|
+
<td>Titre de l'avis</td>
|
|
806
|
+
</tr>
|
|
807
|
+
<tr>
|
|
808
|
+
<td>type</td>
|
|
809
|
+
<td>information, warning, success, error, advice, note</td>
|
|
810
|
+
<td>information (si absence de type)</td>
|
|
811
|
+
<td>Le type d'avis</td>
|
|
812
|
+
</tr>
|
|
813
|
+
<tr>
|
|
814
|
+
<td>content</td>
|
|
815
|
+
<td>Texte</td>
|
|
816
|
+
<td>Chaîne vide</td>
|
|
817
|
+
<td>Le contenu de l'avis, il doit contenir du texte structuré avec des balises sémantiques.</td>
|
|
818
|
+
</tr>
|
|
819
|
+
<tr>
|
|
820
|
+
<td>header</td>
|
|
821
|
+
<td>h1,h3,h2,h3,h4,h5,h6</td>
|
|
822
|
+
<td>h2</td>
|
|
823
|
+
<td>La balise du niveau de titre de l'avis</td>
|
|
824
|
+
</tr>
|
|
825
|
+
<tr>
|
|
826
|
+
<td>icon</td>
|
|
827
|
+
<td>Toute clé de la map $images dans settings/_base.scss</td>
|
|
828
|
+
<td>information
|
|
829
|
+
<qc-icon icon="information" aria-hidden="true" size="nm"></qc-icon>
|
|
830
|
+
(si absence de type)
|
|
831
|
+
</td>
|
|
832
|
+
<td>Défini l’icône pour les avis neutres</td>
|
|
833
|
+
</tr>
|
|
834
|
+
</tbody>
|
|
835
|
+
</table>
|
|
783
836
|
</div>
|
|
784
837
|
<h4>Zone d'ajout de contenu HTML</h4>
|
|
785
838
|
|
|
@@ -788,14 +841,14 @@
|
|
|
788
841
|
<qc-doc-exemple id="presentation-slots-avis"
|
|
789
842
|
caption="Présentation des emplacements disponibles dans les avis."
|
|
790
843
|
hide-code
|
|
791
|
-
|
|
844
|
+
>
|
|
792
845
|
<qc-notice id="qc-notice-slots">
|
|
793
846
|
<div style="border:2px dashed; padding: var(--qc-spacer-xs);">
|
|
794
847
|
Contenu par défaut
|
|
795
848
|
</div>
|
|
796
849
|
</qc-notice>
|
|
797
850
|
</qc-doc-exemple>
|
|
798
|
-
<!-- <qc-code target-id="presentation-slots-avis" ></qc-code>-->
|
|
851
|
+
<!-- <qc-code target-id="presentation-slots-avis" ></qc-code>-->
|
|
799
852
|
|
|
800
853
|
<h2 id="search-bar">Barre de recherche</h2>
|
|
801
854
|
<h3>Exemples</h3>
|
|
@@ -811,7 +864,7 @@
|
|
|
811
864
|
|
|
812
865
|
<div style="margin: var(--qc-spacer-content-block-mb) 0 0;
|
|
813
866
|
padding: var(--qc-spacer-md);
|
|
814
|
-
background-color: var(--qc-color-blue-piv);"
|
|
867
|
+
background-color: var(--qc-color-blue-piv);">
|
|
815
868
|
<qc-search-bar piv-background></qc-search-bar>
|
|
816
869
|
</div>
|
|
817
870
|
|
|
@@ -819,7 +872,9 @@
|
|
|
819
872
|
|
|
820
873
|
<h3>Saisie semi-automatique (<i>autocomplete</i>)</h3>
|
|
821
874
|
|
|
822
|
-
<p>La barre de recherche n’offre pas encore la possibilité d’ajouter des suggestions à la saisie de texte.
|
|
875
|
+
<p>La barre de recherche n’offre pas encore la possibilité d’ajouter des suggestions à la saisie de texte.
|
|
876
|
+
Cependant il vous est possible d’utiliser votre propre bibliothèque javascript. Voici un exemple avec
|
|
877
|
+
jQuery UI.</p>
|
|
823
878
|
|
|
824
879
|
<qc-doc-exemple caption="Exemple de barre de recherche avec saisie semi-automatique basée sur jQuery UI">
|
|
825
880
|
|
|
@@ -829,12 +884,12 @@
|
|
|
829
884
|
<qc-search-bar class="autocomplete-search-bar"
|
|
830
885
|
input-placeholder="Tapez 'aaa' pour faire apparaître de nombreuses suggestions…"
|
|
831
886
|
style="margin-bottom: var(--qc-spacer-content-block-mb)"
|
|
832
|
-
|
|
887
|
+
></qc-search-bar>
|
|
833
888
|
|
|
834
889
|
<script>
|
|
835
|
-
$(function() {
|
|
890
|
+
$(function () {
|
|
836
891
|
$.widget("ui.autocomplete", $.ui.autocomplete, {
|
|
837
|
-
_resizeMenu: function() {
|
|
892
|
+
_resizeMenu: function () {
|
|
838
893
|
// pour donner au panneau des suggestions la largeur de la barre de recherche
|
|
839
894
|
let component = this.element.closest("qc-search-bar");
|
|
840
895
|
this.menu.element.outerWidth(component.outerWidth());
|
|
@@ -843,14 +898,14 @@
|
|
|
843
898
|
// personnalisation des messages jquery ui pour le lecteur d’écran en français
|
|
844
899
|
$.extend($.ui.autocomplete.prototype.options.messages, {
|
|
845
900
|
noResults: "Aucun résultat trouvé.",
|
|
846
|
-
results: function(count) {
|
|
901
|
+
results: function (count) {
|
|
847
902
|
let s = count > 1 ? "s" : ''
|
|
848
903
|
return `${count} résultat${s} disponible${s}, utilisez les flèches directionnelles haut et bas pour vous déplacer dans la liste.`;
|
|
849
904
|
}
|
|
850
905
|
});
|
|
851
906
|
|
|
852
907
|
$(".autocomplete-search-bar input[type=search]").autocomplete({
|
|
853
|
-
source: [...Array(1000)].map((v,k) => "aaaa - " + k)
|
|
908
|
+
source: [...Array(1000)].map((v, k) => "aaaa - " + k)
|
|
854
909
|
});
|
|
855
910
|
})
|
|
856
911
|
|
|
@@ -860,7 +915,6 @@
|
|
|
860
915
|
</qc-doc-exemple>
|
|
861
916
|
|
|
862
917
|
|
|
863
|
-
|
|
864
918
|
<h3>Attributs</h3>
|
|
865
919
|
<div class="table-overflow">
|
|
866
920
|
<table class="qc-table qc-striped component-attributes-description">
|
|
@@ -889,7 +943,8 @@
|
|
|
889
943
|
<td>input-*</td>
|
|
890
944
|
<td>na</td>
|
|
891
945
|
<td>na</td>
|
|
892
|
-
<td>Tout attribut commençant par <code>input-</code> sera ajouté au champ texte du composant
|
|
946
|
+
<td>Tout attribut commençant par <code>input-</code> sera ajouté au champ texte du composant.
|
|
947
|
+
</td>
|
|
893
948
|
</tr>
|
|
894
949
|
<tr>
|
|
895
950
|
<td>submit-aria-label</td>
|
|
@@ -901,7 +956,9 @@
|
|
|
901
956
|
<td>submit-*</td>
|
|
902
957
|
<td>na</td>
|
|
903
958
|
<td>na</td>
|
|
904
|
-
<td>Tout attribut commençant par <code>input-</code> sera ajouté au bouton du composant. Utile
|
|
959
|
+
<td>Tout attribut commençant par <code>input-</code> sera ajouté au bouton du composant. Utile
|
|
960
|
+
par exemple pour lui donner un nom et une valeur.
|
|
961
|
+
</td>
|
|
905
962
|
</tr>
|
|
906
963
|
<tr>
|
|
907
964
|
<td>piv-background</td>
|
|
@@ -927,23 +984,23 @@
|
|
|
927
984
|
<h4>Exemples</h4>
|
|
928
985
|
<!-- TODO remplacer les aria-label des qc-doc-exemple par aria-labelby et cibler le titre -->
|
|
929
986
|
<qc-doc-exemple id="pivEnteteExempleLiens"
|
|
930
|
-
|
|
931
|
-
|
|
987
|
+
caption="Exemple de bandeau d’entête PIV de base"
|
|
988
|
+
>
|
|
932
989
|
<qc-piv-header alt-logo="Accédez à Québec.ca"
|
|
933
990
|
join-us-url="#join-us"
|
|
934
991
|
alt-language-url="#fakeEnglish"
|
|
935
992
|
>
|
|
936
993
|
</qc-piv-header>
|
|
937
994
|
</qc-doc-exemple>
|
|
938
|
-
<!-- <qc-code target-id="pivEnteteExempleLiens"></qc-code>-->
|
|
995
|
+
<!-- <qc-code target-id="pivEnteteExempleLiens"></qc-code>-->
|
|
939
996
|
|
|
940
997
|
<qc-doc-exemple id="pivEnteteExempleRecherche"
|
|
941
|
-
|
|
998
|
+
caption="Exemple de personnalisation des liens du bandeau d’entête PIV"
|
|
942
999
|
>
|
|
943
1000
|
<qc-piv-header
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
|
|
1001
|
+
title-text="Nom du site"
|
|
1002
|
+
title-url="https://www.quebec.ca/"
|
|
1003
|
+
alt-logo="Accédez à Québec.ca"
|
|
947
1004
|
>
|
|
948
1005
|
<nav slot="links"
|
|
949
1006
|
aria-label="Navigation PIV">
|
|
@@ -956,7 +1013,7 @@
|
|
|
956
1013
|
</nav>
|
|
957
1014
|
</qc-piv-header>
|
|
958
1015
|
</qc-doc-exemple>
|
|
959
|
-
<!-- <qc-code target-id="pivEnteteExempleRecherche"></qc-code>-->
|
|
1016
|
+
<!-- <qc-code target-id="pivEnteteExempleRecherche"></qc-code>-->
|
|
960
1017
|
|
|
961
1018
|
<qc-doc-exemple caption="Exemple de bandeau d’entête PIV avec recherche personnalisée"
|
|
962
1019
|
|
|
@@ -988,16 +1045,16 @@
|
|
|
988
1045
|
<h4>Documentation technique</h4>
|
|
989
1046
|
<h5>Attributs</h5>
|
|
990
1047
|
<div class="table-overflow">
|
|
991
|
-
|
|
992
|
-
|
|
1048
|
+
<table class="qc-table qc-striped component-attributes-description">
|
|
1049
|
+
<thead>
|
|
993
1050
|
<tr>
|
|
994
1051
|
<th>Nom</th>
|
|
995
1052
|
<th>Valeur attendue</th>
|
|
996
1053
|
<th>Valeur par défaut</th>
|
|
997
1054
|
<th>Description</th>
|
|
998
1055
|
</tr>
|
|
999
|
-
|
|
1000
|
-
|
|
1056
|
+
</thead>
|
|
1057
|
+
<tbody>
|
|
1001
1058
|
<tr>
|
|
1002
1059
|
<td>title-text</td>
|
|
1003
1060
|
<td>Texte</td>
|
|
@@ -1021,7 +1078,7 @@
|
|
|
1021
1078
|
<td>logo-src</td>
|
|
1022
1079
|
<td>Adresse</td>
|
|
1023
1080
|
<td>adresse du logo inclus dans la trousse</td>
|
|
1024
|
-
<td>Adresse du logo
|
|
1081
|
+
<td>Adresse du logo</td>
|
|
1025
1082
|
</tr>
|
|
1026
1083
|
<tr>
|
|
1027
1084
|
<td>logo-alt</td>
|
|
@@ -1041,30 +1098,30 @@
|
|
|
1041
1098
|
<td>vide</td>
|
|
1042
1099
|
<td>L'url de l'autre langue. Si vide, le lien n'apparaît pas.</td>
|
|
1043
1100
|
</tr>
|
|
1044
|
-
|
|
1045
|
-
|
|
1046
|
-
|
|
1047
|
-
|
|
1048
|
-
|
|
1049
|
-
|
|
1101
|
+
<tr>
|
|
1102
|
+
<td>join-us-text</td>
|
|
1103
|
+
<td>Texte</td>
|
|
1104
|
+
<td>Nous joindre/Contact us</td>
|
|
1105
|
+
<td>Texte du lien « Nous joindre »</td>
|
|
1106
|
+
</tr>
|
|
1050
1107
|
<tr>
|
|
1051
1108
|
<td>join-us-url</td>
|
|
1052
1109
|
<td>Adresse</td>
|
|
1053
1110
|
<td>Vide</td>
|
|
1054
1111
|
<td>Adresse du lien « Nous joindre ». Si vide, le lien n'apparait pas.</td>
|
|
1055
1112
|
</tr>
|
|
1056
|
-
|
|
1057
|
-
|
|
1058
|
-
|
|
1059
|
-
|
|
1060
|
-
|
|
1061
|
-
|
|
1062
|
-
|
|
1063
|
-
|
|
1064
|
-
|
|
1065
|
-
|
|
1066
|
-
|
|
1067
|
-
|
|
1113
|
+
<tr>
|
|
1114
|
+
<td>go-to-content</td>
|
|
1115
|
+
<td>"true" ou "false"</td>
|
|
1116
|
+
<td>"true"</td>
|
|
1117
|
+
<td>Afficher ou non le lien pour aller directement au contenu.</td>
|
|
1118
|
+
</tr>
|
|
1119
|
+
<tr>
|
|
1120
|
+
<td>go-to-content-text</td>
|
|
1121
|
+
<td>Texte</td>
|
|
1122
|
+
<td>Passer au contenu/Skip to content</td>
|
|
1123
|
+
<td>Texte du lien pour passer directement au contenu.</td>
|
|
1124
|
+
</tr>
|
|
1068
1125
|
<tr>
|
|
1069
1126
|
<td>go-to-content-anchor</td>
|
|
1070
1127
|
<td>id du 1<sup>er</sup> élément de contenu</td>
|
|
@@ -1084,7 +1141,9 @@
|
|
|
1084
1141
|
<td>
|
|
1085
1142
|
Active la recherche dans le bandeau PIV :
|
|
1086
1143
|
<ul>
|
|
1087
|
-
<li style="margin-bottom: 0">le bouton de recherche en forme de loupe est alors
|
|
1144
|
+
<li style="margin-bottom: 0">le bouton de recherche en forme de loupe est alors
|
|
1145
|
+
affiché ;
|
|
1146
|
+
</li>
|
|
1088
1147
|
<li>au clic, il affiche le formulaire de recherche.</li>
|
|
1089
1148
|
</ul>
|
|
1090
1149
|
</td>
|
|
@@ -1093,23 +1152,29 @@
|
|
|
1093
1152
|
<td>show-search</td>
|
|
1094
1153
|
<td>"true" ou "false"</td>
|
|
1095
1154
|
<td>"false"</td>
|
|
1096
|
-
<td>Affiche le formulaire de recherche (normalement caché tant que le bouton de recherche n'a
|
|
1155
|
+
<td>Affiche le formulaire de recherche (normalement caché tant que le bouton de recherche n'a
|
|
1156
|
+
pas été pressé).
|
|
1157
|
+
</td>
|
|
1097
1158
|
</tr>
|
|
1098
1159
|
|
|
1099
1160
|
<tr>
|
|
1100
1161
|
<td>display-search-text</td>
|
|
1101
1162
|
<td>Texte</td>
|
|
1102
1163
|
<td>Cliquer pour faire une recherche / Click to search</td>
|
|
1103
|
-
<td>Texte du bouton de recherche (en forme de loupe) pour les lecteurs d'écran pour afficher la
|
|
1164
|
+
<td>Texte du bouton de recherche (en forme de loupe) pour les lecteurs d'écran pour afficher la
|
|
1165
|
+
barre de recherche.
|
|
1166
|
+
</td>
|
|
1104
1167
|
</tr>
|
|
1105
1168
|
<tr>
|
|
1106
1169
|
<td>hide-search-text</td>
|
|
1107
1170
|
<td>Texte</td>
|
|
1108
1171
|
<td>Masquer la barre de recherche / Hide search bar</td>
|
|
1109
|
-
<td>Texte du bouton de recherche (en forme de loupe) pour les lecteurs d'écran pour masquer la
|
|
1172
|
+
<td>Texte du bouton de recherche (en forme de loupe) pour les lecteurs d'écran pour masquer la
|
|
1173
|
+
barre de recherche.
|
|
1174
|
+
</td>
|
|
1110
1175
|
</tr>
|
|
1111
|
-
|
|
1112
|
-
|
|
1176
|
+
</tbody>
|
|
1177
|
+
</table>
|
|
1113
1178
|
</div>
|
|
1114
1179
|
<h5>Zones d'ajout de contenu HTML</h5>
|
|
1115
1180
|
|
|
@@ -1117,11 +1182,11 @@
|
|
|
1117
1182
|
<qc-doc-exemple id="qc-piv-header-slots"
|
|
1118
1183
|
caption="Présentation des zones d'ajout de contenu dans le PIV"
|
|
1119
1184
|
hide-code
|
|
1120
|
-
|
|
1185
|
+
>
|
|
1121
1186
|
<qc-piv-header
|
|
1122
|
-
|
|
1123
|
-
|
|
1124
|
-
|
|
1187
|
+
style="margin-bottom: var(--qc-spacer-content-block-mb);"
|
|
1188
|
+
enable-search="true"
|
|
1189
|
+
show-search="true">
|
|
1125
1190
|
<div slot="search-zone"
|
|
1126
1191
|
style="border:2px dashed;padding: var(--qc-spacer-xs);">
|
|
1127
1192
|
slot="search-zone"
|
|
@@ -1134,7 +1199,7 @@
|
|
|
1134
1199
|
</qc-piv-header>
|
|
1135
1200
|
</qc-doc-exemple>
|
|
1136
1201
|
|
|
1137
|
-
<!-- <qc-code target-id="qc-piv-header-slots"></qc-code>-->
|
|
1202
|
+
<!-- <qc-code target-id="qc-piv-header-slots"></qc-code>-->
|
|
1138
1203
|
|
|
1139
1204
|
<h3 id="piv-footer">Pied de page du PIV (qc-piv-footer)</h3>
|
|
1140
1205
|
|
|
@@ -1143,7 +1208,7 @@
|
|
|
1143
1208
|
|
|
1144
1209
|
<qc-doc-exemple id="piv-footer-1"
|
|
1145
1210
|
caption="Exemple de pied de page du PIV de base">
|
|
1146
|
-
<qc-piv-footer
|
|
1211
|
+
<qc-piv-footer>
|
|
1147
1212
|
<nav aria-label="Navigation du pied-de-page">
|
|
1148
1213
|
<ul>
|
|
1149
1214
|
<li><a href="/">Accessibilité</a></li>
|
|
@@ -1156,7 +1221,7 @@
|
|
|
1156
1221
|
</nav>
|
|
1157
1222
|
</qc-piv-footer>
|
|
1158
1223
|
</qc-doc-exemple>
|
|
1159
|
-
<!-- <qc-code target-id="piv-footer-1"></qc-code>-->
|
|
1224
|
+
<!-- <qc-code target-id="piv-footer-1"></qc-code>-->
|
|
1160
1225
|
|
|
1161
1226
|
<qc-doc-exemple id="piv-footer-ex-2"
|
|
1162
1227
|
caption="Exemple de pied de page du PIV personnalisé."
|
|
@@ -1164,7 +1229,7 @@
|
|
|
1164
1229
|
<qc-piv-footer
|
|
1165
1230
|
logo-src="img/piv-MCE-theme-clair.svg"
|
|
1166
1231
|
logo-src-dark-theme="img/piv-MCE-theme-sombre.svg"
|
|
1167
|
-
|
|
1232
|
+
>
|
|
1168
1233
|
<nav aria-label="Navigation du pied-de-page">
|
|
1169
1234
|
<ul>
|
|
1170
1235
|
<li><a href="/">Accessibilité</a></li>
|
|
@@ -1183,7 +1248,7 @@
|
|
|
1183
1248
|
</qc-external-link>
|
|
1184
1249
|
</qc-piv-footer>
|
|
1185
1250
|
</qc-doc-exemple>
|
|
1186
|
-
<!-- <qc-code target-id="piv-footer-ex-2"></qc-code>-->
|
|
1251
|
+
<!-- <qc-code target-id="piv-footer-ex-2"></qc-code>-->
|
|
1187
1252
|
|
|
1188
1253
|
<h4>Documentation technique</h4>
|
|
1189
1254
|
|
|
@@ -1209,21 +1274,27 @@
|
|
|
1209
1274
|
<td>logo-src</td>
|
|
1210
1275
|
<td>Le chemin de l’image en thème clair.</td>
|
|
1211
1276
|
<td>Le chemin vers l’image dist/img/QUEBEC_couleur.svg de la trousse</td>
|
|
1212
|
-
<td>Adresse de l'image du pied de page en thème clair (fond transparent, texte et drapeaux en
|
|
1277
|
+
<td>Adresse de l'image du pied de page en thème clair (fond transparent, texte et drapeaux en
|
|
1278
|
+
couleur, voir <a href="#piv-footer-ex-2">l'exemple de pied de page PIV personnalisé</a>).
|
|
1279
|
+
</td>
|
|
1213
1280
|
</tr>
|
|
1214
1281
|
<tr>
|
|
1215
1282
|
<td>logo-src-dark-theme</td>
|
|
1216
1283
|
<td>Le chemin de l’image en thème sombre.</td>
|
|
1217
1284
|
<td>Le chemin vers l’image dist/img/QUEBEC_blanc.svg de la trousse</td>
|
|
1218
|
-
<td>Adresse de l'image du pied de page en thème sombre
|
|
1285
|
+
<td>Adresse de l'image du pied de page en thème sombre (fond transparent, texte et drapeaux en
|
|
1286
|
+
blanc, voir <a href="#piv-footer-ex-2">l'exemple de pied de page PIV personnalisé</a>).
|
|
1287
|
+
</td>
|
|
1219
1288
|
</tr>
|
|
1220
1289
|
<tr>
|
|
1221
1290
|
<td>logo-alt</td>
|
|
1222
1291
|
<td>Texte</td>
|
|
1223
1292
|
<td>
|
|
1224
1293
|
<dl>
|
|
1225
|
-
<dt>Français</dt
|
|
1226
|
-
<
|
|
1294
|
+
<dt>Français</dt>
|
|
1295
|
+
<dd>Logo du gouvernement du Québec</dd>
|
|
1296
|
+
<dt>Anglais</dt>
|
|
1297
|
+
<dd>Logo of government of Québec</dd>
|
|
1227
1298
|
</dl>
|
|
1228
1299
|
</td>
|
|
1229
1300
|
<td>Texte alternatif du logo pour les lecteurs d'écran</td>
|
|
@@ -1251,8 +1322,10 @@
|
|
|
1251
1322
|
<td>Adresse</td>
|
|
1252
1323
|
<td>
|
|
1253
1324
|
<dl>
|
|
1254
|
-
<dt>Français</dt
|
|
1255
|
-
<
|
|
1325
|
+
<dt>Français</dt>
|
|
1326
|
+
<dd>https://www.quebec.ca/droit-auteur</dd>
|
|
1327
|
+
<dt>Anglais</dt>
|
|
1328
|
+
<dd>https://www.quebec.ca/en/copyright</dd>
|
|
1256
1329
|
</dl>
|
|
1257
1330
|
</td>
|
|
1258
1331
|
<td>L'adresse de la page du droit d'auteur sur quebec.ca</td>
|
|
@@ -1261,7 +1334,12 @@
|
|
|
1261
1334
|
</table>
|
|
1262
1335
|
</div>
|
|
1263
1336
|
|
|
1264
|
-
<qc-notice type="information">Les images du pied de page PIV doivent respecter
|
|
1337
|
+
<qc-notice type="information">Les images du pied de page PIV doivent respecter
|
|
1338
|
+
<qc-external-link><a href="https://www.piv.gouv.qc.ca/fileadmin/documents/guide/section1_general.pdf">les
|
|
1339
|
+
normes graphiques du système d’identification visuel</a>. Nous vous invitons à privilégier le format
|
|
1340
|
+
SVG, qui permet de conserver la lisibilité de l’image en cas de zoom..
|
|
1341
|
+
</qc-external-link>
|
|
1342
|
+
</qc-notice>
|
|
1265
1343
|
|
|
1266
1344
|
<h5>Zones d'ajout de contenu HTML</h5>
|
|
1267
1345
|
|
|
@@ -1269,7 +1347,7 @@
|
|
|
1269
1347
|
<qc-doc-exemple id="qc-piv-footer-slots"
|
|
1270
1348
|
caption="Présentation des zones d'ajout de contenu du pied-de-page PIV">
|
|
1271
1349
|
<qc-piv-footer>
|
|
1272
|
-
<div
|
|
1350
|
+
<div style="border:2px dashed;padding: var(--qc-spacer-xs);">
|
|
1273
1351
|
Contenu par défaut
|
|
1274
1352
|
</div>
|
|
1275
1353
|
<div slot="copyright"
|
|
@@ -1278,21 +1356,22 @@
|
|
|
1278
1356
|
</div>
|
|
1279
1357
|
</qc-piv-footer>
|
|
1280
1358
|
</qc-doc-exemple>
|
|
1281
|
-
<!-- <qc-code target-id="qc-piv-footer-slots"></qc-code>-->
|
|
1359
|
+
<!-- <qc-code target-id="qc-piv-footer-slots"></qc-code>-->
|
|
1282
1360
|
|
|
1283
|
-
<hr
|
|
1361
|
+
<hr/>
|
|
1284
1362
|
|
|
1285
1363
|
<!-- haut de page -->
|
|
1286
1364
|
<h2 id="toTop">Haut de page</h2>
|
|
1287
1365
|
<p>
|
|
1288
|
-
Le composant <i>haut de page</i> est la flèche qui permet à l'utilisateur de remonter vers le haut de
|
|
1366
|
+
Le composant <i>haut de page</i> est la flèche qui permet à l'utilisateur de remonter vers le haut de
|
|
1367
|
+
page. Il s'affiche quand l'utilisateur commence à défiler vers le haut.
|
|
1289
1368
|
Il disparaît quand l'utilisateur commence à défiler vers le bas.
|
|
1290
1369
|
</p>
|
|
1291
1370
|
<h4>Exemple</h4>
|
|
1292
1371
|
<qc-doc-exemple caption="Présentation du composant retour en haut de page"
|
|
1293
1372
|
code-target-id="to-top-exemple"
|
|
1294
|
-
|
|
1295
|
-
<qc-to-top demo="true"
|
|
1373
|
+
>
|
|
1374
|
+
<qc-to-top demo="true"/>
|
|
1296
1375
|
</qc-doc-exemple>
|
|
1297
1376
|
<div id="to-top-exemple">
|
|
1298
1377
|
<qc-to-top></qc-to-top>
|
|
@@ -1302,16 +1381,16 @@
|
|
|
1302
1381
|
|
|
1303
1382
|
<h4>Attributs</h4>
|
|
1304
1383
|
<div class="table-overflow">
|
|
1305
|
-
|
|
1306
|
-
|
|
1384
|
+
<table class="qc-table qc-striped">
|
|
1385
|
+
<thead>
|
|
1307
1386
|
<tr>
|
|
1308
1387
|
<th>Nom</th>
|
|
1309
1388
|
<th>Valeur attendue</th>
|
|
1310
1389
|
<th>Valeur par défaut</th>
|
|
1311
1390
|
<th>Description</th>
|
|
1312
1391
|
</tr>
|
|
1313
|
-
|
|
1314
|
-
|
|
1392
|
+
</thead>
|
|
1393
|
+
<tbody>
|
|
1315
1394
|
<tr>
|
|
1316
1395
|
<td>text</td>
|
|
1317
1396
|
<td>Texte</td>
|
|
@@ -1324,8 +1403,8 @@
|
|
|
1324
1403
|
<td>false</td>
|
|
1325
1404
|
<td>Pour utiliser le composant en démonstration uniquement.</td>
|
|
1326
1405
|
</tr>
|
|
1327
|
-
|
|
1328
|
-
|
|
1406
|
+
</tbody>
|
|
1407
|
+
</table>
|
|
1329
1408
|
</div>
|
|
1330
1409
|
</div>
|
|
1331
1410
|
</main>
|
|
@@ -1333,5 +1412,5 @@
|
|
|
1333
1412
|
<qc-piv-footer></qc-piv-footer>
|
|
1334
1413
|
</footer>
|
|
1335
1414
|
<script src='js/qc-doc-exemple.js'></script>
|
|
1336
|
-
</body>
|
|
1337
|
-
</html>
|
|
1415
|
+
</body>
|
|
1416
|
+
</html>
|