@patternfly/patternfly 6.3.0-prerelease.1 → 6.3.0-prerelease.3
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/components/Drawer/drawer.css +28 -14
- package/components/Drawer/drawer.scss +28 -9
- package/components/Tabs/tabs.css +65 -0
- package/components/Tabs/tabs.scss +77 -0
- package/components/_index.css +92 -14
- package/docs/components/Tabs/examples/Tabs.md +6741 -12
- package/docs/demos/Card/examples/Card.md +57 -0
- package/docs/demos/DescriptionList/examples/DescriptionList.md +38 -0
- package/docs/demos/Drawer/examples/Drawer.md +38 -0
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +76 -0
- package/docs/demos/Tabs/examples/Tabs.md +570 -0
- package/package.json +5 -5
- package/patternfly-no-globals.css +92 -14
- package/patternfly.css +92 -14
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -276,6 +276,25 @@ section: components
|
|
|
276
276
|
<button
|
|
277
277
|
type="button"
|
|
278
278
|
class="pf-v6-c-tabs__link"
|
|
279
|
+
onclick="
|
|
280
|
+
event.preventDefault();
|
|
281
|
+
((e) => {
|
|
282
|
+
const el = this,
|
|
283
|
+
li = this.closest('li'),
|
|
284
|
+
ul = this.closest('ul'),
|
|
285
|
+
tabs = this.closest('.pf-v6-c-tabs'),
|
|
286
|
+
left = Math.round(li.offsetLeft),
|
|
287
|
+
top = Math.round(li.offsetTop),
|
|
288
|
+
width = Math.round(li.offsetWidth),
|
|
289
|
+
height = Math.round(li.offsetHeight);
|
|
290
|
+
|
|
291
|
+
ul.querySelectorAll('li').forEach(function(el) {
|
|
292
|
+
el.classList.remove('pf-m-current')});
|
|
293
|
+
li.classList.add('pf-m-current');
|
|
294
|
+
tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
|
|
295
|
+
tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
|
|
296
|
+
}
|
|
297
|
+
)()"
|
|
279
298
|
role="tab"
|
|
280
299
|
aria-controls="tabs-tables-and-tabs-example-tabs-details-panel"
|
|
281
300
|
id="tabs-tables-and-tabs-example-tabs-details-link"
|
|
@@ -287,6 +306,25 @@ section: components
|
|
|
287
306
|
<button
|
|
288
307
|
type="button"
|
|
289
308
|
class="pf-v6-c-tabs__link"
|
|
309
|
+
onclick="
|
|
310
|
+
event.preventDefault();
|
|
311
|
+
((e) => {
|
|
312
|
+
const el = this,
|
|
313
|
+
li = this.closest('li'),
|
|
314
|
+
ul = this.closest('ul'),
|
|
315
|
+
tabs = this.closest('.pf-v6-c-tabs'),
|
|
316
|
+
left = Math.round(li.offsetLeft),
|
|
317
|
+
top = Math.round(li.offsetTop),
|
|
318
|
+
width = Math.round(li.offsetWidth),
|
|
319
|
+
height = Math.round(li.offsetHeight);
|
|
320
|
+
|
|
321
|
+
ul.querySelectorAll('li').forEach(function(el) {
|
|
322
|
+
el.classList.remove('pf-m-current')});
|
|
323
|
+
li.classList.add('pf-m-current');
|
|
324
|
+
tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
|
|
325
|
+
tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
|
|
326
|
+
}
|
|
327
|
+
)()"
|
|
290
328
|
role="tab"
|
|
291
329
|
aria-controls="tabs-tables-and-tabs-example-tabs-yaml-panel"
|
|
292
330
|
id="tabs-tables-and-tabs-example-tabs-yaml-link"
|
|
@@ -298,6 +336,25 @@ section: components
|
|
|
298
336
|
<button
|
|
299
337
|
type="button"
|
|
300
338
|
class="pf-v6-c-tabs__link"
|
|
339
|
+
onclick="
|
|
340
|
+
event.preventDefault();
|
|
341
|
+
((e) => {
|
|
342
|
+
const el = this,
|
|
343
|
+
li = this.closest('li'),
|
|
344
|
+
ul = this.closest('ul'),
|
|
345
|
+
tabs = this.closest('.pf-v6-c-tabs'),
|
|
346
|
+
left = Math.round(li.offsetLeft),
|
|
347
|
+
top = Math.round(li.offsetTop),
|
|
348
|
+
width = Math.round(li.offsetWidth),
|
|
349
|
+
height = Math.round(li.offsetHeight);
|
|
350
|
+
|
|
351
|
+
ul.querySelectorAll('li').forEach(function(el) {
|
|
352
|
+
el.classList.remove('pf-m-current')});
|
|
353
|
+
li.classList.add('pf-m-current');
|
|
354
|
+
tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
|
|
355
|
+
tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
|
|
356
|
+
}
|
|
357
|
+
)()"
|
|
301
358
|
role="tab"
|
|
302
359
|
aria-controls="tabs-tables-and-tabs-example-tabs-environment-panel"
|
|
303
360
|
id="tabs-tables-and-tabs-example-tabs-environment-link"
|
|
@@ -309,6 +366,25 @@ section: components
|
|
|
309
366
|
<button
|
|
310
367
|
type="button"
|
|
311
368
|
class="pf-v6-c-tabs__link"
|
|
369
|
+
onclick="
|
|
370
|
+
event.preventDefault();
|
|
371
|
+
((e) => {
|
|
372
|
+
const el = this,
|
|
373
|
+
li = this.closest('li'),
|
|
374
|
+
ul = this.closest('ul'),
|
|
375
|
+
tabs = this.closest('.pf-v6-c-tabs'),
|
|
376
|
+
left = Math.round(li.offsetLeft),
|
|
377
|
+
top = Math.round(li.offsetTop),
|
|
378
|
+
width = Math.round(li.offsetWidth),
|
|
379
|
+
height = Math.round(li.offsetHeight);
|
|
380
|
+
|
|
381
|
+
ul.querySelectorAll('li').forEach(function(el) {
|
|
382
|
+
el.classList.remove('pf-m-current')});
|
|
383
|
+
li.classList.add('pf-m-current');
|
|
384
|
+
tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
|
|
385
|
+
tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
|
|
386
|
+
}
|
|
387
|
+
)()"
|
|
312
388
|
role="tab"
|
|
313
389
|
aria-controls="tabs-tables-and-tabs-example-tabs-logs-panel"
|
|
314
390
|
id="tabs-tables-and-tabs-example-tabs-logs-link"
|
|
@@ -320,6 +396,25 @@ section: components
|
|
|
320
396
|
<button
|
|
321
397
|
type="button"
|
|
322
398
|
class="pf-v6-c-tabs__link"
|
|
399
|
+
onclick="
|
|
400
|
+
event.preventDefault();
|
|
401
|
+
((e) => {
|
|
402
|
+
const el = this,
|
|
403
|
+
li = this.closest('li'),
|
|
404
|
+
ul = this.closest('ul'),
|
|
405
|
+
tabs = this.closest('.pf-v6-c-tabs'),
|
|
406
|
+
left = Math.round(li.offsetLeft),
|
|
407
|
+
top = Math.round(li.offsetTop),
|
|
408
|
+
width = Math.round(li.offsetWidth),
|
|
409
|
+
height = Math.round(li.offsetHeight);
|
|
410
|
+
|
|
411
|
+
ul.querySelectorAll('li').forEach(function(el) {
|
|
412
|
+
el.classList.remove('pf-m-current')});
|
|
413
|
+
li.classList.add('pf-m-current');
|
|
414
|
+
tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
|
|
415
|
+
tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
|
|
416
|
+
}
|
|
417
|
+
)()"
|
|
323
418
|
role="tab"
|
|
324
419
|
aria-controls="tabs-tables-and-tabs-example-tabs-events-panel"
|
|
325
420
|
id="tabs-tables-and-tabs-example-tabs-events-link"
|
|
@@ -331,6 +426,25 @@ section: components
|
|
|
331
426
|
<button
|
|
332
427
|
type="button"
|
|
333
428
|
class="pf-v6-c-tabs__link"
|
|
429
|
+
onclick="
|
|
430
|
+
event.preventDefault();
|
|
431
|
+
((e) => {
|
|
432
|
+
const el = this,
|
|
433
|
+
li = this.closest('li'),
|
|
434
|
+
ul = this.closest('ul'),
|
|
435
|
+
tabs = this.closest('.pf-v6-c-tabs'),
|
|
436
|
+
left = Math.round(li.offsetLeft),
|
|
437
|
+
top = Math.round(li.offsetTop),
|
|
438
|
+
width = Math.round(li.offsetWidth),
|
|
439
|
+
height = Math.round(li.offsetHeight);
|
|
440
|
+
|
|
441
|
+
ul.querySelectorAll('li').forEach(function(el) {
|
|
442
|
+
el.classList.remove('pf-m-current')});
|
|
443
|
+
li.classList.add('pf-m-current');
|
|
444
|
+
tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
|
|
445
|
+
tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
|
|
446
|
+
}
|
|
447
|
+
)()"
|
|
334
448
|
role="tab"
|
|
335
449
|
aria-controls="tabs-tables-and-tabs-example-tabs-terminal-panel"
|
|
336
450
|
id="tabs-tables-and-tabs-example-tabs-terminal-link"
|
|
@@ -841,6 +955,25 @@ section: components
|
|
|
841
955
|
<button
|
|
842
956
|
type="button"
|
|
843
957
|
class="pf-v6-c-tabs__link"
|
|
958
|
+
onclick="
|
|
959
|
+
event.preventDefault();
|
|
960
|
+
((e) => {
|
|
961
|
+
const el = this,
|
|
962
|
+
li = this.closest('li'),
|
|
963
|
+
ul = this.closest('ul'),
|
|
964
|
+
tabs = this.closest('.pf-v6-c-tabs'),
|
|
965
|
+
left = Math.round(li.offsetLeft),
|
|
966
|
+
top = Math.round(li.offsetTop),
|
|
967
|
+
width = Math.round(li.offsetWidth),
|
|
968
|
+
height = Math.round(li.offsetHeight);
|
|
969
|
+
|
|
970
|
+
ul.querySelectorAll('li').forEach(function(el) {
|
|
971
|
+
el.classList.remove('pf-m-current')});
|
|
972
|
+
li.classList.add('pf-m-current');
|
|
973
|
+
tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
|
|
974
|
+
tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
|
|
975
|
+
}
|
|
976
|
+
)()"
|
|
844
977
|
role="tab"
|
|
845
978
|
aria-controls="tabs-tables-and-tabs-example-tabs-details-panel"
|
|
846
979
|
id="tabs-tables-and-tabs-example-tabs-details-link"
|
|
@@ -852,6 +985,25 @@ section: components
|
|
|
852
985
|
<button
|
|
853
986
|
type="button"
|
|
854
987
|
class="pf-v6-c-tabs__link"
|
|
988
|
+
onclick="
|
|
989
|
+
event.preventDefault();
|
|
990
|
+
((e) => {
|
|
991
|
+
const el = this,
|
|
992
|
+
li = this.closest('li'),
|
|
993
|
+
ul = this.closest('ul'),
|
|
994
|
+
tabs = this.closest('.pf-v6-c-tabs'),
|
|
995
|
+
left = Math.round(li.offsetLeft),
|
|
996
|
+
top = Math.round(li.offsetTop),
|
|
997
|
+
width = Math.round(li.offsetWidth),
|
|
998
|
+
height = Math.round(li.offsetHeight);
|
|
999
|
+
|
|
1000
|
+
ul.querySelectorAll('li').forEach(function(el) {
|
|
1001
|
+
el.classList.remove('pf-m-current')});
|
|
1002
|
+
li.classList.add('pf-m-current');
|
|
1003
|
+
tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
|
|
1004
|
+
tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
|
|
1005
|
+
}
|
|
1006
|
+
)()"
|
|
855
1007
|
role="tab"
|
|
856
1008
|
aria-controls="tabs-tables-and-tabs-example-tabs-yaml-panel"
|
|
857
1009
|
id="tabs-tables-and-tabs-example-tabs-yaml-link"
|
|
@@ -863,6 +1015,25 @@ section: components
|
|
|
863
1015
|
<button
|
|
864
1016
|
type="button"
|
|
865
1017
|
class="pf-v6-c-tabs__link"
|
|
1018
|
+
onclick="
|
|
1019
|
+
event.preventDefault();
|
|
1020
|
+
((e) => {
|
|
1021
|
+
const el = this,
|
|
1022
|
+
li = this.closest('li'),
|
|
1023
|
+
ul = this.closest('ul'),
|
|
1024
|
+
tabs = this.closest('.pf-v6-c-tabs'),
|
|
1025
|
+
left = Math.round(li.offsetLeft),
|
|
1026
|
+
top = Math.round(li.offsetTop),
|
|
1027
|
+
width = Math.round(li.offsetWidth),
|
|
1028
|
+
height = Math.round(li.offsetHeight);
|
|
1029
|
+
|
|
1030
|
+
ul.querySelectorAll('li').forEach(function(el) {
|
|
1031
|
+
el.classList.remove('pf-m-current')});
|
|
1032
|
+
li.classList.add('pf-m-current');
|
|
1033
|
+
tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
|
|
1034
|
+
tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
|
|
1035
|
+
}
|
|
1036
|
+
)()"
|
|
866
1037
|
role="tab"
|
|
867
1038
|
aria-controls="tabs-tables-and-tabs-example-tabs-environment-panel"
|
|
868
1039
|
id="tabs-tables-and-tabs-example-tabs-environment-link"
|
|
@@ -874,6 +1045,25 @@ section: components
|
|
|
874
1045
|
<button
|
|
875
1046
|
type="button"
|
|
876
1047
|
class="pf-v6-c-tabs__link"
|
|
1048
|
+
onclick="
|
|
1049
|
+
event.preventDefault();
|
|
1050
|
+
((e) => {
|
|
1051
|
+
const el = this,
|
|
1052
|
+
li = this.closest('li'),
|
|
1053
|
+
ul = this.closest('ul'),
|
|
1054
|
+
tabs = this.closest('.pf-v6-c-tabs'),
|
|
1055
|
+
left = Math.round(li.offsetLeft),
|
|
1056
|
+
top = Math.round(li.offsetTop),
|
|
1057
|
+
width = Math.round(li.offsetWidth),
|
|
1058
|
+
height = Math.round(li.offsetHeight);
|
|
1059
|
+
|
|
1060
|
+
ul.querySelectorAll('li').forEach(function(el) {
|
|
1061
|
+
el.classList.remove('pf-m-current')});
|
|
1062
|
+
li.classList.add('pf-m-current');
|
|
1063
|
+
tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
|
|
1064
|
+
tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
|
|
1065
|
+
}
|
|
1066
|
+
)()"
|
|
877
1067
|
role="tab"
|
|
878
1068
|
aria-controls="tabs-tables-and-tabs-example-tabs-logs-panel"
|
|
879
1069
|
id="tabs-tables-and-tabs-example-tabs-logs-link"
|
|
@@ -885,6 +1075,25 @@ section: components
|
|
|
885
1075
|
<button
|
|
886
1076
|
type="button"
|
|
887
1077
|
class="pf-v6-c-tabs__link"
|
|
1078
|
+
onclick="
|
|
1079
|
+
event.preventDefault();
|
|
1080
|
+
((e) => {
|
|
1081
|
+
const el = this,
|
|
1082
|
+
li = this.closest('li'),
|
|
1083
|
+
ul = this.closest('ul'),
|
|
1084
|
+
tabs = this.closest('.pf-v6-c-tabs'),
|
|
1085
|
+
left = Math.round(li.offsetLeft),
|
|
1086
|
+
top = Math.round(li.offsetTop),
|
|
1087
|
+
width = Math.round(li.offsetWidth),
|
|
1088
|
+
height = Math.round(li.offsetHeight);
|
|
1089
|
+
|
|
1090
|
+
ul.querySelectorAll('li').forEach(function(el) {
|
|
1091
|
+
el.classList.remove('pf-m-current')});
|
|
1092
|
+
li.classList.add('pf-m-current');
|
|
1093
|
+
tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
|
|
1094
|
+
tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
|
|
1095
|
+
}
|
|
1096
|
+
)()"
|
|
888
1097
|
role="tab"
|
|
889
1098
|
aria-controls="tabs-tables-and-tabs-example-tabs-events-panel"
|
|
890
1099
|
id="tabs-tables-and-tabs-example-tabs-events-link"
|
|
@@ -896,6 +1105,25 @@ section: components
|
|
|
896
1105
|
<button
|
|
897
1106
|
type="button"
|
|
898
1107
|
class="pf-v6-c-tabs__link"
|
|
1108
|
+
onclick="
|
|
1109
|
+
event.preventDefault();
|
|
1110
|
+
((e) => {
|
|
1111
|
+
const el = this,
|
|
1112
|
+
li = this.closest('li'),
|
|
1113
|
+
ul = this.closest('ul'),
|
|
1114
|
+
tabs = this.closest('.pf-v6-c-tabs'),
|
|
1115
|
+
left = Math.round(li.offsetLeft),
|
|
1116
|
+
top = Math.round(li.offsetTop),
|
|
1117
|
+
width = Math.round(li.offsetWidth),
|
|
1118
|
+
height = Math.round(li.offsetHeight);
|
|
1119
|
+
|
|
1120
|
+
ul.querySelectorAll('li').forEach(function(el) {
|
|
1121
|
+
el.classList.remove('pf-m-current')});
|
|
1122
|
+
li.classList.add('pf-m-current');
|
|
1123
|
+
tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
|
|
1124
|
+
tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
|
|
1125
|
+
}
|
|
1126
|
+
)()"
|
|
899
1127
|
role="tab"
|
|
900
1128
|
aria-controls="tabs-tables-and-tabs-example-tabs-terminal-panel"
|
|
901
1129
|
id="tabs-tables-and-tabs-example-tabs-terminal-link"
|
|
@@ -919,6 +1147,25 @@ section: components
|
|
|
919
1147
|
<button
|
|
920
1148
|
type="button"
|
|
921
1149
|
class="pf-v6-c-tabs__link"
|
|
1150
|
+
onclick="
|
|
1151
|
+
event.preventDefault();
|
|
1152
|
+
((e) => {
|
|
1153
|
+
const el = this,
|
|
1154
|
+
li = this.closest('li'),
|
|
1155
|
+
ul = this.closest('ul'),
|
|
1156
|
+
tabs = this.closest('.pf-v6-c-tabs'),
|
|
1157
|
+
left = Math.round(li.offsetLeft),
|
|
1158
|
+
top = Math.round(li.offsetTop),
|
|
1159
|
+
width = Math.round(li.offsetWidth),
|
|
1160
|
+
height = Math.round(li.offsetHeight);
|
|
1161
|
+
|
|
1162
|
+
ul.querySelectorAll('li').forEach(function(el) {
|
|
1163
|
+
el.classList.remove('pf-m-current')});
|
|
1164
|
+
li.classList.add('pf-m-current');
|
|
1165
|
+
tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
|
|
1166
|
+
tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
|
|
1167
|
+
}
|
|
1168
|
+
)()"
|
|
922
1169
|
role="tab"
|
|
923
1170
|
aria-controls="tabs-tables-and-tabs-example-tabs-secondary-pod-info-panel"
|
|
924
1171
|
id="tabs-tables-and-tabs-example-tabs-secondary-pod-info-link"
|
|
@@ -930,6 +1177,25 @@ section: components
|
|
|
930
1177
|
<button
|
|
931
1178
|
type="button"
|
|
932
1179
|
class="pf-v6-c-tabs__link"
|
|
1180
|
+
onclick="
|
|
1181
|
+
event.preventDefault();
|
|
1182
|
+
((e) => {
|
|
1183
|
+
const el = this,
|
|
1184
|
+
li = this.closest('li'),
|
|
1185
|
+
ul = this.closest('ul'),
|
|
1186
|
+
tabs = this.closest('.pf-v6-c-tabs'),
|
|
1187
|
+
left = Math.round(li.offsetLeft),
|
|
1188
|
+
top = Math.round(li.offsetTop),
|
|
1189
|
+
width = Math.round(li.offsetWidth),
|
|
1190
|
+
height = Math.round(li.offsetHeight);
|
|
1191
|
+
|
|
1192
|
+
ul.querySelectorAll('li').forEach(function(el) {
|
|
1193
|
+
el.classList.remove('pf-m-current')});
|
|
1194
|
+
li.classList.add('pf-m-current');
|
|
1195
|
+
tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
|
|
1196
|
+
tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
|
|
1197
|
+
}
|
|
1198
|
+
)()"
|
|
933
1199
|
role="tab"
|
|
934
1200
|
aria-controls="tabs-tables-and-tabs-example-tabs-secondary-editable-aspects-panel"
|
|
935
1201
|
id="tabs-tables-and-tabs-example-tabs-secondary-editable-aspects-link"
|
|
@@ -1408,6 +1674,25 @@ section: components
|
|
|
1408
1674
|
<button
|
|
1409
1675
|
type="button"
|
|
1410
1676
|
class="pf-v6-c-tabs__link"
|
|
1677
|
+
onclick="
|
|
1678
|
+
event.preventDefault();
|
|
1679
|
+
((e) => {
|
|
1680
|
+
const el = this,
|
|
1681
|
+
li = this.closest('li'),
|
|
1682
|
+
ul = this.closest('ul'),
|
|
1683
|
+
tabs = this.closest('.pf-v6-c-tabs'),
|
|
1684
|
+
left = Math.round(li.offsetLeft),
|
|
1685
|
+
top = Math.round(li.offsetTop),
|
|
1686
|
+
width = Math.round(li.offsetWidth),
|
|
1687
|
+
height = Math.round(li.offsetHeight);
|
|
1688
|
+
|
|
1689
|
+
ul.querySelectorAll('li').forEach(function(el) {
|
|
1690
|
+
el.classList.remove('pf-m-current')});
|
|
1691
|
+
li.classList.add('pf-m-current');
|
|
1692
|
+
tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
|
|
1693
|
+
tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
|
|
1694
|
+
}
|
|
1695
|
+
)()"
|
|
1411
1696
|
role="tab"
|
|
1412
1697
|
aria-controls="nested-tabs-example-tabs-tabs-cluster-1-panel"
|
|
1413
1698
|
id="nested-tabs-example-tabs-tabs-cluster-1-link"
|
|
@@ -1419,6 +1704,25 @@ section: components
|
|
|
1419
1704
|
<button
|
|
1420
1705
|
type="button"
|
|
1421
1706
|
class="pf-v6-c-tabs__link"
|
|
1707
|
+
onclick="
|
|
1708
|
+
event.preventDefault();
|
|
1709
|
+
((e) => {
|
|
1710
|
+
const el = this,
|
|
1711
|
+
li = this.closest('li'),
|
|
1712
|
+
ul = this.closest('ul'),
|
|
1713
|
+
tabs = this.closest('.pf-v6-c-tabs'),
|
|
1714
|
+
left = Math.round(li.offsetLeft),
|
|
1715
|
+
top = Math.round(li.offsetTop),
|
|
1716
|
+
width = Math.round(li.offsetWidth),
|
|
1717
|
+
height = Math.round(li.offsetHeight);
|
|
1718
|
+
|
|
1719
|
+
ul.querySelectorAll('li').forEach(function(el) {
|
|
1720
|
+
el.classList.remove('pf-m-current')});
|
|
1721
|
+
li.classList.add('pf-m-current');
|
|
1722
|
+
tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
|
|
1723
|
+
tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
|
|
1724
|
+
}
|
|
1725
|
+
)()"
|
|
1422
1726
|
role="tab"
|
|
1423
1727
|
aria-controls="nested-tabs-example-tabs-tabs-cluster-2-panel"
|
|
1424
1728
|
id="nested-tabs-example-tabs-tabs-cluster-2-link"
|
|
@@ -1464,6 +1768,25 @@ section: components
|
|
|
1464
1768
|
<button
|
|
1465
1769
|
type="button"
|
|
1466
1770
|
class="pf-v6-c-tabs__link"
|
|
1771
|
+
onclick="
|
|
1772
|
+
event.preventDefault();
|
|
1773
|
+
((e) => {
|
|
1774
|
+
const el = this,
|
|
1775
|
+
li = this.closest('li'),
|
|
1776
|
+
ul = this.closest('ul'),
|
|
1777
|
+
tabs = this.closest('.pf-v6-c-tabs'),
|
|
1778
|
+
left = Math.round(li.offsetLeft),
|
|
1779
|
+
top = Math.round(li.offsetTop),
|
|
1780
|
+
width = Math.round(li.offsetWidth),
|
|
1781
|
+
height = Math.round(li.offsetHeight);
|
|
1782
|
+
|
|
1783
|
+
ul.querySelectorAll('li').forEach(function(el) {
|
|
1784
|
+
el.classList.remove('pf-m-current')});
|
|
1785
|
+
li.classList.add('pf-m-current');
|
|
1786
|
+
tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
|
|
1787
|
+
tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
|
|
1788
|
+
}
|
|
1789
|
+
)()"
|
|
1467
1790
|
role="tab"
|
|
1468
1791
|
aria-controls="nested-tabs-example-tabs-tabs-subtabs-cluster-panel"
|
|
1469
1792
|
id="nested-tabs-example-tabs-tabs-subtabs-cluster-link"
|
|
@@ -1478,6 +1801,25 @@ section: components
|
|
|
1478
1801
|
<button
|
|
1479
1802
|
type="button"
|
|
1480
1803
|
class="pf-v6-c-tabs__link"
|
|
1804
|
+
onclick="
|
|
1805
|
+
event.preventDefault();
|
|
1806
|
+
((e) => {
|
|
1807
|
+
const el = this,
|
|
1808
|
+
li = this.closest('li'),
|
|
1809
|
+
ul = this.closest('ul'),
|
|
1810
|
+
tabs = this.closest('.pf-v6-c-tabs'),
|
|
1811
|
+
left = Math.round(li.offsetLeft),
|
|
1812
|
+
top = Math.round(li.offsetTop),
|
|
1813
|
+
width = Math.round(li.offsetWidth),
|
|
1814
|
+
height = Math.round(li.offsetHeight);
|
|
1815
|
+
|
|
1816
|
+
ul.querySelectorAll('li').forEach(function(el) {
|
|
1817
|
+
el.classList.remove('pf-m-current')});
|
|
1818
|
+
li.classList.add('pf-m-current');
|
|
1819
|
+
tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
|
|
1820
|
+
tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
|
|
1821
|
+
}
|
|
1822
|
+
)()"
|
|
1481
1823
|
role="tab"
|
|
1482
1824
|
aria-controls="nested-tabs-example-tabs-tabs-subtabs-control-plane-panel"
|
|
1483
1825
|
id="nested-tabs-example-tabs-tabs-subtabs-control-plane-link"
|
|
@@ -1494,6 +1836,25 @@ section: components
|
|
|
1494
1836
|
<button
|
|
1495
1837
|
type="button"
|
|
1496
1838
|
class="pf-v6-c-tabs__link"
|
|
1839
|
+
onclick="
|
|
1840
|
+
event.preventDefault();
|
|
1841
|
+
((e) => {
|
|
1842
|
+
const el = this,
|
|
1843
|
+
li = this.closest('li'),
|
|
1844
|
+
ul = this.closest('ul'),
|
|
1845
|
+
tabs = this.closest('.pf-v6-c-tabs'),
|
|
1846
|
+
left = Math.round(li.offsetLeft),
|
|
1847
|
+
top = Math.round(li.offsetTop),
|
|
1848
|
+
width = Math.round(li.offsetWidth),
|
|
1849
|
+
height = Math.round(li.offsetHeight);
|
|
1850
|
+
|
|
1851
|
+
ul.querySelectorAll('li').forEach(function(el) {
|
|
1852
|
+
el.classList.remove('pf-m-current')});
|
|
1853
|
+
li.classList.add('pf-m-current');
|
|
1854
|
+
tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
|
|
1855
|
+
tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
|
|
1856
|
+
}
|
|
1857
|
+
)()"
|
|
1497
1858
|
role="tab"
|
|
1498
1859
|
aria-controls="nested-tabs-example-tabs-tabs-subtabs-operators-panel"
|
|
1499
1860
|
id="nested-tabs-example-tabs-tabs-subtabs-operators-link"
|
|
@@ -1510,6 +1871,25 @@ section: components
|
|
|
1510
1871
|
<button
|
|
1511
1872
|
type="button"
|
|
1512
1873
|
class="pf-v6-c-tabs__link"
|
|
1874
|
+
onclick="
|
|
1875
|
+
event.preventDefault();
|
|
1876
|
+
((e) => {
|
|
1877
|
+
const el = this,
|
|
1878
|
+
li = this.closest('li'),
|
|
1879
|
+
ul = this.closest('ul'),
|
|
1880
|
+
tabs = this.closest('.pf-v6-c-tabs'),
|
|
1881
|
+
left = Math.round(li.offsetLeft),
|
|
1882
|
+
top = Math.round(li.offsetTop),
|
|
1883
|
+
width = Math.round(li.offsetWidth),
|
|
1884
|
+
height = Math.round(li.offsetHeight);
|
|
1885
|
+
|
|
1886
|
+
ul.querySelectorAll('li').forEach(function(el) {
|
|
1887
|
+
el.classList.remove('pf-m-current')});
|
|
1888
|
+
li.classList.add('pf-m-current');
|
|
1889
|
+
tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
|
|
1890
|
+
tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
|
|
1891
|
+
}
|
|
1892
|
+
)()"
|
|
1513
1893
|
role="tab"
|
|
1514
1894
|
aria-controls="nested-tabs-example-tabs-tabs-subtabs-virtualization-panel"
|
|
1515
1895
|
id="nested-tabs-example-tabs-tabs-subtabs-virtualization-link"
|
|
@@ -2581,6 +2961,25 @@ section: components
|
|
|
2581
2961
|
<button
|
|
2582
2962
|
type="button"
|
|
2583
2963
|
class="pf-v6-c-tabs__link"
|
|
2964
|
+
onclick="
|
|
2965
|
+
event.preventDefault();
|
|
2966
|
+
((e) => {
|
|
2967
|
+
const el = this,
|
|
2968
|
+
li = this.closest('li'),
|
|
2969
|
+
ul = this.closest('ul'),
|
|
2970
|
+
tabs = this.closest('.pf-v6-c-tabs'),
|
|
2971
|
+
left = Math.round(li.offsetLeft),
|
|
2972
|
+
top = Math.round(li.offsetTop),
|
|
2973
|
+
width = Math.round(li.offsetWidth),
|
|
2974
|
+
height = Math.round(li.offsetHeight);
|
|
2975
|
+
|
|
2976
|
+
ul.querySelectorAll('li').forEach(function(el) {
|
|
2977
|
+
el.classList.remove('pf-m-current')});
|
|
2978
|
+
li.classList.add('pf-m-current');
|
|
2979
|
+
tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
|
|
2980
|
+
tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
|
|
2981
|
+
}
|
|
2982
|
+
)()"
|
|
2584
2983
|
role="tab"
|
|
2585
2984
|
aria-controls="-tabs-tab1-panel"
|
|
2586
2985
|
id="-tabs-tab1-link"
|
|
@@ -2592,6 +2991,25 @@ section: components
|
|
|
2592
2991
|
<button
|
|
2593
2992
|
type="button"
|
|
2594
2993
|
class="pf-v6-c-tabs__link"
|
|
2994
|
+
onclick="
|
|
2995
|
+
event.preventDefault();
|
|
2996
|
+
((e) => {
|
|
2997
|
+
const el = this,
|
|
2998
|
+
li = this.closest('li'),
|
|
2999
|
+
ul = this.closest('ul'),
|
|
3000
|
+
tabs = this.closest('.pf-v6-c-tabs'),
|
|
3001
|
+
left = Math.round(li.offsetLeft),
|
|
3002
|
+
top = Math.round(li.offsetTop),
|
|
3003
|
+
width = Math.round(li.offsetWidth),
|
|
3004
|
+
height = Math.round(li.offsetHeight);
|
|
3005
|
+
|
|
3006
|
+
ul.querySelectorAll('li').forEach(function(el) {
|
|
3007
|
+
el.classList.remove('pf-m-current')});
|
|
3008
|
+
li.classList.add('pf-m-current');
|
|
3009
|
+
tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
|
|
3010
|
+
tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
|
|
3011
|
+
}
|
|
3012
|
+
)()"
|
|
2595
3013
|
role="tab"
|
|
2596
3014
|
aria-controls="-tabs-tab2-panel"
|
|
2597
3015
|
id="-tabs-tab2-link"
|
|
@@ -2808,6 +3226,25 @@ section: components
|
|
|
2808
3226
|
<button
|
|
2809
3227
|
type="button"
|
|
2810
3228
|
class="pf-v6-c-tabs__link"
|
|
3229
|
+
onclick="
|
|
3230
|
+
event.preventDefault();
|
|
3231
|
+
((e) => {
|
|
3232
|
+
const el = this,
|
|
3233
|
+
li = this.closest('li'),
|
|
3234
|
+
ul = this.closest('ul'),
|
|
3235
|
+
tabs = this.closest('.pf-v6-c-tabs'),
|
|
3236
|
+
left = Math.round(li.offsetLeft),
|
|
3237
|
+
top = Math.round(li.offsetTop),
|
|
3238
|
+
width = Math.round(li.offsetWidth),
|
|
3239
|
+
height = Math.round(li.offsetHeight);
|
|
3240
|
+
|
|
3241
|
+
ul.querySelectorAll('li').forEach(function(el) {
|
|
3242
|
+
el.classList.remove('pf-m-current')});
|
|
3243
|
+
li.classList.add('pf-m-current');
|
|
3244
|
+
tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
|
|
3245
|
+
tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
|
|
3246
|
+
}
|
|
3247
|
+
)()"
|
|
2811
3248
|
role="tab"
|
|
2812
3249
|
aria-controls="modal-tabs-example-tabs-details-panel"
|
|
2813
3250
|
id="modal-tabs-example-tabs-details-link"
|
|
@@ -2819,6 +3256,25 @@ section: components
|
|
|
2819
3256
|
<button
|
|
2820
3257
|
type="button"
|
|
2821
3258
|
class="pf-v6-c-tabs__link"
|
|
3259
|
+
onclick="
|
|
3260
|
+
event.preventDefault();
|
|
3261
|
+
((e) => {
|
|
3262
|
+
const el = this,
|
|
3263
|
+
li = this.closest('li'),
|
|
3264
|
+
ul = this.closest('ul'),
|
|
3265
|
+
tabs = this.closest('.pf-v6-c-tabs'),
|
|
3266
|
+
left = Math.round(li.offsetLeft),
|
|
3267
|
+
top = Math.round(li.offsetTop),
|
|
3268
|
+
width = Math.round(li.offsetWidth),
|
|
3269
|
+
height = Math.round(li.offsetHeight);
|
|
3270
|
+
|
|
3271
|
+
ul.querySelectorAll('li').forEach(function(el) {
|
|
3272
|
+
el.classList.remove('pf-m-current')});
|
|
3273
|
+
li.classList.add('pf-m-current');
|
|
3274
|
+
tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
|
|
3275
|
+
tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
|
|
3276
|
+
}
|
|
3277
|
+
)()"
|
|
2822
3278
|
role="tab"
|
|
2823
3279
|
aria-controls="modal-tabs-example-tabs-documentation-panel"
|
|
2824
3280
|
id="modal-tabs-example-tabs-documentation-link"
|
|
@@ -3444,6 +3900,25 @@ section: components
|
|
|
3444
3900
|
<button
|
|
3445
3901
|
type="button"
|
|
3446
3902
|
class="pf-v6-c-tabs__link"
|
|
3903
|
+
onclick="
|
|
3904
|
+
event.preventDefault();
|
|
3905
|
+
((e) => {
|
|
3906
|
+
const el = this,
|
|
3907
|
+
li = this.closest('li'),
|
|
3908
|
+
ul = this.closest('ul'),
|
|
3909
|
+
tabs = this.closest('.pf-v6-c-tabs'),
|
|
3910
|
+
left = Math.round(li.offsetLeft),
|
|
3911
|
+
top = Math.round(li.offsetTop),
|
|
3912
|
+
width = Math.round(li.offsetWidth),
|
|
3913
|
+
height = Math.round(li.offsetHeight);
|
|
3914
|
+
|
|
3915
|
+
ul.querySelectorAll('li').forEach(function(el) {
|
|
3916
|
+
el.classList.remove('pf-m-current')});
|
|
3917
|
+
li.classList.add('pf-m-current');
|
|
3918
|
+
tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
|
|
3919
|
+
tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
|
|
3920
|
+
}
|
|
3921
|
+
)()"
|
|
3447
3922
|
role="tab"
|
|
3448
3923
|
aria-controls="gray-tabs-example-tabs-tabs-new-panel"
|
|
3449
3924
|
id="gray-tabs-example-tabs-tabs-new-link"
|
|
@@ -3455,6 +3930,25 @@ section: components
|
|
|
3455
3930
|
<button
|
|
3456
3931
|
type="button"
|
|
3457
3932
|
class="pf-v6-c-tabs__link"
|
|
3933
|
+
onclick="
|
|
3934
|
+
event.preventDefault();
|
|
3935
|
+
((e) => {
|
|
3936
|
+
const el = this,
|
|
3937
|
+
li = this.closest('li'),
|
|
3938
|
+
ul = this.closest('ul'),
|
|
3939
|
+
tabs = this.closest('.pf-v6-c-tabs'),
|
|
3940
|
+
left = Math.round(li.offsetLeft),
|
|
3941
|
+
top = Math.round(li.offsetTop),
|
|
3942
|
+
width = Math.round(li.offsetWidth),
|
|
3943
|
+
height = Math.round(li.offsetHeight);
|
|
3944
|
+
|
|
3945
|
+
ul.querySelectorAll('li').forEach(function(el) {
|
|
3946
|
+
el.classList.remove('pf-m-current')});
|
|
3947
|
+
li.classList.add('pf-m-current');
|
|
3948
|
+
tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
|
|
3949
|
+
tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
|
|
3950
|
+
}
|
|
3951
|
+
)()"
|
|
3458
3952
|
role="tab"
|
|
3459
3953
|
aria-controls="gray-tabs-example-tabs-tabs-get-started-panel"
|
|
3460
3954
|
id="gray-tabs-example-tabs-tabs-get-started-link"
|
|
@@ -3466,6 +3960,25 @@ section: components
|
|
|
3466
3960
|
<button
|
|
3467
3961
|
type="button"
|
|
3468
3962
|
class="pf-v6-c-tabs__link"
|
|
3963
|
+
onclick="
|
|
3964
|
+
event.preventDefault();
|
|
3965
|
+
((e) => {
|
|
3966
|
+
const el = this,
|
|
3967
|
+
li = this.closest('li'),
|
|
3968
|
+
ul = this.closest('ul'),
|
|
3969
|
+
tabs = this.closest('.pf-v6-c-tabs'),
|
|
3970
|
+
left = Math.round(li.offsetLeft),
|
|
3971
|
+
top = Math.round(li.offsetTop),
|
|
3972
|
+
width = Math.round(li.offsetWidth),
|
|
3973
|
+
height = Math.round(li.offsetHeight);
|
|
3974
|
+
|
|
3975
|
+
ul.querySelectorAll('li').forEach(function(el) {
|
|
3976
|
+
el.classList.remove('pf-m-current')});
|
|
3977
|
+
li.classList.add('pf-m-current');
|
|
3978
|
+
tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
|
|
3979
|
+
tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
|
|
3980
|
+
}
|
|
3981
|
+
)()"
|
|
3469
3982
|
role="tab"
|
|
3470
3983
|
aria-controls="gray-tabs-example-tabs-tabs-knowledge-panel"
|
|
3471
3984
|
id="gray-tabs-example-tabs-tabs-knowledge-link"
|
|
@@ -3477,6 +3990,25 @@ section: components
|
|
|
3477
3990
|
<button
|
|
3478
3991
|
type="button"
|
|
3479
3992
|
class="pf-v6-c-tabs__link"
|
|
3993
|
+
onclick="
|
|
3994
|
+
event.preventDefault();
|
|
3995
|
+
((e) => {
|
|
3996
|
+
const el = this,
|
|
3997
|
+
li = this.closest('li'),
|
|
3998
|
+
ul = this.closest('ul'),
|
|
3999
|
+
tabs = this.closest('.pf-v6-c-tabs'),
|
|
4000
|
+
left = Math.round(li.offsetLeft),
|
|
4001
|
+
top = Math.round(li.offsetTop),
|
|
4002
|
+
width = Math.round(li.offsetWidth),
|
|
4003
|
+
height = Math.round(li.offsetHeight);
|
|
4004
|
+
|
|
4005
|
+
ul.querySelectorAll('li').forEach(function(el) {
|
|
4006
|
+
el.classList.remove('pf-m-current')});
|
|
4007
|
+
li.classList.add('pf-m-current');
|
|
4008
|
+
tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
|
|
4009
|
+
tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
|
|
4010
|
+
}
|
|
4011
|
+
)()"
|
|
3480
4012
|
role="tab"
|
|
3481
4013
|
aria-controls="gray-tabs-example-tabs-tabs-support-panel"
|
|
3482
4014
|
id="gray-tabs-example-tabs-tabs-support-link"
|
|
@@ -3528,6 +4060,25 @@ section: components
|
|
|
3528
4060
|
<button
|
|
3529
4061
|
type="button"
|
|
3530
4062
|
class="pf-v6-c-tabs__link"
|
|
4063
|
+
onclick="
|
|
4064
|
+
event.preventDefault();
|
|
4065
|
+
((e) => {
|
|
4066
|
+
const el = this,
|
|
4067
|
+
li = this.closest('li'),
|
|
4068
|
+
ul = this.closest('ul'),
|
|
4069
|
+
tabs = this.closest('.pf-v6-c-tabs'),
|
|
4070
|
+
left = Math.round(li.offsetLeft),
|
|
4071
|
+
top = Math.round(li.offsetTop),
|
|
4072
|
+
width = Math.round(li.offsetWidth),
|
|
4073
|
+
height = Math.round(li.offsetHeight);
|
|
4074
|
+
|
|
4075
|
+
ul.querySelectorAll('li').forEach(function(el) {
|
|
4076
|
+
el.classList.remove('pf-m-current')});
|
|
4077
|
+
li.classList.add('pf-m-current');
|
|
4078
|
+
tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
|
|
4079
|
+
tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
|
|
4080
|
+
}
|
|
4081
|
+
)()"
|
|
3531
4082
|
role="tab"
|
|
3532
4083
|
aria-controls="gray-tabs-example-tabs-subtabs-x86-panel"
|
|
3533
4084
|
id="gray-tabs-example-tabs-subtabs-x86-link"
|
|
@@ -3539,6 +4090,25 @@ section: components
|
|
|
3539
4090
|
<button
|
|
3540
4091
|
type="button"
|
|
3541
4092
|
class="pf-v6-c-tabs__link"
|
|
4093
|
+
onclick="
|
|
4094
|
+
event.preventDefault();
|
|
4095
|
+
((e) => {
|
|
4096
|
+
const el = this,
|
|
4097
|
+
li = this.closest('li'),
|
|
4098
|
+
ul = this.closest('ul'),
|
|
4099
|
+
tabs = this.closest('.pf-v6-c-tabs'),
|
|
4100
|
+
left = Math.round(li.offsetLeft),
|
|
4101
|
+
top = Math.round(li.offsetTop),
|
|
4102
|
+
width = Math.round(li.offsetWidth),
|
|
4103
|
+
height = Math.round(li.offsetHeight);
|
|
4104
|
+
|
|
4105
|
+
ul.querySelectorAll('li').forEach(function(el) {
|
|
4106
|
+
el.classList.remove('pf-m-current')});
|
|
4107
|
+
li.classList.add('pf-m-current');
|
|
4108
|
+
tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
|
|
4109
|
+
tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
|
|
4110
|
+
}
|
|
4111
|
+
)()"
|
|
3542
4112
|
role="tab"
|
|
3543
4113
|
aria-controls="gray-tabs-example-tabs-subtabs-additional-architectures-panel"
|
|
3544
4114
|
id="gray-tabs-example-tabs-subtabs-additional-architectures-link"
|