qc-trousse-sdg 1.2.5-dev → 1.3.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 +18 -3
- package/dist/css/qc-sdg-design-tokens.min.css +1 -1
- package/dist/css/qc-sdg-no-grid.min.css +1 -1
- package/dist/css/qc-sdg.min.css +1 -1
- package/dist/img/QUEBEC_blanc.svg +1 -1
- package/dist/img/QUEBEC_couleur.svg +24 -0
- package/dist/js/qc-sdg.min.js +1 -1
- package/package.json +23 -18
- package/public/css/qc-doc-sdg.css +247 -335
- package/public/css/qc-sdg-design-tokens.css +111 -64
- package/public/css/qc-sdg-no-grid.css +932 -428
- package/public/css/qc-sdg.css +941 -609
- package/public/img/QUEBEC_blanc.svg +1 -1
- package/public/img/QUEBEC_couleur.svg +24 -0
- package/public/img/ampoule.svg +1 -0
- package/public/img/note.svg +1 -0
- package/public/img/piv-MCE-theme-clair.svg +79 -0
- package/public/img/piv-MCE-theme-sombre.svg +62 -0
- package/public/img/piv-bas-MCE-theme-clair.png +0 -0
- package/public/img/piv-bas-MCE-theme-sombre.png +0 -0
- package/public/img/piv-logo-pied-de-page.svg +37 -0
- package/public/index.html +871 -715
- package/public/js/qc-doc-exemple.js +9 -0
- package/public/js/qc-doc-sdg.js +6893 -3724
- package/public/js/qc-sdg.js +2103 -962
- package/rollup.config.js +58 -23
- package/src/doc/components/Code.svelte +69 -0
- package/src/doc/components/Exemple.svelte +71 -0
- package/src/doc/components/Switch.svelte +108 -0
- package/src/doc/components/TopNav.svelte +53 -0
- package/src/doc/components/color-doc.svelte +44 -0
- package/src/doc/qc-doc-sdg.js +25 -14
- package/src/doc/scss/_tables.scss +1 -2
- package/src/doc/scss/components/_button.scss +14 -14
- package/src/doc/scss/components/_code.scss +106 -4
- package/src/doc/scss/jQueryUI/_jquery-ui.autocomplete.scss +48 -0
- package/src/doc/scss/qc-doc-sdg.scss +76 -75
- package/src/sdg/components/Button/IconButton.svelte +29 -0
- package/src/sdg/components/Icon.svelte +39 -0
- package/src/sdg/components/{pivHeader.svelte → PivHeader/pivHeader.svelte} +49 -69
- package/src/sdg/components/SearchBar/searchBar.svelte +87 -0
- package/src/sdg/components/SearchInput/SearchInput.svelte +48 -0
- package/src/sdg/components/alert.svelte +40 -23
- package/src/sdg/components/componentWrapper.js +0 -3
- package/src/sdg/components/externalLink.svelte +92 -0
- package/src/sdg/components/notice.svelte +61 -34
- package/src/sdg/components/pivFooter.svelte +37 -36
- package/src/sdg/components/toTop.svelte +16 -10
- package/src/sdg/components/utils.js +28 -4
- package/src/sdg/qc-sdg.js +11 -3
- package/src/sdg/scss/_qc-sdg-lib.scss +3 -0
- package/src/sdg/scss/base/_accessibility.scss +4 -0
- package/src/sdg/scss/base/_colors.scss +10 -10
- package/src/sdg/scss/base/_figure.scss +14 -9
- package/src/sdg/scss/base/_fonts.scss +4 -4
- package/src/sdg/scss/base/_form.scss +7 -0
- package/src/sdg/scss/base/_layout.scss +45 -0
- package/src/sdg/scss/base/_lists.scss +5 -5
- package/src/sdg/scss/base/_shadings.scss +3 -11
- package/src/sdg/scss/base/_typography.scss +42 -25
- package/src/sdg/scss/components/_alert.scss +11 -34
- package/src/sdg/scss/components/_icons.scss +67 -38
- package/src/sdg/scss/components/_notice.scss +51 -44
- package/src/sdg/scss/components/_pivFooter.scss +35 -23
- package/src/sdg/scss/components/_pivHeader.scss +131 -154
- package/src/sdg/scss/components/_searchBar.scss +75 -0
- package/src/sdg/scss/components/_searchInput.scss +64 -0
- package/src/sdg/scss/components/_separator.scss +2 -5
- package/src/sdg/scss/components/_toTop.scss +4 -6
- package/src/sdg/scss/grid/_grid-lib.scss +516 -0
- package/src/sdg/scss/grid/_grid.scss +78 -0
- package/src/sdg/scss/lib/_functions.scss +78 -0
- package/src/sdg/scss/lib/_gridless-lib.scss +4 -0
- package/src/sdg/scss/lib/_mixins.scss +221 -0
- package/src/sdg/scss/qc-design-tokens.scss +31 -8
- package/src/sdg/scss/qc-sdg-utilities.scss +1 -0
- package/src/sdg/scss/qc-sdg.scss +1 -1
- package/src/sdg/scss/qc-sgd-no-grid.scss +20 -15
- package/src/sdg/scss/settings/_base.scss +58 -0
- package/src/sdg/scss/settings/_tokens.scss +145 -77
- package/src/sdg/scss/utilities/_display.scss +43 -3
- package/src/sdg/scss/utilities/_themes.scss +17 -0
- package/src/sdg/scss/vendor/modern-css-reset/src/reset.css +9 -8
- package/dist/img/logo-quebec-piv-footer.svg +0 -1
- package/dist/img/quebec-logo.svg +0 -13
- package/public/img/logo-quebec-piv-footer.svg +0 -1
- package/src/doc/components/code.svelte +0 -54
- package/src/sdg/scss/base/_grid.scss +0 -9
- package/src/sdg/scss/functions/_tokens.scss +0 -12
- package/src/sdg/scss/functions/_utils.scss +0 -44
- package/src/sdg/scss/modules/_grid.scss +0 -19
- package/src/sdg/scss/modules/_helpers.scss +0 -32
- package/src/sdg/scss/modules/_map.scss +0 -14
- package/src/sdg/scss/modules/_tokens.scss +0 -3
- package/src/sdg/scss/modules/_utils.scss +0 -55
- package/src/sdg/scss/settings/_grid.scss +0 -24
- package/src/sdg/scss/settings/_settings.scss +0 -12
package/public/index.html
CHANGED
|
@@ -25,316 +25,269 @@
|
|
|
25
25
|
title-text="Trousse de développement du Système de design gouvernemental"
|
|
26
26
|
alt-logo="Signature du gouvernement du Québec. Accédez au Système de design gouvernemental.">
|
|
27
27
|
</qc-piv-header>
|
|
28
|
-
|
|
29
|
-
<div class="qc-container">
|
|
30
|
-
<h1>
|
|
31
|
-
<span class="qc-subhead"id="version"></span>
|
|
32
|
-
Documentation technique
|
|
33
|
-
</h1>
|
|
34
|
-
<div class="main-menu">
|
|
35
|
-
<p class="qc-h4">Bases</p>
|
|
36
|
-
<ul>
|
|
37
|
-
<li><a href='#couleurs'>Couleurs</a></li>
|
|
38
|
-
<li><a href='#grille'>Grille horizontale</a></li>
|
|
39
|
-
<li><a href='#images'>Images</a></li>
|
|
40
|
-
<li><a href='#liens'>Liens</a></li>
|
|
41
|
-
<li><a href='#liste'>Liste</a></li>
|
|
42
|
-
<li><a href='#titre'>Niveaux de titres</a></li>
|
|
43
|
-
<li><a href='#ombrages'>Ombrages</a></li>
|
|
44
|
-
<li><a href='#paragraphes'>Paragraphes</a></li>
|
|
45
|
-
<li><a href='#polices'>Polices de caractères</a></li>
|
|
46
|
-
</ul>
|
|
47
|
-
<p class="qc-h4">Composants</p>
|
|
48
|
-
<ul>
|
|
49
|
-
<li><a href='#separator'>Séparateur</a></li>
|
|
50
|
-
<li><a href='#alert'>Alerte générale</a></li>
|
|
51
|
-
<li><a href='#notice'>Avis</a></li>
|
|
52
|
-
<li><a href='#piv'>Composants du PIV</a>
|
|
53
|
-
<ul>
|
|
54
|
-
<li><a href='#piv-header'>Bandeau d'en-tête du PIV</a>
|
|
55
|
-
<li><a href='#piv-footer'>Pied de page du PIV</a>
|
|
56
|
-
</ul>
|
|
57
|
-
</li>
|
|
58
|
-
<li><a href="#toTop">Haut de page</a></li>
|
|
59
|
-
|
|
60
|
-
</ul>
|
|
61
|
-
</div>
|
|
62
|
-
</div>
|
|
63
28
|
</header>
|
|
29
|
+
<qc-doc-top-nav></qc-doc-top-nav>
|
|
30
|
+
<div class="qc-container">
|
|
31
|
+
<h1>
|
|
32
|
+
<span class="qc-subhead"id="version"></span>
|
|
33
|
+
Documentation technique
|
|
34
|
+
</h1>
|
|
35
|
+
<nav class="main-menu"_
|
|
36
|
+
aria-label="Navigation principale">
|
|
37
|
+
<h2 class="qc-h4">Bases</h2>
|
|
38
|
+
<ul>
|
|
39
|
+
<li><a href='#couleurs'>Couleurs</a></li>
|
|
40
|
+
<li><a href='#grille'>Grille horizontale</a></li>
|
|
41
|
+
<li><a href='#figures'>Figures</a></li>
|
|
42
|
+
<li><a href='#liens'>Liens</a></li>
|
|
43
|
+
<li><a href='#liste'>Liste</a></li>
|
|
44
|
+
<li><a href='#titre'>Niveaux de titres</a></li>
|
|
45
|
+
<li><a href='#ombrages'>Ombrages</a></li>
|
|
46
|
+
<li><a href='#paragraphes'>Paragraphes</a></li>
|
|
47
|
+
<li><a href='#polices'>Polices de caractères</a></li>
|
|
48
|
+
<li><a href='#separator'>Séparateur</a></li>
|
|
49
|
+
</ul>
|
|
50
|
+
<h2 class="qc-h4">Composants</h2>
|
|
51
|
+
<ul>
|
|
52
|
+
<li><a href='#alert'>Alerte générale</a></li>
|
|
53
|
+
<li><a href='#notice'>Avis</a></li>
|
|
54
|
+
<li><a href='#search-bar'>Barre de recherche</a></li>
|
|
55
|
+
<li><a href='#piv'>Composants du PIV</a>
|
|
56
|
+
<ul>
|
|
57
|
+
<li><a href='#piv-header'>Bandeau d'en-tête du PIV</a>
|
|
58
|
+
<li><a href='#piv-footer'>Pied de page du PIV</a>
|
|
59
|
+
</ul>
|
|
60
|
+
</li>
|
|
61
|
+
<li><a href="#toTop">Haut de page</a></li>
|
|
64
62
|
|
|
63
|
+
</ul>
|
|
64
|
+
</nav>
|
|
65
|
+
</div>
|
|
65
66
|
<main id="main">
|
|
66
67
|
<div class="qc-container">
|
|
67
68
|
<hr/>
|
|
68
69
|
<!-- couleurs -->
|
|
69
70
|
<h2 id="couleurs">Couleurs</h2>
|
|
71
|
+
|
|
72
|
+
<h3>Couleurs d’arrière-plan</h3>
|
|
73
|
+
|
|
74
|
+
<qc-color-doc token="white"
|
|
75
|
+
title="Blanc"
|
|
76
|
+
border="true"
|
|
77
|
+
></qc-color-doc>
|
|
78
|
+
|
|
79
|
+
|
|
80
|
+
<h3>Couleur du texte</h3>
|
|
81
|
+
|
|
82
|
+
<qc-color-doc token="text-primary"
|
|
83
|
+
title="Bleu foncé"
|
|
84
|
+
>
|
|
85
|
+
</qc-color-doc>
|
|
86
|
+
|
|
70
87
|
<h3>Couleurs principales</h3>
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
<
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
<
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
</div>
|
|
98
|
-
</div>
|
|
99
|
-
<div class="color-details">
|
|
100
|
-
<div class="color-sample qc-bg-color-blue-medium"></div>
|
|
101
|
-
<div class="color-description">
|
|
102
|
-
<strong>Bleu moyen</strong><br/>
|
|
103
|
-
<code >--qc-color-blue-medium</code>
|
|
104
|
-
</div>
|
|
105
|
-
</div>
|
|
106
|
-
<div class="color-details">
|
|
107
|
-
<div class="color-sample qc-bg-color-blue-dark"></div>
|
|
108
|
-
<div class="color-description">
|
|
109
|
-
<strong>Bleu foncé</strong><br/>
|
|
110
|
-
<code >--qc-color-blue-dark, --qc-color-text-primary</code>
|
|
111
|
-
</div>
|
|
112
|
-
</div>
|
|
88
|
+
|
|
89
|
+
<qc-color-doc token="blue-pale"
|
|
90
|
+
title="Bleu pale"
|
|
91
|
+
></qc-color-doc>
|
|
92
|
+
|
|
93
|
+
<qc-color-doc token="blue-light"
|
|
94
|
+
title="Bleu clair"
|
|
95
|
+
></qc-color-doc>
|
|
96
|
+
<qc-color-doc token="blue-regular"
|
|
97
|
+
title="Bleu"
|
|
98
|
+
></qc-color-doc>
|
|
99
|
+
<qc-color-doc token="blue-piv"
|
|
100
|
+
title="Bleu PIV"
|
|
101
|
+
></qc-color-doc>
|
|
102
|
+
<qc-color-doc token="blue-medium"
|
|
103
|
+
title="Bleu moyen"
|
|
104
|
+
></qc-color-doc>
|
|
105
|
+
<qc-color-doc token="blue-dark"
|
|
106
|
+
title="Bleu foncé"
|
|
107
|
+
></qc-color-doc>
|
|
108
|
+
|
|
109
|
+
<h3>Couleur d’accent</h3>
|
|
110
|
+
|
|
111
|
+
<qc-color-doc token="accent"
|
|
112
|
+
title="Rose"
|
|
113
|
+
></qc-color-doc>
|
|
113
114
|
|
|
114
115
|
<h3>Niveaux de gris</h3>
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
<
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
<strong>Gris</strong><br/>
|
|
133
|
-
<code >--qc-color-grey-regular</code>
|
|
134
|
-
</div>
|
|
135
|
-
</div>
|
|
136
|
-
<div class="color-details">
|
|
137
|
-
<div class="color-sample qc-bg-color-grey-medium"></div>
|
|
138
|
-
<div class="color-description">
|
|
139
|
-
<strong>Gris moyen</strong><br/>
|
|
140
|
-
<code >--qc-color-grey-medium</code>
|
|
141
|
-
</div>
|
|
142
|
-
</div>
|
|
143
|
-
<div class="color-details">
|
|
144
|
-
<div class="color-sample qc-bg-color-grey-dark"></div>
|
|
145
|
-
<div class="color-description">
|
|
146
|
-
<strong>Gris foncé</strong><br/>
|
|
147
|
-
<code >--qc-color-grey-dark</code>
|
|
148
|
-
</div>
|
|
149
|
-
</div>
|
|
116
|
+
|
|
117
|
+
<qc-color-doc token="grey-pale"
|
|
118
|
+
title="Gris pale"
|
|
119
|
+
></qc-color-doc>
|
|
120
|
+
|
|
121
|
+
<qc-color-doc token="grey-light"
|
|
122
|
+
title="Gris clair"
|
|
123
|
+
></qc-color-doc>
|
|
124
|
+
<qc-color-doc token="grey-regular"
|
|
125
|
+
title="Gris"
|
|
126
|
+
></qc-color-doc>
|
|
127
|
+
<qc-color-doc token="grey-medium"
|
|
128
|
+
title="Gris moyen"
|
|
129
|
+
></qc-color-doc>
|
|
130
|
+
<qc-color-doc token="grey-dark"
|
|
131
|
+
title="Gris foncé"
|
|
132
|
+
></qc-color-doc>
|
|
150
133
|
|
|
151
134
|
<h3>Couleurs fonctionnelles</h3>
|
|
135
|
+
|
|
152
136
|
<h4>Rouges</h4>
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
<
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
<div class="color-details">
|
|
168
|
-
<div class="color-sample qc-bg-color-red-regular"></div>
|
|
169
|
-
<div class="color-description">
|
|
170
|
-
<strong>Rouge</strong><br/>
|
|
171
|
-
<code >--qc-color-red-regular, --qc-color-error</code>
|
|
172
|
-
</div>
|
|
173
|
-
</div>
|
|
174
|
-
<div class="color-details">
|
|
175
|
-
<div class="color-sample qc-bg-color-red-dark"></div>
|
|
176
|
-
<div class="color-description">
|
|
177
|
-
<strong>Rouge foncé</strong><br/>
|
|
178
|
-
<code >--qc-color-red-dark, --qc-color-danger</code>
|
|
179
|
-
</div>
|
|
180
|
-
</div>
|
|
137
|
+
|
|
138
|
+
<qc-color-doc token="pink-pale"
|
|
139
|
+
title="Rose pâle"
|
|
140
|
+
></qc-color-doc>
|
|
141
|
+
<qc-color-doc token="pink-regular"
|
|
142
|
+
title="Rose"
|
|
143
|
+
></qc-color-doc>
|
|
144
|
+
<qc-color-doc token="red-regular"
|
|
145
|
+
title="Rouge"
|
|
146
|
+
></qc-color-doc>
|
|
147
|
+
<qc-color-doc token="red-dark"
|
|
148
|
+
title="Rouge foncé"
|
|
149
|
+
></qc-color-doc>
|
|
150
|
+
|
|
181
151
|
<h4>Verts</h4>
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
<
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
<strong>Vert</strong><br/>
|
|
193
|
-
<code >--qc-color-green-regular, --qc-color-success</code>
|
|
194
|
-
</div>
|
|
195
|
-
</div>
|
|
196
|
-
<div class="color-details">
|
|
197
|
-
<div class="color-sample qc-bg-color-green-dark"></div>
|
|
198
|
-
<div class="color-description">
|
|
199
|
-
<strong>Vert foncé</strong><br/>
|
|
200
|
-
<code >--qc-color-green-dark</code>
|
|
201
|
-
</div>
|
|
202
|
-
</div>
|
|
152
|
+
|
|
153
|
+
<qc-color-doc token="green-pale"
|
|
154
|
+
title="Vert pâle"
|
|
155
|
+
></qc-color-doc>
|
|
156
|
+
<qc-color-doc token="green-regular"
|
|
157
|
+
title="Vert"
|
|
158
|
+
></qc-color-doc>
|
|
159
|
+
<qc-color-doc token="green-dark"
|
|
160
|
+
title="Vert foncé"
|
|
161
|
+
></qc-color-doc>
|
|
203
162
|
|
|
204
163
|
<h4>Jaunes</h4>
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
<
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
<code >--qc-color-yellow-regular</code>
|
|
217
|
-
</div>
|
|
218
|
-
</div>
|
|
219
|
-
<div class="color-details">
|
|
220
|
-
<div class="color-sample qc-bg-color-yellow-dark"></div>
|
|
221
|
-
<div class="color-description">
|
|
222
|
-
<strong>Jaune foncé</strong><br/>
|
|
223
|
-
<code>--qc-color-yellow-dark</code>
|
|
224
|
-
</div>
|
|
225
|
-
</div>
|
|
164
|
+
|
|
165
|
+
<qc-color-doc token="yellow-pale"
|
|
166
|
+
title="Jaune pâle"
|
|
167
|
+
></qc-color-doc>
|
|
168
|
+
<qc-color-doc token="yellow-regular"
|
|
169
|
+
title="Jaune"
|
|
170
|
+
></qc-color-doc>
|
|
171
|
+
<qc-color-doc token="yellow-dark"
|
|
172
|
+
title="Jaune foncé"
|
|
173
|
+
></qc-color-doc>
|
|
174
|
+
|
|
226
175
|
<h4>Violet</h4>
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
<code >--qc-color-purple, --qc-color-link-visited</code>
|
|
232
|
-
</div>
|
|
233
|
-
</div>
|
|
176
|
+
|
|
177
|
+
<qc-color-doc token="purple"
|
|
178
|
+
title="Violet"
|
|
179
|
+
></qc-color-doc>
|
|
234
180
|
|
|
235
181
|
<hr />
|
|
236
182
|
|
|
237
183
|
<!-- grille horizontale -->
|
|
238
184
|
<h2 id="grille">Grille horizontale</h2>
|
|
239
|
-
<
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
185
|
+
<qc-doc-exemple caption="Présentation de la grille sur 12 colonnes"
|
|
186
|
+
code-target-id="exemple-grille"
|
|
187
|
+
>
|
|
188
|
+
<div id="grid-samples">
|
|
189
|
+
<div id="background">
|
|
190
|
+
<div class="qc-row">
|
|
191
|
+
<div class="qc-col-1">
|
|
192
|
+
<div></div>
|
|
193
|
+
</div>
|
|
194
|
+
<div class="qc-col-1">
|
|
195
|
+
<div></div>
|
|
196
|
+
</div>
|
|
197
|
+
<div class="qc-col-1">
|
|
198
|
+
<div></div>
|
|
199
|
+
</div>
|
|
200
|
+
<div class="qc-col-1">
|
|
201
|
+
<div></div>
|
|
202
|
+
</div>
|
|
203
|
+
<div class="qc-col-1">
|
|
204
|
+
<div></div>
|
|
205
|
+
</div>
|
|
206
|
+
<div class="qc-col-1">
|
|
207
|
+
<div></div>
|
|
208
|
+
</div>
|
|
209
|
+
<div class="qc-col-1">
|
|
210
|
+
<div></div>
|
|
211
|
+
</div>
|
|
212
|
+
<div class="qc-col-1">
|
|
213
|
+
<div></div>
|
|
214
|
+
</div>
|
|
215
|
+
<div class="qc-col-1">
|
|
216
|
+
<div></div>
|
|
217
|
+
</div>
|
|
218
|
+
<div class="qc-col-1">
|
|
219
|
+
<div></div>
|
|
220
|
+
</div>
|
|
221
|
+
<div class="qc-col-1">
|
|
222
|
+
<div></div>
|
|
223
|
+
</div>
|
|
224
|
+
<div class="qc-col-1">
|
|
225
|
+
<div></div>
|
|
226
|
+
</div>
|
|
265
227
|
</div>
|
|
266
|
-
|
|
267
|
-
|
|
228
|
+
</div>
|
|
229
|
+
<div id="exemple-grille">
|
|
230
|
+
<div class="qc-row">
|
|
231
|
+
<div class="qc-col-12">
|
|
232
|
+
<div>12</div>
|
|
233
|
+
</div>
|
|
268
234
|
</div>
|
|
269
|
-
<div class="qc-
|
|
270
|
-
<div
|
|
235
|
+
<div class="qc-row">
|
|
236
|
+
<div class=" qc-col-md-6">
|
|
237
|
+
<div>6</div>
|
|
238
|
+
</div>
|
|
239
|
+
<div class="qc-col-md-6">
|
|
240
|
+
<div>6</div>
|
|
241
|
+
</div>
|
|
271
242
|
</div>
|
|
272
|
-
<div class="qc-
|
|
273
|
-
<div
|
|
243
|
+
<div class="qc-row">
|
|
244
|
+
<div class=" qc-col-md-4">
|
|
245
|
+
<div>4</div>
|
|
246
|
+
</div>
|
|
247
|
+
<div class=" qc-col-md-4">
|
|
248
|
+
<div>4</div>
|
|
249
|
+
</div>
|
|
250
|
+
<div class=" qc-col-md-4">
|
|
251
|
+
<div>4</div>
|
|
252
|
+
</div>
|
|
274
253
|
</div>
|
|
275
|
-
|
|
276
|
-
|
|
254
|
+
|
|
255
|
+
<div class="qc-row">
|
|
256
|
+
<div class="qc-col-3">
|
|
257
|
+
<div>3</div>
|
|
258
|
+
</div>
|
|
259
|
+
<div class="qc-col-3">
|
|
260
|
+
<div>3</div>
|
|
261
|
+
</div>
|
|
262
|
+
<div class="qc-col-3">
|
|
263
|
+
<div>3</div>
|
|
264
|
+
</div>
|
|
265
|
+
<div class="qc-col-3">
|
|
266
|
+
<div>3</div>
|
|
267
|
+
</div>
|
|
277
268
|
</div>
|
|
278
|
-
</div>
|
|
279
|
-
</div>
|
|
280
|
-
<div class="qc-row">
|
|
281
|
-
<div class="qc-col-12">
|
|
282
|
-
<div>12</div>
|
|
283
|
-
</div>
|
|
284
|
-
</div>
|
|
285
|
-
<div class="qc-row">
|
|
286
|
-
<div class=" qc-col-md-6">
|
|
287
|
-
<div>6</div>
|
|
288
|
-
</div>
|
|
289
|
-
<div class=" qc-col-md-6">
|
|
290
|
-
<div>6</div>
|
|
291
|
-
</div>
|
|
292
|
-
</div>
|
|
293
|
-
<div class="qc-row">
|
|
294
|
-
<div class=" qc-col-md-4">
|
|
295
|
-
<div>4</div>
|
|
296
|
-
</div>
|
|
297
|
-
<div class=" qc-col-md-4">
|
|
298
|
-
<div>4</div>
|
|
299
|
-
</div>
|
|
300
|
-
<div class=" qc-col-md-4">
|
|
301
|
-
<div>4</div>
|
|
302
|
-
</div>
|
|
303
|
-
</div>
|
|
304
269
|
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
<div>3</div>
|
|
314
|
-
</div>
|
|
315
|
-
<div class="qc-col-3">
|
|
316
|
-
<div>3</div>
|
|
317
|
-
</div>
|
|
318
|
-
</div>
|
|
270
|
+
<div class="qc-row">
|
|
271
|
+
<div class="qc-col-md-9 ">
|
|
272
|
+
<div>9</div>
|
|
273
|
+
</div>
|
|
274
|
+
<div class="qc-col-md-3 ">
|
|
275
|
+
<div>3</div>
|
|
276
|
+
</div>
|
|
277
|
+
</div>
|
|
319
278
|
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
279
|
+
<div class="qc-row">
|
|
280
|
+
<div class="qc-col-md-3 ">
|
|
281
|
+
<div>3</div>
|
|
282
|
+
</div>
|
|
283
|
+
<div class="qc-col-md-9 ">
|
|
284
|
+
<div>9</div>
|
|
285
|
+
</div>
|
|
286
|
+
</div>
|
|
326
287
|
</div>
|
|
327
|
-
</div>
|
|
328
288
|
|
|
329
|
-
<div class="qc-row">
|
|
330
|
-
<div class="qc-col-md-3 ">
|
|
331
|
-
<div>3</div>
|
|
332
|
-
</div>
|
|
333
|
-
<div class="qc-col-md-9 ">
|
|
334
|
-
<div>9</div>
|
|
335
|
-
</div>
|
|
336
289
|
</div>
|
|
337
|
-
</
|
|
290
|
+
</qc-doc-exemple>
|
|
338
291
|
<p>
|
|
339
292
|
<strong>Points de rupture</strong><br/>
|
|
340
293
|
<code >--qc-breakpoint-sm<br>
|
|
@@ -350,210 +303,240 @@
|
|
|
350
303
|
<hr />
|
|
351
304
|
|
|
352
305
|
<!-- images -->
|
|
353
|
-
<h2 id="
|
|
354
|
-
<
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
306
|
+
<h2 id="figures">Figures</h2>
|
|
307
|
+
<p>Les figures servent en général pour l’affichage des images.</p>
|
|
308
|
+
<qc-doc-exemple id="exemple-figure"
|
|
309
|
+
caption="Exemple d’affichage d’une image"
|
|
310
|
+
>
|
|
311
|
+
<figure >
|
|
312
|
+
<img src="img/figure-sample.png"
|
|
313
|
+
alt="Image avec légende">
|
|
314
|
+
<figcaption>
|
|
315
|
+
<p>La légende de l'image <br>
|
|
316
|
+
<em>La source de l'image</em>
|
|
317
|
+
</p>
|
|
318
|
+
</figcaption>
|
|
319
|
+
</figure>
|
|
320
|
+
</qc-doc-exemple>
|
|
321
|
+
<!-- <qc-code target-id="exemple-figure"></qc-code>-->
|
|
363
322
|
|
|
364
323
|
<hr />
|
|
365
324
|
|
|
366
325
|
<!-- liens -->
|
|
367
326
|
<h2 id="liens">Liens</h2>
|
|
368
|
-
<
|
|
369
|
-
|
|
327
|
+
<qc-doc-exemple caption="Exemple de différents liens hypertexte selon leurs états.">
|
|
328
|
+
<dl>
|
|
329
|
+
<dt>Lien interne</dt>
|
|
330
|
+
<dd><a href="javascript:;" class="not-visited">Lien interne</a></dd>
|
|
331
|
+
<dd><qc-external-link><a href="javascript:;" class="not-visited">Lien externe</a></qc-external-link></dd>
|
|
332
|
+
|
|
333
|
+
<dt>Lien au survol (pseudo-classe :hover)</dt>
|
|
334
|
+
<dd><a href="javascript:;" class="pseudo-hover">Lien interne</a></dd>
|
|
335
|
+
<dd><qc-external-link><a href="javascript:;" class="pseudo-hover">Lien externe</a></qc-external-link></dd>
|
|
336
|
+
<dt>Lien au focus (pseudo-classe :focus)</dt>
|
|
337
|
+
<dd><a href="javascript:;" class="pseudo-focus">Lien interne</a></dd>
|
|
338
|
+
<dd><qc-external-link><a href="javascript:;" class="pseudo-focus">Lien externe</a></qc-external-link></dd>
|
|
339
|
+
<dt>Lien au clic (pseudo-classe :active)</dt>
|
|
340
|
+
<dd><a href="javascript:;" class="pseudo-active">Lien interne</a></dd>
|
|
341
|
+
<dd><qc-external-link><a href="javascript:;" class="pseudo-active">Lien externe</a></qc-external-link></dd>
|
|
342
|
+
<dt>Lien visité (pseudo-classe :visited)</dt>
|
|
343
|
+
<dd><a href="javascript:;" class="pseudo-visited">Lien interne</a></dd>
|
|
344
|
+
<dd><qc-external-link><a href="javascript:;" class="pseudo-visited">Lien externe</a></qc-external-link></dd>
|
|
345
|
+
</dl>
|
|
346
|
+
</qc-doc-exemple>
|
|
347
|
+
|
|
348
|
+
|
|
349
|
+
<h3>Lien externe (qc-external-link)</h3>
|
|
350
|
+
|
|
351
|
+
<p>Le composant <code>qc-external-link</code> ajoute une icône à la fin du lien, séparée du dernier mot par une espace insécable.</p>
|
|
352
|
+
<p>NB : le composant <code>qc-external-link</code> est ouvert, c-à-d. qu'il ne contient pas de DOM d'ombre (<i>shadow DOM</i>).</p>
|
|
370
353
|
|
|
371
|
-
|
|
372
|
-
</p>
|
|
373
|
-
<p>
|
|
374
|
-
<strong>Couleur</strong><br/>
|
|
375
|
-
<code >--qc-link-text</code>
|
|
376
|
-
</p>
|
|
377
|
-
<h3>Lien au survol ou au focus</h3>
|
|
378
|
-
<p>
|
|
379
|
-
<a href="javascript:;" class="pseudo-hover">Règlement de pêche dans la zone 21.</a>
|
|
380
|
-
</p>
|
|
381
|
-
<p>
|
|
382
|
-
<strong>Couleur</strong><br/>
|
|
383
|
-
<code >--qc-link-hover</code>
|
|
384
|
-
</p>
|
|
385
|
-
<h3>Lien actif</h3>
|
|
386
|
-
<p>
|
|
387
|
-
<a href="javascript:;" class="pseudo-active">Règlement de pêche dans la zone 21.</a>
|
|
388
|
-
</p>
|
|
389
|
-
<p>
|
|
390
|
-
<strong>Couleur</strong><br/>
|
|
391
|
-
<code >--qc-link-active</code>
|
|
392
|
-
</p>
|
|
393
|
-
<h3>Lien externe</h3>
|
|
394
|
-
<p>
|
|
395
|
-
<a href="javascript:;" class="not-visited">Un long lien - réduire la taille de l’écran pour constater l’espace insécable devant l’icone de lien
|
|
396
|
-
<span class="qc-external-link-tail">externe.
|
|
397
|
-
<!-- no src needed -->
|
|
398
|
-
<img alt="Cet hyperlien s’ouvrira dans une autre fenêtre">
|
|
399
|
-
</span></a>
|
|
400
|
-
</p>
|
|
401
|
-
<h3>Lien visité</h3>
|
|
402
|
-
<p>
|
|
403
|
-
<a href="javascript:;" class="visited">Règlement de pêche dans la zone 21.</a>
|
|
404
|
-
</p>
|
|
405
|
-
<p>
|
|
406
|
-
<strong>Couleur</strong><br/>
|
|
407
|
-
<code >--qc-link-visited</code>
|
|
408
|
-
</p>
|
|
354
|
+
<h4>Exemples</h4>
|
|
409
355
|
|
|
356
|
+
<qc-doc-exemple 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
|
+
<p class="qc-font-size-xl">
|
|
358
|
+
Lorem ipsum <qc-external-link><a href="http://www.external.domain.com/">Lorem ipsum dolor sit amet, consectetur adipiscing</a></qc-external-link> elit
|
|
359
|
+
</p>
|
|
360
|
+
<p class="qc-font-size-lg">
|
|
361
|
+
Lorem ipsum <qc-external-link><a href="http://www.external.domain.com/">Lorem ipsum dolor sit amet, consectetur adipiscing</a></qc-external-link> elit
|
|
362
|
+
</p>
|
|
363
|
+
<p class="qc-font-size-md">
|
|
364
|
+
Lorem ipsum <qc-external-link><a href="http://www.external.domain.com/">Lorem ipsum dolor sit amet, consectetur adipiscing</a></qc-external-link> elit
|
|
365
|
+
</p>
|
|
366
|
+
<p class="qc-font-size-sm">
|
|
367
|
+
Lorem ipsum <qc-external-link><a href="http://www.external.domain.com/">Lorem ipsum dolor sit amet, consectetur adipiscing</a></qc-external-link> elit
|
|
368
|
+
</p>
|
|
369
|
+
|
|
370
|
+
|
|
371
|
+
</qc-doc-exemple>
|
|
372
|
+
|
|
373
|
+
<h4>Attributs</h4>
|
|
374
|
+
<div class="table-overflow">
|
|
375
|
+
<table class="qc-table qc-striped component-attributes-description">
|
|
376
|
+
<thead>
|
|
377
|
+
<tr>
|
|
378
|
+
<th>Nom</th>
|
|
379
|
+
<th>Valeur attendue</th>
|
|
380
|
+
<th>Valeur par défaut</th>
|
|
381
|
+
<th>Description</th>
|
|
382
|
+
</tr>
|
|
383
|
+
</thead>
|
|
384
|
+
<tbody>
|
|
385
|
+
<tr>
|
|
386
|
+
<td>img-alt</td>
|
|
387
|
+
<td>Texte</td>
|
|
388
|
+
<td>
|
|
389
|
+
<dl>
|
|
390
|
+
<dt>Français</dt><dd>Ce lien dirige vers un autre site.</dd>
|
|
391
|
+
<dt>Anglais</dt><dd>This link directs to another site.</dd>
|
|
392
|
+
</dl>
|
|
393
|
+
</td>
|
|
394
|
+
<td>Texte alternatif de l’image du lien externe.</td>
|
|
395
|
+
</tr>
|
|
396
|
+
</tbody>
|
|
397
|
+
</table>
|
|
398
|
+
</div>
|
|
410
399
|
<hr />
|
|
411
400
|
|
|
412
401
|
<!-- liste -->
|
|
413
402
|
<h2 id="liste">Liste</h2>
|
|
414
|
-
<
|
|
415
|
-
|
|
416
|
-
<
|
|
417
|
-
|
|
418
|
-
<
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
403
|
+
<qc-doc-exemple caption="Exemple de liste simple">
|
|
404
|
+
<p>Lorem ipsum dolor sit amet
|
|
405
|
+
<ul>
|
|
406
|
+
<li>Élément de liste 1</li>
|
|
407
|
+
<li>Élément de liste 2</li>
|
|
408
|
+
<li>Élément de liste 3
|
|
409
|
+
<ul>
|
|
410
|
+
<li>Élément de liste 3.1</li>
|
|
411
|
+
<li>Élément de liste 3.2</li>
|
|
412
|
+
</ul>
|
|
413
|
+
</li>
|
|
414
|
+
<li>Élément de liste 4</li>
|
|
415
|
+
</ul>
|
|
416
|
+
</p>
|
|
417
|
+
|
|
418
|
+
<p>Lorem ipsum dolor sit amet</p>
|
|
419
|
+
</qc-doc-exemple>
|
|
420
|
+
|
|
421
|
+
<qc-doc-exemple caption="Exemple de liste simple de définition">
|
|
422
|
+
<dl>
|
|
423
|
+
<dt>Terme 1</dt>
|
|
424
|
+
<dd>Définition 1</dd>
|
|
425
|
+
<dt>Terme 2</dt>
|
|
426
|
+
<dd>Définition 2</dd>
|
|
427
|
+
</dl>
|
|
428
|
+
<p>Lorem ipsum dolor sit amet</p>
|
|
429
|
+
</qc-doc-exemple>
|
|
423
430
|
|
|
424
431
|
<hr />
|
|
425
432
|
|
|
426
433
|
<!-- niveaux de titres -->
|
|
427
434
|
<h2 id="titre">Niveaux de titres</h2>
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
<
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
<
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
<
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
<p class="qc-h4">Titre de niveau 4</p>
|
|
447
|
-
<p>
|
|
448
|
-
<strong>Taille de police/interlignage pour les h4</strong><br/>
|
|
449
|
-
<code >--qc-font-size-h4, --qc-line-height-h4</code>
|
|
450
|
-
</p>
|
|
451
|
-
<p class="qc-h5">Titre de niveau 5</p>
|
|
452
|
-
<p>
|
|
453
|
-
<strong>Taille de police/interlignage pour les h5</strong><br/>
|
|
454
|
-
<code >--qc-font-size-h5, --qc-line-height-h5</code>
|
|
455
|
-
</p>
|
|
456
|
-
<p class="qc-h6">Titre de niveau 6</p>
|
|
457
|
-
<p>
|
|
458
|
-
<strong>Taille de police/interlignage pour les h6</strong><br/>
|
|
459
|
-
<code >--qc-font-size-h6, --qc-line-height-h6</code>
|
|
460
|
-
</p>
|
|
435
|
+
<qc-doc-exemple caption="Exemples de titres"
|
|
436
|
+
code-target-id="liste-titres"
|
|
437
|
+
>
|
|
438
|
+
<div role="presentation"
|
|
439
|
+
id="liste-titres"
|
|
440
|
+
>
|
|
441
|
+
<h1 class="qc-h1">Titre de niveau 1</h1>
|
|
442
|
+
<h1 id="exemple-titre-h1"
|
|
443
|
+
class="qc-h1"><span class="qc-subhead ">Surtitre</span>Titre de niveau 1 avec surtitre
|
|
444
|
+
</h1>
|
|
445
|
+
<h2 class="qc-h2">Titre de niveau 2</h2>
|
|
446
|
+
<h3 class="qc-h3">Titre de niveau 3</h3>
|
|
447
|
+
<h4 class="qc-h4">Titre de niveau 4</h4>
|
|
448
|
+
<h5 class="qc-h5">Titre de niveau 5</h5>
|
|
449
|
+
<h6 class="qc-h6">Titre de niveau 6</h6>
|
|
450
|
+
</div>
|
|
451
|
+
</qc-doc-exemple>
|
|
461
452
|
|
|
462
|
-
<hr />
|
|
453
|
+
<hr />
|
|
463
454
|
|
|
464
455
|
<!-- ombrages -->
|
|
465
456
|
<h2 id="ombrages">Ombrages</h2>
|
|
466
|
-
<
|
|
467
|
-
<
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
<
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
</p>
|
|
479
|
-
<h3>Élévation 2</h3>
|
|
480
|
-
<p class="qc-shading-2 square-box">Élévation 2</p>
|
|
481
|
-
<p>
|
|
482
|
-
<strong>Ombre</strong><br/>
|
|
483
|
-
<code >--qc-box-shadow-2</code>
|
|
484
|
-
</p>
|
|
485
|
-
|
|
486
|
-
<h3>Élévation 3</h3>
|
|
487
|
-
<p class="qc-shading-3 square-box">Élévation 3</p>
|
|
488
|
-
<p>
|
|
489
|
-
<strong>Ombre</strong><br/>
|
|
490
|
-
<code >--qc-box-shadow-3</code>
|
|
491
|
-
</p>
|
|
492
|
-
|
|
493
|
-
<h3>Élévation 4</h3>
|
|
494
|
-
<p class="qc-shading-4 square-box">Élévation 4</p>
|
|
495
|
-
<p>
|
|
496
|
-
<strong>Ombre</strong><br/>
|
|
497
|
-
<code >--qc-box-shadow-4</code>
|
|
498
|
-
</p>
|
|
457
|
+
<p>Pour appliquer un ombrage sur un élément, il suffit de lui appliquer la classe <code>qc-shading-X</code>, X étant le niveau d’élévation. </p>
|
|
458
|
+
<qc-doc-exemple
|
|
459
|
+
caption="Exemple des différents niveaux d’élévation."
|
|
460
|
+
code-target-id="liste-elevation">
|
|
461
|
+
<div id="liste-elevation">
|
|
462
|
+
<div class="qc-shading-0">Élévation 0</div>
|
|
463
|
+
<div class="qc-shading-1">Élévation 1</div>
|
|
464
|
+
<div class="qc-shading-2">Élévation 2</div>
|
|
465
|
+
<div class="qc-shading-3">Élévation 3</div>
|
|
466
|
+
<div class="qc-shading-4">Élévation 4</div>
|
|
467
|
+
</div>
|
|
468
|
+
</qc-doc-exemple>
|
|
499
469
|
|
|
500
|
-
<hr />
|
|
470
|
+
<hr />
|
|
501
471
|
|
|
502
472
|
<!-- paragraphes -->
|
|
503
473
|
<h2 id="paragraphes">Paragraphes</h2>
|
|
504
|
-
<
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
<code >--qc-content-font-size-100, --qc-content-line-height-100</code>
|
|
509
|
-
</p>
|
|
510
|
-
<p>
|
|
511
|
-
<strong>Marge inférieure</strong><br/>
|
|
512
|
-
<code >--qc-spacer-md</code>
|
|
513
|
-
</p>
|
|
474
|
+
<qc-doc-exemple caption="Exemple de paragraphe">
|
|
475
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin iaculis sapien vitae tempor porttitor. Morbi tincidunt lorem et neque commodo varius. Suspendisse pretium risus sit amet nisi tempus, ut euismod ex euismod. Nulla eget ullamcorper justo. Quisque cursus eget ex eget cursus. Suspendisse potenti. Donec a risus viverra dolor sodales elementum. In lobortis ligula vitae libero pretium, vitae fermentum nulla varius. Sed felis libero, facilisis vitae turpis in, ullamcorper bibendum erat.</p>
|
|
476
|
+
<p>Aliquam rutrum sollicitudin lorem, vitae elementum tellus cursus ut. Vivamus in sodales risus. Maecenas neque ante, faucibus non lobortis et, auctor non sem. Integer nec hendrerit dolor. Mauris odio elit, viverra quis dolor sit amet, finibus auctor ex. Aliquam dapibus vestibulum metus a blandit. Etiam vitae augue id dui interdum viverra. In at metus nec augue accumsan iaculis. Suspendisse interdum, orci quis posuere ultrices, neque orci gravida diam, eu gravida nulla justo ac nisi. Nullam vitae sapien id augue imperdiet vehicula id et risus. Cras egestas aliquam magna eu aliquam. Sed aliquam semper est in imperdiet. Pellentesque non ultrices nibh. Nullam hendrerit dictum gravida. Aliquam vel arcu in odio dapibus malesuada.</p>
|
|
477
|
+
</qc-doc-exemple>
|
|
514
478
|
|
|
515
|
-
<hr />
|
|
479
|
+
<hr />
|
|
516
480
|
|
|
517
481
|
<!-- polices de caractères -->
|
|
518
482
|
<h2 id="polices">Polices de caractères</h2>
|
|
519
483
|
<div class="font-titles">
|
|
520
484
|
<h3><strong>Roboto</strong></h3>
|
|
521
|
-
<
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
<
|
|
525
|
-
|
|
485
|
+
<qc-doc-exemple id="font-roboto"
|
|
486
|
+
caption="Exemple de texte en roboto, avec différentes graisses."
|
|
487
|
+
>
|
|
488
|
+
<div style="font-family: var(--qc-font-family-header);">
|
|
489
|
+
<p style="font-weight:var(--qc-font-weight-header-regular);">
|
|
490
|
+
ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789,abcdefghijklmnopqrstuvwxyz0123456789<br>
|
|
491
|
+
<i>ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789,abcdefghijklmnopqrstuvwxyz0123456789</i>
|
|
492
|
+
</p>
|
|
493
|
+
<p style="font-weight:var(--qc-font-weight-header-medium);">
|
|
494
|
+
ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789,abcdefghijklmnopqrstuvwxyz0123456789<br>
|
|
495
|
+
<i>ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789,abcdefghijklmnopqrstuvwxyz0123456789</i>
|
|
496
|
+
</p>
|
|
497
|
+
<p style="font-weight:var(--qc-font-weight-header-bold);">
|
|
498
|
+
ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789,abcdefghijklmnopqrstuvwxyz0123456789<br>
|
|
499
|
+
<i>ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789,abcdefghijklmnopqrstuvwxyz0123456789</i>
|
|
500
|
+
</p>
|
|
501
|
+
</div>
|
|
502
|
+
</qc-doc-exemple>
|
|
503
|
+
<!-- <qc-code target-id="font-roboto"></qc-code>-->
|
|
526
504
|
</div>
|
|
527
505
|
<div>
|
|
528
506
|
<h3><strong>Open Sans</strong></h3>
|
|
529
|
-
<
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
<
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
507
|
+
<qc-doc-exemple id="font-open-sans"
|
|
508
|
+
caption="Exemple de texte en open sans, avec différentes graisses."
|
|
509
|
+
>
|
|
510
|
+
<div style="font-family: var(--qc-font-family-content);">
|
|
511
|
+
<p style="font-weight:var(--qc-font-weight-content-regular);">
|
|
512
|
+
ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789,abcdefghijklmnopqrstuvwxyz0123456789<br>
|
|
513
|
+
<i>ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789,abcdefghijklmnopqrstuvwxyz0123456789</i>
|
|
514
|
+
</p>
|
|
515
|
+
<p style="font-weight:var(--qc-font-weight-content-medium);">
|
|
516
|
+
ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789,abcdefghijklmnopqrstuvwxyz0123456789<br>
|
|
517
|
+
<i>ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789,abcdefghijklmnopqrstuvwxyz0123456789</i>
|
|
518
|
+
</p>
|
|
519
|
+
<p style="font-weight:var(--qc-font-weight-content-bold);">
|
|
520
|
+
ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789,abcdefghijklmnopqrstuvwxyz0123456789<br>
|
|
521
|
+
<i>ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789,abcdefghijklmnopqrstuvwxyz0123456789</i>
|
|
522
|
+
</p>
|
|
523
|
+
</div>
|
|
524
|
+
</qc-doc-exemple>
|
|
525
|
+
<!-- <qc-code target-id="font-open-sans"></qc-code>-->
|
|
544
526
|
</div>
|
|
545
527
|
|
|
546
|
-
<hr />
|
|
547
528
|
<!-- Séparateur -->
|
|
548
529
|
<h2 id="separator">Séparateur</h2>
|
|
549
530
|
|
|
550
|
-
<
|
|
531
|
+
<qc-doc-exemple caption="Exemple de séparateur">
|
|
551
532
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
|
|
552
533
|
<hr />
|
|
553
534
|
<p>A autem consequuntur cum cupiditate dignissimos, dolore doloribus,</p>
|
|
554
|
-
</
|
|
535
|
+
</qc-doc-exemple>
|
|
536
|
+
|
|
537
|
+
<!-- <qc-code target-id="separateur-exemple"></qc-code>-->
|
|
555
538
|
|
|
556
|
-
<
|
|
539
|
+
<hr />
|
|
557
540
|
|
|
558
541
|
<!-- alerte générale -->
|
|
559
542
|
<h2 id="alert">Alerte générale (qc-alert)</h2>
|
|
@@ -568,30 +551,32 @@
|
|
|
568
551
|
</a>
|
|
569
552
|
</p>
|
|
570
553
|
|
|
571
|
-
|
|
572
|
-
|
|
554
|
+
<qc-doc-exemple id="alert-warning"
|
|
555
|
+
caption="Exemple d'alerte jaune" >
|
|
556
|
+
<qc-alert id="alerte-masquable"
|
|
573
557
|
type="warning"
|
|
574
558
|
maskable="true"
|
|
575
559
|
content="Alerte jaune d'importance élevée"
|
|
576
560
|
>
|
|
577
561
|
</qc-alert>
|
|
578
|
-
|
|
579
|
-
<qc-code target-id="alert-warning"></qc-code
|
|
562
|
+
</qc-doc-exemple>
|
|
563
|
+
<!-- <qc-code target-id="alert-warning"></qc-code>-->
|
|
580
564
|
|
|
581
565
|
<h4>Alerte bleue</h4>
|
|
582
|
-
<qc-
|
|
583
|
-
|
|
584
|
-
|
|
566
|
+
<qc-doc-exemple id="alert-general"
|
|
567
|
+
caption="Exemple d'alerte générale" >
|
|
568
|
+
<qc-alert type="general"
|
|
569
|
+
maskable="false">
|
|
570
|
+
<p>Alerte bleue d'importance modérée <a href="javascript:;">avec un lien textuel</a></p>
|
|
571
|
+
</qc-alert>
|
|
572
|
+
</qc-doc-exemple>
|
|
585
573
|
|
|
586
|
-
|
|
587
|
-
<p>Alerte bleue d'importance modérée <a href="javascript:;">avec un lien textuel</a></p>
|
|
588
|
-
</qc-alert>
|
|
589
|
-
<qc-code target-id="alert-general"></qc-code>
|
|
574
|
+
<!-- <qc-code target-id="alert-general"></qc-code>-->
|
|
590
575
|
|
|
591
576
|
<h3>Documentation technique</h3>
|
|
592
577
|
|
|
593
578
|
<h4>Attributs</h4>
|
|
594
|
-
|
|
579
|
+
<div class="table-overflow">
|
|
595
580
|
<table class="qc-table qc-striped component-attributes-description">
|
|
596
581
|
<thead>
|
|
597
582
|
<tr>
|
|
@@ -625,7 +610,14 @@
|
|
|
625
610
|
<td>"false"</td>
|
|
626
611
|
<td>Masque ou affiche l'alerte</td>
|
|
627
612
|
</tr>
|
|
613
|
+
<tr>
|
|
614
|
+
<td>full-width</td>
|
|
615
|
+
<td>"true" ou "false"</td>
|
|
616
|
+
<td>"false"</td>
|
|
617
|
+
<td>Affiche le contenu de l’alerte dans un conteneur pleine-largeur (classe css qc-container-fluid)</td>
|
|
618
|
+
</tr>
|
|
628
619
|
</table>
|
|
620
|
+
</div>
|
|
629
621
|
|
|
630
622
|
<h4>Événement JS</h4>
|
|
631
623
|
|
|
@@ -638,56 +630,84 @@
|
|
|
638
630
|
)
|
|
639
631
|
</script>
|
|
640
632
|
<qc-code target-id="qc-alert-event-exemple"
|
|
641
|
-
language="
|
|
633
|
+
language="javascript"></qc-code>
|
|
642
634
|
|
|
643
635
|
<h4>Zone d'ajout de contenu HTML</h4>
|
|
644
636
|
|
|
645
637
|
<p>Ci-dessous, la zone d'ajout de contenu HTML (balise <slot>) délimitée en pointillé.</p>
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
638
|
+
<qc-doc-exemple caption="Présentation des zone d'ajout de contenu"
|
|
639
|
+
hide-code
|
|
640
|
+
>
|
|
641
|
+
<qc-alert id="qc-alert-slots">
|
|
642
|
+
<div style="border:2px dashed; padding: var(--qc-spacer-xs);">
|
|
643
|
+
Contenu par défaut
|
|
644
|
+
</div>
|
|
645
|
+
</qc-alert>
|
|
646
|
+
</qc-doc-exemple>
|
|
647
|
+
<!-- <qc-code target-id="qc-alert-slots"></qc-code>-->
|
|
653
648
|
|
|
654
649
|
<hr />
|
|
655
650
|
|
|
656
651
|
<!-- avis -->
|
|
657
652
|
<h2 id="notice">Avis (qc-notice)</h2>
|
|
658
653
|
<h3>Exemples</h3>
|
|
659
|
-
<h4>Information</h4>
|
|
660
654
|
|
|
661
|
-
<qc-
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
655
|
+
<qc-doc-exemple id="exemple-avis-neutre"
|
|
656
|
+
caption="Exemple d’avis neutres"
|
|
657
|
+
>
|
|
658
|
+
<qc-notice type="advice"
|
|
659
|
+
icon="ampoule"
|
|
660
|
+
title="Nouvelle règlementation"
|
|
661
|
+
content="Les nouveaux règlements de pêche seront en vigeur à partir du 12 mai.">
|
|
662
|
+
</qc-notice>
|
|
663
|
+
<qc-notice type="note"
|
|
664
|
+
icon="note"
|
|
665
|
+
title="Nouvelle règlementation"
|
|
666
|
+
content="Les nouveaux règlements de pêche seront en vigeur à partir du 12 mai.">
|
|
667
|
+
</qc-notice>
|
|
668
|
+
</qc-doc-exemple>
|
|
669
|
+
|
|
670
|
+
<qc-doc-exemple caption="Exemple d’information">
|
|
671
|
+
<qc-notice type="information"
|
|
672
|
+
title="Nouvelle règlementation"
|
|
673
|
+
content="Les nouveaux règlements de pêche seront en vigeur à partir du 12 mai.">
|
|
674
|
+
</qc-notice>
|
|
675
|
+
</qc-doc-exemple>
|
|
676
|
+
<!-- <qc-code target-id="exemple-avis-neutre" ></qc-code>-->
|
|
677
|
+
|
|
678
|
+
|
|
679
|
+
<qc-doc-exemple id="exemple-avis-avertissement"
|
|
680
|
+
caption="Exemple d’avertissement (avec et sans <i><code>slot</code></i>)"
|
|
681
|
+
>
|
|
682
|
+
<qc-notice type="warning"
|
|
683
|
+
title="Migration des <i>contenus</i>"
|
|
684
|
+
content="Les contenus seront transférés dans Québec.ca à partir du 16 février et le site sera fermé le 20 avril.">
|
|
685
|
+
</qc-notice>
|
|
674
686
|
|
|
675
|
-
|
|
687
|
+
<qc-notice type="warning">
|
|
688
|
+
<h2>Migration des <i>contenus</i></h2>
|
|
689
|
+
<p>Les contenus seront transférés dans Québec.ca à partir du 16 février et le site sera fermé le 20 avril.</p>
|
|
690
|
+
</qc-notice>
|
|
691
|
+
</qc-doc-exemple>
|
|
676
692
|
|
|
677
|
-
<
|
|
693
|
+
<!-- <qc-code target-id="exemple-avis-avertissement" ></qc-code>-->
|
|
678
694
|
|
|
679
|
-
<qc-notice id="notice-success"
|
|
680
|
-
type="success"
|
|
681
|
-
title="Votre demande d'inscription a été reçue"
|
|
682
|
-
content="Votre code de confirmation sera envoyé par courriel.">
|
|
683
|
-
</qc-notice>
|
|
684
695
|
|
|
685
|
-
<qc-
|
|
696
|
+
<qc-doc-exemple id="exemple-avis-succes"
|
|
697
|
+
caption="Exemple d’avis de succès"
|
|
698
|
+
>
|
|
699
|
+
<qc-notice type="success"
|
|
700
|
+
title="Votre demande d'inscription a été reçue"
|
|
701
|
+
content="Votre code de confirmation sera envoyé par courriel.">
|
|
702
|
+
</qc-notice>
|
|
703
|
+
</qc-doc-exemple>
|
|
704
|
+
<!-- <qc-code target-id="exemple-avis-succes" ></qc-code>-->
|
|
686
705
|
|
|
687
|
-
<h4>Erreur</h4>
|
|
688
706
|
|
|
689
|
-
<qc-
|
|
690
|
-
|
|
707
|
+
<qc-doc-exemple id="exemple-avis-erreur"
|
|
708
|
+
caption="Exemple d’avis d’erreur"
|
|
709
|
+
>
|
|
710
|
+
<qc-notice type="error"
|
|
691
711
|
title="Des erreurs sont présentes dans le formulaire.">
|
|
692
712
|
<ul>
|
|
693
713
|
<li>
|
|
@@ -701,13 +721,14 @@
|
|
|
701
721
|
</li>
|
|
702
722
|
</ul>
|
|
703
723
|
</qc-notice>
|
|
724
|
+
</qc-doc-exemple>
|
|
704
725
|
|
|
705
|
-
<qc-code target-id="
|
|
726
|
+
<!-- <qc-code target-id="exemple-avis-erreur" ></qc-code>-->
|
|
706
727
|
|
|
707
728
|
<h3>Documentation technique</h3>
|
|
708
729
|
|
|
709
730
|
<h4>Attributs</h4>
|
|
710
|
-
|
|
731
|
+
<div class="table-overflow">
|
|
711
732
|
<table class="qc-table qc-striped component-attributes-description">
|
|
712
733
|
<thead>
|
|
713
734
|
<tr>
|
|
@@ -726,15 +747,15 @@
|
|
|
726
747
|
</tr>
|
|
727
748
|
<tr>
|
|
728
749
|
<td>type</td>
|
|
729
|
-
<td>information, warning, success, error</td>
|
|
730
|
-
<td>information</td>
|
|
750
|
+
<td>information, warning, success, error, advice, note</td>
|
|
751
|
+
<td>information (si absence de type)</td>
|
|
731
752
|
<td>Le type d'avis</td>
|
|
732
753
|
</tr>
|
|
733
754
|
<tr>
|
|
734
755
|
<td>content</td>
|
|
735
756
|
<td>Texte</td>
|
|
736
757
|
<td>Chaîne vide</td>
|
|
737
|
-
<td>Le contenu de l'avis
|
|
758
|
+
<td>Le contenu de l'avis, il doit contenir du texte structuré avec des balises sémantiques.</td>
|
|
738
759
|
</tr>
|
|
739
760
|
<tr>
|
|
740
761
|
<td>header</td>
|
|
@@ -742,21 +763,152 @@
|
|
|
742
763
|
<td>h2</td>
|
|
743
764
|
<td>La balise du niveau de titre de l'avis</td>
|
|
744
765
|
</tr>
|
|
766
|
+
<tr>
|
|
767
|
+
<td>icon</td>
|
|
768
|
+
<td>Toute clé de la map $images dans settings/_base.scss</td>
|
|
769
|
+
<td>information <qc-icon icon="information" aria-hidden="true" size="nm"></qc-icon> (si absence de type)</td>
|
|
770
|
+
<td>Défini l’icône pour les avis neutres</td>
|
|
771
|
+
</tr>
|
|
745
772
|
</tbody>
|
|
746
773
|
</table>
|
|
747
|
-
|
|
774
|
+
</div>
|
|
748
775
|
<h4>Zone d'ajout de contenu HTML</h4>
|
|
749
776
|
|
|
750
777
|
<p>Ci-dessous, la zone d'ajout de contenu HTML (balise <slot>) délimitée en pointillé.</p>
|
|
751
778
|
|
|
752
|
-
<qc-
|
|
753
|
-
|
|
754
|
-
|
|
779
|
+
<qc-doc-exemple id="presentation-slots-avis"
|
|
780
|
+
caption="Présentation des emplacements disponibles dans les avis."
|
|
781
|
+
hide-code
|
|
782
|
+
>
|
|
783
|
+
<qc-notice id="qc-notice-slots">
|
|
784
|
+
<div style="border:2px dashed; padding: var(--qc-spacer-xs);">
|
|
785
|
+
Contenu par défaut
|
|
786
|
+
</div>
|
|
787
|
+
</qc-notice>
|
|
788
|
+
</qc-doc-exemple>
|
|
789
|
+
<!-- <qc-code target-id="presentation-slots-avis" ></qc-code>-->
|
|
790
|
+
|
|
791
|
+
<h2 id="search-bar">Barre de recherche</h2>
|
|
792
|
+
<h3>Exemples</h3>
|
|
793
|
+
<qc-doc-exemple caption="Exemple de barre de recherche lançant une recherche dans quebec.ca">
|
|
794
|
+
<form action="http://www.quebec.ca/resultats-de-recherche">
|
|
795
|
+
<qc-search-bar name="tx_solr[q]"></qc-search-bar>
|
|
796
|
+
</form>
|
|
797
|
+
</qc-doc-exemple>
|
|
798
|
+
|
|
799
|
+
<qc-doc-exemple caption="Exemple de barre de recherche sur fond blanc et bleu PIV">
|
|
800
|
+
|
|
801
|
+
<qc-search-bar></qc-search-bar>
|
|
802
|
+
|
|
803
|
+
<div style="margin: var(--qc-spacer-content-block-mb) 0 0;
|
|
804
|
+
padding: var(--qc-spacer-md);
|
|
805
|
+
background-color: var(--qc-color-blue-piv);" >
|
|
806
|
+
<qc-search-bar piv-background></qc-search-bar>
|
|
755
807
|
</div>
|
|
756
|
-
</qc-notice>
|
|
757
|
-
<qc-code target-id="qc-notice-slots"></qc-code>
|
|
758
808
|
|
|
759
|
-
|
|
809
|
+
</qc-doc-exemple>
|
|
810
|
+
|
|
811
|
+
<h3>Saisie semi-automatique (<i>autocomplete</i>)</h3>
|
|
812
|
+
|
|
813
|
+
<p>La barre de recherche n’offre pas encore la possibilité d’ajouter des suggestions à la saisie de texte. Cependant il vous est possible d’utiliser votre propre bibliothèque javascript. Voici un exemple avec jQuery UI.</p>
|
|
814
|
+
|
|
815
|
+
<qc-doc-exemple caption="Exemple de barre de recherche avec saisie semi-automatique basée sur jQuery UI">
|
|
816
|
+
|
|
817
|
+
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
|
|
818
|
+
<script src="https://code.jquery.com/ui/1.14.1/jquery-ui.js"></script>
|
|
819
|
+
|
|
820
|
+
<qc-search-bar class="autocomplete-search-bar"
|
|
821
|
+
input-placeholder="Tapez 'aaa' pour faire apparaître de nombreuses suggestions…"
|
|
822
|
+
style="margin-bottom: var(--qc-spacer-content-block-mb)"
|
|
823
|
+
></qc-search-bar>
|
|
824
|
+
|
|
825
|
+
<script>
|
|
826
|
+
$(function() {
|
|
827
|
+
$.widget("ui.autocomplete", $.ui.autocomplete, {
|
|
828
|
+
_resizeMenu: function() {
|
|
829
|
+
// pour donner au panneau des suggestions la largeur de la barre de recherche
|
|
830
|
+
let component = this.element.closest("qc-search-bar");
|
|
831
|
+
this.menu.element.outerWidth(component.outerWidth());
|
|
832
|
+
},
|
|
833
|
+
});
|
|
834
|
+
// personnalisation des messages jquery ui pour le lecteur d’écran en français
|
|
835
|
+
$.extend($.ui.autocomplete.prototype.options.messages, {
|
|
836
|
+
noResults: "Aucun résultat trouvé.",
|
|
837
|
+
results: function(count) {
|
|
838
|
+
let s = count > 1 ? "s" : ''
|
|
839
|
+
return `${count} résultat${s} disponible${s}, utilisez les flèches directionnelles haut et bas pour vous déplacer dans la liste.`;
|
|
840
|
+
}
|
|
841
|
+
});
|
|
842
|
+
|
|
843
|
+
$(".autocomplete-search-bar input[type=search]").autocomplete({
|
|
844
|
+
source: [...Array(1000)].map((v,k) => "aaaa - " + k)
|
|
845
|
+
});
|
|
846
|
+
})
|
|
847
|
+
|
|
848
|
+
|
|
849
|
+
</script>
|
|
850
|
+
|
|
851
|
+
</qc-doc-exemple>
|
|
852
|
+
|
|
853
|
+
|
|
854
|
+
|
|
855
|
+
<h3>Attributs</h3>
|
|
856
|
+
<div class="table-overflow">
|
|
857
|
+
<table class="qc-table qc-striped component-attributes-description">
|
|
858
|
+
<thead>
|
|
859
|
+
<tr>
|
|
860
|
+
<th>Nom</th>
|
|
861
|
+
<th>Valeur attendue</th>
|
|
862
|
+
<th>Valeur par défaut</th>
|
|
863
|
+
<th>Description</th>
|
|
864
|
+
</tr>
|
|
865
|
+
</thead>
|
|
866
|
+
<tbody>
|
|
867
|
+
<tr>
|
|
868
|
+
<td>name</td>
|
|
869
|
+
<td>Texte</td>
|
|
870
|
+
<td>q</td>
|
|
871
|
+
<td>Nom du champs dans le formulaire</td>
|
|
872
|
+
</tr>
|
|
873
|
+
<tr>
|
|
874
|
+
<td>value</td>
|
|
875
|
+
<td>Texte</td>
|
|
876
|
+
<td>Chaine vide</td>
|
|
877
|
+
<td>Valeur du champs dans le formulaire</td>
|
|
878
|
+
</tr>
|
|
879
|
+
<tr>
|
|
880
|
+
<td>input-*</td>
|
|
881
|
+
<td>na</td>
|
|
882
|
+
<td>na</td>
|
|
883
|
+
<td>Tout attribut commençant par <code>input-</code> sera ajouté au champ texte du composant.</td>
|
|
884
|
+
</tr>
|
|
885
|
+
<tr>
|
|
886
|
+
<td>submit-aria-label</td>
|
|
887
|
+
<td>Texte</td>
|
|
888
|
+
<td>Lancer la recherche/Submit search</td>
|
|
889
|
+
<td>Valeur de l’attribut aria-label du bouton</td>
|
|
890
|
+
</tr>
|
|
891
|
+
<tr>
|
|
892
|
+
<td>submit-*</td>
|
|
893
|
+
<td>na</td>
|
|
894
|
+
<td>na</td>
|
|
895
|
+
<td>Tout attribut commençant par <code>input-</code> sera ajouté au bouton du composant. Utile par exemple pour lui donner un nom et une valeur.</td>
|
|
896
|
+
</tr>
|
|
897
|
+
<tr>
|
|
898
|
+
<td>piv-background</td>
|
|
899
|
+
<td>Aucune (simplement ajouter l'attribut)</td>
|
|
900
|
+
<td>False</td>
|
|
901
|
+
<td>Indique que la barre de recherche est sur fond bleu PIV</td>
|
|
902
|
+
</tr>
|
|
903
|
+
</tbody>
|
|
904
|
+
</table>
|
|
905
|
+
</div>
|
|
906
|
+
|
|
907
|
+
<h3>Zone d'ajout de contenu HTML</h3>
|
|
908
|
+
<p>Aucune zone d'ajout de contenu n'est définie pour ce composant</p>
|
|
909
|
+
|
|
910
|
+
<h3>Précision concernant le DOM d’ombre (Shadow dom)</h3>
|
|
911
|
+
<p>Ce composant ne contient pas de DOM d'ombre.</p>
|
|
760
912
|
|
|
761
913
|
<!-- PIV -->
|
|
762
914
|
<h2 id="piv">Composants du PIV</h2>
|
|
@@ -764,73 +916,69 @@
|
|
|
764
916
|
<h3 id="piv-header">Bandeau d'en-tête du PIV (qc-piv-header)</h3>
|
|
765
917
|
|
|
766
918
|
<h4>Exemples</h4>
|
|
767
|
-
|
|
768
|
-
<qc-
|
|
769
|
-
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
<qc-
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
enable-search="true"
|
|
782
|
-
search-form-action="https://www.quebec.ca/resultats-de-recherche"
|
|
783
|
-
search-input-name="tx_solr[q]"
|
|
919
|
+
<!-- TODO remplacer les aria-label des qc-doc-exemple par aria-labelby et cibler le titre -->
|
|
920
|
+
<qc-doc-exemple id="pivEnteteExempleLiens"
|
|
921
|
+
caption="Exemple de bandeau d’entête PIV de base"
|
|
922
|
+
>
|
|
923
|
+
<qc-piv-header alt-logo="Accédez à Québec.ca"
|
|
924
|
+
join-us-url="#join-us"
|
|
925
|
+
alt-language-url="#fakeEnglish"
|
|
926
|
+
>
|
|
927
|
+
</qc-piv-header>
|
|
928
|
+
</qc-doc-exemple>
|
|
929
|
+
<!-- <qc-code target-id="pivEnteteExempleLiens"></qc-code>-->
|
|
930
|
+
|
|
931
|
+
<qc-doc-exemple id="pivEnteteExempleRecherche"
|
|
932
|
+
caption="Exemple de personnalisation des liens du bandeau d’entête PIV"
|
|
784
933
|
>
|
|
785
|
-
<
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
934
|
+
<qc-piv-header
|
|
935
|
+
title-text="Nom du site"
|
|
936
|
+
title-url="https://www.quebec.ca/"
|
|
937
|
+
alt-logo="Accédez à Québec.ca"
|
|
938
|
+
>
|
|
939
|
+
<nav slot="links"
|
|
940
|
+
aria-label="Navigation PIV">
|
|
941
|
+
<ul>
|
|
942
|
+
<li><a href="#fakeEnglish">English</a>
|
|
943
|
+
</li>
|
|
944
|
+
<li><a href="javascript:;">Nous joindre</a>
|
|
945
|
+
</li>
|
|
946
|
+
</ul>
|
|
947
|
+
</nav>
|
|
948
|
+
</qc-piv-header>
|
|
949
|
+
</qc-doc-exemple>
|
|
950
|
+
<!-- <qc-code target-id="pivEnteteExempleRecherche"></qc-code>-->
|
|
791
951
|
|
|
792
|
-
|
|
793
|
-
<qc-code target-id="pivEnteteExempleRecherche"></qc-code>
|
|
952
|
+
<qc-doc-exemple caption="Exemple de bandeau d’entête PIV avec recherche personnalisée"
|
|
794
953
|
|
|
795
|
-
<h5>Exemple avec personnalisation du formulaire de recherche</h5>
|
|
796
|
-
<qc-piv-header id="pivEnteteExempleRecherchePersonnalisee"
|
|
797
|
-
title-text="Nom du site"
|
|
798
|
-
alt-logo="Accédez à Québec.ca"
|
|
799
|
-
enable-search="true"
|
|
800
|
-
show-search="true"
|
|
801
954
|
>
|
|
802
|
-
<
|
|
803
|
-
<
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
955
|
+
<div id="pivEnteteExempleRecherchePersonnalisee">
|
|
956
|
+
<qc-piv-header title-text="Nom du site"
|
|
957
|
+
alt-logo="Accédez à Québec.ca"
|
|
958
|
+
enable-search="true"
|
|
959
|
+
show-search="true"
|
|
960
|
+
>
|
|
961
|
+
<ul slot="links">
|
|
962
|
+
<li><a href="#fakeEnglish">English</a>
|
|
963
|
+
</li>
|
|
964
|
+
<li><a href="javascript:;">Nous joindre</a>
|
|
965
|
+
</li>
|
|
966
|
+
</ul>
|
|
808
967
|
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
<input type="text"
|
|
819
|
-
title="Recherche"
|
|
820
|
-
placeholder="Rechercher dans Nom du site"
|
|
821
|
-
name="q">
|
|
822
|
-
<button>
|
|
823
|
-
<span class="qc-icon qc-search-submit"></span>
|
|
824
|
-
<span class="sr-description">Rechercher</span>
|
|
825
|
-
</button>
|
|
826
|
-
</div>
|
|
827
|
-
</form>
|
|
828
|
-
</qc-piv-header>
|
|
968
|
+
<form slot="search-zone"
|
|
969
|
+
method="get"
|
|
970
|
+
action="https://www.google.ca/search"
|
|
971
|
+
>
|
|
972
|
+
<qc-search-bar name="q" piv-background></qc-search-bar>
|
|
973
|
+
</form>
|
|
974
|
+
</qc-piv-header>
|
|
975
|
+
</div>
|
|
976
|
+
</qc-doc-exemple>
|
|
829
977
|
|
|
830
|
-
<qc-code target-id="pivEnteteExempleRecherchePersonnalisee"></qc-code>
|
|
831
978
|
|
|
832
979
|
<h4>Documentation technique</h4>
|
|
833
980
|
<h5>Attributs</h5>
|
|
981
|
+
<div class="table-overflow">
|
|
834
982
|
<table class="qc-table qc-striped component-attributes-description">
|
|
835
983
|
<thead>
|
|
836
984
|
<tr>
|
|
@@ -938,24 +1086,7 @@
|
|
|
938
1086
|
<td>"false"</td>
|
|
939
1087
|
<td>Affiche le formulaire de recherche (normalement caché tant que le bouton de recherche n'a pas été pressé).</td>
|
|
940
1088
|
</tr>
|
|
941
|
-
|
|
942
|
-
<td>search-form-action</td>
|
|
943
|
-
<td>Adresse</td>
|
|
944
|
-
<td>#</td>
|
|
945
|
-
<td>Valeur de l'attribut « action » du champ du formulaire de recherche.</td>
|
|
946
|
-
</tr>
|
|
947
|
-
<tr>
|
|
948
|
-
<td>search-input-name</td>
|
|
949
|
-
<td>Texte</td>
|
|
950
|
-
<td>q</td>
|
|
951
|
-
<td>Valeur de l'attribut « name » du champ texte du formulaire de recherche.</td>
|
|
952
|
-
</tr>
|
|
953
|
-
<tr>
|
|
954
|
-
<td>search-placeholder</td>
|
|
955
|
-
<td>Texte</td>
|
|
956
|
-
<td>Rechercher… / Search…</td>
|
|
957
|
-
<td>Valeur de l'attribut « placeholder » du champ texte du formulaire de recherche.</td>
|
|
958
|
-
</tr>
|
|
1089
|
+
|
|
959
1090
|
<tr>
|
|
960
1091
|
<td>display-search-text</td>
|
|
961
1092
|
<td>Texte</td>
|
|
@@ -968,177 +1099,200 @@
|
|
|
968
1099
|
<td>Masquer la barre de recherche / Hide search bar</td>
|
|
969
1100
|
<td>Texte du bouton de recherche (en forme de loupe) pour les lecteurs d'écran pour masquer la barre de recherche.</td>
|
|
970
1101
|
</tr>
|
|
971
|
-
<tr>
|
|
972
|
-
<td>submit-search-text</td>
|
|
973
|
-
<td>Texte</td>
|
|
974
|
-
<td>Rechercher / Search</td>
|
|
975
|
-
<td>Texte du bouton de soumission du formulaire pour les lecteurs d'écran.</td>
|
|
976
|
-
</tr>
|
|
977
|
-
|
|
978
1102
|
</tbody>
|
|
979
1103
|
</table>
|
|
980
|
-
|
|
1104
|
+
</div>
|
|
981
1105
|
<h5>Zones d'ajout de contenu HTML</h5>
|
|
1106
|
+
|
|
982
1107
|
<p>Ci-dessous, les zones d'ajout de contenu HTML (balise <slot>) délimitées en pointillé.</p>
|
|
983
|
-
<qc-
|
|
984
|
-
|
|
985
|
-
|
|
986
|
-
show-search="true">
|
|
987
|
-
<div slot="search-zone"
|
|
988
|
-
style="border:2px dashed;padding: var(--qc-spacer-xs);">
|
|
989
|
-
slot="search-zone"
|
|
990
|
-
</div>
|
|
991
|
-
<div slot="links"
|
|
992
|
-
style="border:2px dashed;padding: var(--qc-spacer-xs);"
|
|
1108
|
+
<qc-doc-exemple id="qc-piv-header-slots"
|
|
1109
|
+
caption="Présentation des zones d'ajout de contenu dans le PIV"
|
|
1110
|
+
hide-code
|
|
993
1111
|
>
|
|
994
|
-
|
|
995
|
-
|
|
996
|
-
|
|
997
|
-
|
|
1112
|
+
<qc-piv-header
|
|
1113
|
+
style="margin-bottom: var(--qc-spacer-content-block-mb);"
|
|
1114
|
+
enable-search="true"
|
|
1115
|
+
show-search="true">
|
|
1116
|
+
<div slot="search-zone"
|
|
1117
|
+
style="border:2px dashed;padding: var(--qc-spacer-xs);">
|
|
1118
|
+
slot="search-zone"
|
|
1119
|
+
</div>
|
|
1120
|
+
<div slot="links"
|
|
1121
|
+
style="border:2px dashed;padding: var(--qc-spacer-xs);"
|
|
1122
|
+
>
|
|
1123
|
+
slot="links"
|
|
1124
|
+
</div>
|
|
1125
|
+
</qc-piv-header>
|
|
1126
|
+
</qc-doc-exemple>
|
|
1127
|
+
|
|
1128
|
+
<!-- <qc-code target-id="qc-piv-header-slots"></qc-code>-->
|
|
998
1129
|
|
|
999
1130
|
<h3 id="piv-footer">Pied de page du PIV (qc-piv-footer)</h3>
|
|
1131
|
+
|
|
1000
1132
|
<h4>Exemples</h4>
|
|
1001
|
-
<h5>Exemple de base</h5>
|
|
1002
|
-
<qc-piv-footer id="piv-footer-1">
|
|
1003
|
-
<ul>
|
|
1004
|
-
<li><a href="/">Accessibilité</a></li>
|
|
1005
|
-
<li><a href="/">Plan du site</a></li>
|
|
1006
|
-
<li><a href="/">Accès à l'information</a></li>
|
|
1007
|
-
<li><a href="/">Politique de confidentialité</a></li>
|
|
1008
|
-
<li><a href="/">Condition d'utilisation</a></li>
|
|
1009
|
-
<li><a href="/">À propos de Québec.ca</a></li>
|
|
1010
|
-
</ul>
|
|
1011
|
-
</qc-piv-footer>
|
|
1012
|
-
<qc-code target-id="piv-footer-1"></qc-code>
|
|
1013
1133
|
|
|
1014
|
-
|
|
1015
|
-
<qc-
|
|
1016
|
-
|
|
1017
|
-
|
|
1018
|
-
<
|
|
1019
|
-
|
|
1020
|
-
|
|
1021
|
-
|
|
1022
|
-
|
|
1023
|
-
|
|
1024
|
-
|
|
1025
|
-
|
|
1026
|
-
|
|
1027
|
-
|
|
1028
|
-
|
|
1029
|
-
|
|
1030
|
-
|
|
1031
|
-
|
|
1032
|
-
|
|
1033
|
-
|
|
1034
|
-
|
|
1035
|
-
|
|
1036
|
-
|
|
1037
|
-
|
|
1134
|
+
|
|
1135
|
+
<qc-doc-exemple id="piv-footer-1"
|
|
1136
|
+
caption="Exemple de pied de page du PIV de base">
|
|
1137
|
+
<qc-piv-footer >
|
|
1138
|
+
<nav aria-label="Navigation du pied-de-page">
|
|
1139
|
+
<ul>
|
|
1140
|
+
<li><a href="/">Accessibilité</a></li>
|
|
1141
|
+
<li><a href="/">Plan du site</a></li>
|
|
1142
|
+
<li><a href="/">Accès à l'information</a></li>
|
|
1143
|
+
<li><a href="/">Politique de confidentialité</a></li>
|
|
1144
|
+
<li><a href="/">Condition d'utilisation</a></li>
|
|
1145
|
+
<li><a href="/">À propos de Québec.ca</a></li>
|
|
1146
|
+
</ul>
|
|
1147
|
+
</nav>
|
|
1148
|
+
</qc-piv-footer>
|
|
1149
|
+
</qc-doc-exemple>
|
|
1150
|
+
<!-- <qc-code target-id="piv-footer-1"></qc-code>-->
|
|
1151
|
+
|
|
1152
|
+
<qc-doc-exemple id="piv-footer-ex-2"
|
|
1153
|
+
caption="Exemple de pied de page du PIV personnalisé."
|
|
1154
|
+
>
|
|
1155
|
+
<qc-piv-footer
|
|
1156
|
+
logo-src="img/piv-MCE-theme-clair.svg"
|
|
1157
|
+
logo-src-dark-theme="img/piv-MCE-theme-sombre.svg"
|
|
1158
|
+
>
|
|
1159
|
+
<nav aria-label="Navigation du pied-de-page">
|
|
1160
|
+
<ul>
|
|
1161
|
+
<li><a href="/">Accessibilité</a></li>
|
|
1162
|
+
<li><a href="/">Plan du site</a></li>
|
|
1163
|
+
<li><a href="/">S'informer sur clicSÉQUR - Citoyens</a></li>
|
|
1164
|
+
<li><a href="/">FAQ</a></li>
|
|
1165
|
+
</ul>
|
|
1166
|
+
</nav>
|
|
1167
|
+
<qc-external-link slot="copyright">
|
|
1168
|
+
<a
|
|
1169
|
+
target="_blank"
|
|
1170
|
+
rel="noopener"
|
|
1171
|
+
href="https://www.quebec.ca/droit-auteur">
|
|
1172
|
+
© Gouvernement du Québec, 2023
|
|
1173
|
+
</a>
|
|
1174
|
+
</qc-external-link>
|
|
1175
|
+
</qc-piv-footer>
|
|
1176
|
+
</qc-doc-exemple>
|
|
1177
|
+
<!-- <qc-code target-id="piv-footer-ex-2"></qc-code>-->
|
|
1038
1178
|
|
|
1039
1179
|
<h4>Documentation technique</h4>
|
|
1040
|
-
<h5>Attributs</h5>
|
|
1041
|
-
<table class="qc-table qc-striped component-attributes-description">
|
|
1042
|
-
<thead>
|
|
1043
|
-
<tr>
|
|
1044
|
-
<th>Nom</th>
|
|
1045
|
-
<th>Valeur attendue</th>
|
|
1046
|
-
<th>Valeur par défaut</th>
|
|
1047
|
-
<th>Description</th>
|
|
1048
|
-
</tr>
|
|
1049
|
-
</thead>
|
|
1050
|
-
<tbody>
|
|
1051
|
-
<tr>
|
|
1052
|
-
<td>logo-url</td>
|
|
1053
|
-
<td>Adresse</td>
|
|
1054
|
-
<td>/</td>
|
|
1055
|
-
<td>Cible du lien contenant le logo</td>
|
|
1056
|
-
</tr>
|
|
1057
|
-
<tr>
|
|
1058
|
-
<td>logo-src</td>
|
|
1059
|
-
<td>Adresse</td>
|
|
1060
|
-
<td>/</td>
|
|
1061
|
-
<td>Adresse de l'image du drapeau du Québec de la trousse</td>
|
|
1062
|
-
</tr>
|
|
1063
|
-
<tr>
|
|
1064
|
-
<td>logo-alt</td>
|
|
1065
|
-
<td>Texte</td>
|
|
1066
|
-
<td>Gouvernement du Québec</td>
|
|
1067
|
-
<td>Texte alternatif du logo pour les lecteurs d'écran</td>
|
|
1068
|
-
</tr>
|
|
1069
|
-
<tr>
|
|
1070
|
-
<td>logo-width</td>
|
|
1071
|
-
<td>Nombre entier</td>
|
|
1072
|
-
<td>117</td>
|
|
1073
|
-
<td>Largeur de l'image en pixel</td>
|
|
1074
|
-
</tr>
|
|
1075
|
-
<tr>
|
|
1076
|
-
<td>logo-height</td>
|
|
1077
|
-
<td>Nombre entier</td>
|
|
1078
|
-
<td>35</td>
|
|
1079
|
-
<td>Hauteur de l'image en pixel</td>
|
|
1080
|
-
</tr>
|
|
1081
|
-
<tr>
|
|
1082
|
-
<td>copyright-text</td>
|
|
1083
|
-
<td>Texte</td>
|
|
1084
|
-
<td>© Gouvernement du Québec, <année en cours AAAA></td>
|
|
1085
|
-
<td>Texte du lien de changement de langue</td>
|
|
1086
|
-
</tr>
|
|
1087
|
-
<tr>
|
|
1088
|
-
<td>copyright-url</td>
|
|
1089
|
-
<td>Adresse</td>
|
|
1090
|
-
<td>
|
|
1091
|
-
<dl>
|
|
1092
|
-
<dt>Français</dt><dd>https://www.quebec.ca/droit-auteur</dd>
|
|
1093
|
-
<dt>Anglais</dt><dd>https://www.quebec.ca/en/copyright</dd>
|
|
1094
|
-
</dl>
|
|
1095
|
-
</td>
|
|
1096
|
-
<td>L'adresse de la page du droit d'auteur sur quebec.ca</td>
|
|
1097
|
-
</tr>
|
|
1098
1180
|
|
|
1099
|
-
|
|
1100
|
-
|
|
1181
|
+
<h5>Attributs</h5>
|
|
1182
|
+
<div class="table-overflow">
|
|
1183
|
+
<table class="qc-table qc-striped component-attributes-description">
|
|
1184
|
+
<thead>
|
|
1185
|
+
<tr>
|
|
1186
|
+
<th>Nom</th>
|
|
1187
|
+
<th>Valeur attendue</th>
|
|
1188
|
+
<th>Valeur par défaut</th>
|
|
1189
|
+
<th>Description</th>
|
|
1190
|
+
</tr>
|
|
1191
|
+
</thead>
|
|
1192
|
+
<tbody>
|
|
1193
|
+
<tr>
|
|
1194
|
+
<td>logo-url</td>
|
|
1195
|
+
<td>Adresse du lien au clic sur l’image</td>
|
|
1196
|
+
<td>/</td>
|
|
1197
|
+
<td>Cible du lien contenant le logo</td>
|
|
1198
|
+
</tr>
|
|
1199
|
+
<tr>
|
|
1200
|
+
<td>logo-src</td>
|
|
1201
|
+
<td>Le chemin de l’image en thème clair.</td>
|
|
1202
|
+
<td>Le chemin vers l’image dist/img/QUEBEC_couleur.svg de la trousse</td>
|
|
1203
|
+
<td>Adresse de l'image du pied de page en thème clair (fond transparent, texte et drapeaux en couleur, voir <a href="#piv-footer-ex-2">l'exemple de pied de page PIV personnalisé</a>).</td>
|
|
1204
|
+
</tr>
|
|
1205
|
+
<tr>
|
|
1206
|
+
<td>logo-src-dark-theme</td>
|
|
1207
|
+
<td>Le chemin de l’image en thème sombre.</td>
|
|
1208
|
+
<td>Le chemin vers l’image dist/img/QUEBEC_blanc.svg de la trousse</td>
|
|
1209
|
+
<td>Adresse de l'image du pied de page en thème sombre (fond transparent, texte et drapeaux en blanc, voir <a href="#piv-footer-ex-2">l'exemple de pied de page PIV personnalisé</a>).</td>
|
|
1210
|
+
</tr>
|
|
1211
|
+
<tr>
|
|
1212
|
+
<td>logo-alt</td>
|
|
1213
|
+
<td>Texte</td>
|
|
1214
|
+
<td>
|
|
1215
|
+
<dl>
|
|
1216
|
+
<dt>Français</dt><dd>Logo du gouvernement du Québec</dd>
|
|
1217
|
+
<dt>Anglais</dt><dd>Logo of government of Québec</dd>
|
|
1218
|
+
</dl>
|
|
1219
|
+
</td>
|
|
1220
|
+
<td>Texte alternatif du logo pour les lecteurs d'écran</td>
|
|
1221
|
+
</tr>
|
|
1222
|
+
<tr>
|
|
1223
|
+
<td>logo-width</td>
|
|
1224
|
+
<td>Nombre</td>
|
|
1225
|
+
<td>139</td>
|
|
1226
|
+
<td>Largeur de l’image en px</td>
|
|
1227
|
+
</tr>
|
|
1228
|
+
<tr>
|
|
1229
|
+
<td>logo-height</td>
|
|
1230
|
+
<td>Nombre</td>
|
|
1231
|
+
<td>35</td>
|
|
1232
|
+
<td>Hauteur de l’image en px</td>
|
|
1233
|
+
</tr>
|
|
1234
|
+
<tr>
|
|
1235
|
+
<td>copyright-text</td>
|
|
1236
|
+
<td>Texte</td>
|
|
1237
|
+
<td>© Gouvernement du Québec, <année en cours AAAA></td>
|
|
1238
|
+
<td>Texte du lien de changement de langue</td>
|
|
1239
|
+
</tr>
|
|
1240
|
+
<tr>
|
|
1241
|
+
<td>copyright-url</td>
|
|
1242
|
+
<td>Adresse</td>
|
|
1243
|
+
<td>
|
|
1244
|
+
<dl>
|
|
1245
|
+
<dt>Français</dt><dd>https://www.quebec.ca/droit-auteur</dd>
|
|
1246
|
+
<dt>Anglais</dt><dd>https://www.quebec.ca/en/copyright</dd>
|
|
1247
|
+
</dl>
|
|
1248
|
+
</td>
|
|
1249
|
+
<td>L'adresse de la page du droit d'auteur sur quebec.ca</td>
|
|
1250
|
+
</tr>
|
|
1251
|
+
</tbody>
|
|
1252
|
+
</table>
|
|
1253
|
+
</div>
|
|
1101
1254
|
|
|
1255
|
+
<qc-notice type="information">Les images du pied de page PIV doivent respecter <qc-external-link><a href="https://www.piv.gouv.qc.ca/fileadmin/documents/guide/section1_general.pdf">les normes graphiques du système d’identification visuel</a>. Nous vous invitons à privilégier le format SVG, qui permet de conserver la lisibilité de l’image en cas de zoom..</qc-external-link></qc-notice>
|
|
1102
1256
|
|
|
1103
1257
|
<h5>Zones d'ajout de contenu HTML</h5>
|
|
1104
1258
|
|
|
1105
1259
|
<p>Ci-dessous, les zones d'ajout de contenu HTML (balise <slot>) délimitées en pointillé.</p>
|
|
1106
|
-
|
|
1107
|
-
|
|
1108
|
-
<
|
|
1109
|
-
|
|
1110
|
-
|
|
1111
|
-
|
|
1112
|
-
|
|
1113
|
-
|
|
1114
|
-
|
|
1115
|
-
|
|
1116
|
-
|
|
1117
|
-
|
|
1118
|
-
|
|
1119
|
-
</qc-piv-footer>
|
|
1120
|
-
<qc-code target-id="qc-piv-footer-slots"></qc-code>
|
|
1260
|
+
<qc-doc-exemple id="qc-piv-footer-slots"
|
|
1261
|
+
caption="Présentation des zones d'ajout de contenu du pied-de-page PIV">
|
|
1262
|
+
<qc-piv-footer>
|
|
1263
|
+
<div style="border:2px dashed;padding: var(--qc-spacer-xs);">
|
|
1264
|
+
Contenu par défaut
|
|
1265
|
+
</div>
|
|
1266
|
+
<div slot="copyright"
|
|
1267
|
+
style="border:2px dashed;padding: var(--qc-spacer-xs);">
|
|
1268
|
+
slot="copyright"
|
|
1269
|
+
</div>
|
|
1270
|
+
</qc-piv-footer>
|
|
1271
|
+
</qc-doc-exemple>
|
|
1272
|
+
<!-- <qc-code target-id="qc-piv-footer-slots"></qc-code>-->
|
|
1121
1273
|
|
|
1122
1274
|
<hr />
|
|
1123
1275
|
|
|
1124
1276
|
<!-- haut de page -->
|
|
1125
1277
|
<h2 id="toTop">Haut de page</h2>
|
|
1126
1278
|
<p>
|
|
1127
|
-
Le composant haut de page est la flèche qui permet à l'utilisateur de remonter vers le haut de page. Il s'affiche quand l'utilisateur commence à défiler vers le haut.
|
|
1279
|
+
Le composant <i>haut de page</i> est la flèche qui permet à l'utilisateur de remonter vers le haut de page. Il s'affiche quand l'utilisateur commence à défiler vers le haut.
|
|
1128
1280
|
Il disparaît quand l'utilisateur commence à défiler vers le bas.
|
|
1129
1281
|
</p>
|
|
1130
1282
|
<h4>Exemple</h4>
|
|
1131
|
-
<
|
|
1283
|
+
<qc-doc-exemple caption="Présentation du composant retour en haut de page"
|
|
1284
|
+
code-target-id="to-top-exemple"
|
|
1285
|
+
>
|
|
1132
1286
|
<qc-to-top demo="true" />
|
|
1133
|
-
</
|
|
1134
|
-
<div>
|
|
1135
|
-
<qc-to-top
|
|
1136
|
-
<qc-code target-id="pivToTopExample"></qc-code>
|
|
1287
|
+
</qc-doc-exemple>
|
|
1288
|
+
<div id="to-top-exemple">
|
|
1289
|
+
<qc-to-top></qc-to-top>
|
|
1137
1290
|
</div>
|
|
1138
1291
|
|
|
1139
1292
|
<h3>Documentation technique</h3>
|
|
1293
|
+
|
|
1140
1294
|
<h4>Attributs</h4>
|
|
1141
|
-
<
|
|
1295
|
+
<div class="table-overflow">
|
|
1142
1296
|
<table class="qc-table qc-striped">
|
|
1143
1297
|
<thead>
|
|
1144
1298
|
<tr>
|
|
@@ -1150,10 +1304,10 @@
|
|
|
1150
1304
|
</thead>
|
|
1151
1305
|
<tbody>
|
|
1152
1306
|
<tr>
|
|
1153
|
-
<td>
|
|
1307
|
+
<td>text</td>
|
|
1154
1308
|
<td>Texte</td>
|
|
1155
1309
|
<td>Retour en haut / Back to top</td>
|
|
1156
|
-
<td>la valeur de l'attribut "
|
|
1310
|
+
<td>la valeur de l'attribut "text" de l'élément.</td>
|
|
1157
1311
|
</tr>
|
|
1158
1312
|
<tr>
|
|
1159
1313
|
<td>demo</td>
|
|
@@ -1163,10 +1317,12 @@
|
|
|
1163
1317
|
</tr>
|
|
1164
1318
|
</tbody>
|
|
1165
1319
|
</table>
|
|
1320
|
+
</div>
|
|
1166
1321
|
</div>
|
|
1167
1322
|
</main>
|
|
1168
1323
|
<footer>
|
|
1169
1324
|
<qc-piv-footer></qc-piv-footer>
|
|
1170
1325
|
</footer>
|
|
1326
|
+
<script src='js/qc-doc-exemple.js'></script>
|
|
1171
1327
|
</body>
|
|
1172
1328
|
</html>
|