@patternfly/patternfly 4.186.1 → 4.189.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/components/Card/card.css +2 -0
- package/components/Card/card.scss +2 -0
- package/components/FormControl/form-control.css +7 -0
- package/components/FormControl/form-control.scss +11 -0
- package/components/Page/themes/dark/page.scss +1 -0
- package/components/Tabs/tabs.css +97 -13
- package/components/Tabs/tabs.scss +134 -23
- package/docs/components/FormControl/examples/FormControl.md +16 -0
- package/docs/components/TabContent/examples/TabContent.md +8 -13
- package/docs/components/Tabs/examples/Tabs.md +1607 -31
- package/docs/demos/DataList/examples/DataList.md +12 -0
- package/docs/demos/Tabs/examples/Tabs.md +183 -191
- package/package.json +1 -1
- package/patternfly-no-reset.css +106 -13
- package/patternfly-theme-dark-prefers-color-scheme.css +701 -0
- package/patternfly-theme-dark-prefers-color-scheme.scss +5 -0
- package/patternfly-theme-dark.css +1 -1
- package/patternfly-theme-dark.scss +0 -2
- package/patternfly.css +106 -13
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/themes/dark/_patternfly-theme-dark.scss +1 -1
|
@@ -427,7 +427,7 @@ cssPrefix: pf-c-tabs
|
|
|
427
427
|
```html
|
|
428
428
|
<div
|
|
429
429
|
class="pf-c-tabs pf-m-box pf-m-color-scheme--light-300"
|
|
430
|
-
id="
|
|
430
|
+
id="box-tabs-alt-color-scheme"
|
|
431
431
|
>
|
|
432
432
|
<button
|
|
433
433
|
class="pf-c-tabs__scroll-button"
|
|
@@ -439,14 +439,14 @@ cssPrefix: pf-c-tabs
|
|
|
439
439
|
</button>
|
|
440
440
|
<ul class="pf-c-tabs__list">
|
|
441
441
|
<li class="pf-c-tabs__item">
|
|
442
|
-
<button class="pf-c-tabs__link" id="
|
|
442
|
+
<button class="pf-c-tabs__link" id="box-tabs-alt-color-scheme-users-link">
|
|
443
443
|
<span class="pf-c-tabs__item-text">Users</span>
|
|
444
444
|
</button>
|
|
445
445
|
</li>
|
|
446
446
|
<li class="pf-c-tabs__item pf-m-current">
|
|
447
447
|
<button
|
|
448
448
|
class="pf-c-tabs__link"
|
|
449
|
-
id="
|
|
449
|
+
id="box-tabs-alt-color-scheme-containers-link"
|
|
450
450
|
>
|
|
451
451
|
<span class="pf-c-tabs__item-text">Containers</span>
|
|
452
452
|
</button>
|
|
@@ -454,7 +454,7 @@ cssPrefix: pf-c-tabs
|
|
|
454
454
|
<li class="pf-c-tabs__item">
|
|
455
455
|
<button
|
|
456
456
|
class="pf-c-tabs__link"
|
|
457
|
-
id="
|
|
457
|
+
id="box-tabs-alt-color-scheme-database-link"
|
|
458
458
|
>
|
|
459
459
|
<span class="pf-c-tabs__item-text">Database</span>
|
|
460
460
|
</button>
|
|
@@ -464,7 +464,7 @@ cssPrefix: pf-c-tabs
|
|
|
464
464
|
<button
|
|
465
465
|
class="pf-c-tabs__link"
|
|
466
466
|
disabled
|
|
467
|
-
id="
|
|
467
|
+
id="box-tabs-alt-color-scheme-disabled-link"
|
|
468
468
|
>
|
|
469
469
|
<span class="pf-c-tabs__item-text">Disabled</span>
|
|
470
470
|
</button>
|
|
@@ -473,7 +473,7 @@ cssPrefix: pf-c-tabs
|
|
|
473
473
|
<button
|
|
474
474
|
class="pf-c-tabs__link pf-m-aria-disabled"
|
|
475
475
|
aria-disabled="true"
|
|
476
|
-
id="
|
|
476
|
+
id="box-tabs-alt-color-scheme-aria-disabled-link"
|
|
477
477
|
>
|
|
478
478
|
<span class="pf-c-tabs__item-text">ARIA disabled</span>
|
|
479
479
|
</button>
|
|
@@ -481,7 +481,7 @@ cssPrefix: pf-c-tabs
|
|
|
481
481
|
<li class="pf-c-tabs__item">
|
|
482
482
|
<button
|
|
483
483
|
class="pf-c-tabs__link"
|
|
484
|
-
id="
|
|
484
|
+
id="box-tabs-alt-color-scheme-network-wired-link"
|
|
485
485
|
>
|
|
486
486
|
<span class="pf-c-tabs__item-text">Network</span>
|
|
487
487
|
</button>
|
|
@@ -706,24 +706,24 @@ cssPrefix: pf-c-tabs
|
|
|
706
706
|
<ul class="pf-c-tabs__list">
|
|
707
707
|
<li class="pf-c-tabs__item">
|
|
708
708
|
<button class="pf-c-tabs__link" id="icons-example-users-link">
|
|
709
|
-
<span class="pf-c-tabs__item-icon"
|
|
710
|
-
<i class="fas fa-fas fa-users"></i>
|
|
709
|
+
<span class="pf-c-tabs__item-icon">
|
|
710
|
+
<i class="fas fa-fas fa-users" aria-hidden="true"></i>
|
|
711
711
|
</span>
|
|
712
712
|
<span class="pf-c-tabs__item-text">Users</span>
|
|
713
713
|
</button>
|
|
714
714
|
</li>
|
|
715
715
|
<li class="pf-c-tabs__item pf-m-current">
|
|
716
716
|
<button class="pf-c-tabs__link" id="icons-example-containers-link">
|
|
717
|
-
<span class="pf-c-tabs__item-icon"
|
|
718
|
-
<i class="fas fa-fas fa-box"></i>
|
|
717
|
+
<span class="pf-c-tabs__item-icon">
|
|
718
|
+
<i class="fas fa-fas fa-box" aria-hidden="true"></i>
|
|
719
719
|
</span>
|
|
720
720
|
<span class="pf-c-tabs__item-text">Containers</span>
|
|
721
721
|
</button>
|
|
722
722
|
</li>
|
|
723
723
|
<li class="pf-c-tabs__item">
|
|
724
724
|
<button class="pf-c-tabs__link" id="icons-example-database-link">
|
|
725
|
-
<span class="pf-c-tabs__item-icon"
|
|
726
|
-
<i class="fas fa-database"></i>
|
|
725
|
+
<span class="pf-c-tabs__item-icon">
|
|
726
|
+
<i class="fas fa-database" aria-hidden="true"></i>
|
|
727
727
|
</span>
|
|
728
728
|
<span class="pf-c-tabs__item-text">Database</span>
|
|
729
729
|
</button>
|
|
@@ -731,24 +731,24 @@ cssPrefix: pf-c-tabs
|
|
|
731
731
|
|
|
732
732
|
<li class="pf-c-tabs__item">
|
|
733
733
|
<button class="pf-c-tabs__link" id="icons-example-server-link">
|
|
734
|
-
<span class="pf-c-tabs__item-icon"
|
|
735
|
-
<i class="fas fa-server"></i>
|
|
734
|
+
<span class="pf-c-tabs__item-icon">
|
|
735
|
+
<i class="fas fa-server" aria-hidden="true"></i>
|
|
736
736
|
</span>
|
|
737
737
|
<span class="pf-c-tabs__item-text">Server</span>
|
|
738
738
|
</button>
|
|
739
739
|
</li>
|
|
740
740
|
<li class="pf-c-tabs__item">
|
|
741
741
|
<button class="pf-c-tabs__link" id="icons-example-system-link">
|
|
742
|
-
<span class="pf-c-tabs__item-icon"
|
|
743
|
-
<i class="fas fa-laptop"></i>
|
|
742
|
+
<span class="pf-c-tabs__item-icon">
|
|
743
|
+
<i class="fas fa-laptop" aria-hidden="true"></i>
|
|
744
744
|
</span>
|
|
745
745
|
<span class="pf-c-tabs__item-text">System</span>
|
|
746
746
|
</button>
|
|
747
747
|
</li>
|
|
748
748
|
<li class="pf-c-tabs__item">
|
|
749
749
|
<button class="pf-c-tabs__link" id="icons-example-network-wired-link">
|
|
750
|
-
<span class="pf-c-tabs__item-icon"
|
|
751
|
-
<i class="fas fa-project-diagram"></i>
|
|
750
|
+
<span class="pf-c-tabs__item-icon">
|
|
751
|
+
<i class="fas fa-project-diagram" aria-hidden="true"></i>
|
|
752
752
|
</span>
|
|
753
753
|
<span class="pf-c-tabs__item-text">Network</span>
|
|
754
754
|
</button>
|
|
@@ -1018,8 +1018,8 @@ cssPrefix: pf-c-tabs
|
|
|
1018
1018
|
<ul class="pf-c-tabs__list">
|
|
1019
1019
|
<li class="pf-c-tabs__item">
|
|
1020
1020
|
<button class="pf-c-tabs__link" id="filled-with-icons-example-users-link">
|
|
1021
|
-
<span class="pf-c-tabs__item-icon"
|
|
1022
|
-
<i class="fas fa-fas fa-users"></i>
|
|
1021
|
+
<span class="pf-c-tabs__item-icon">
|
|
1022
|
+
<i class="fas fa-fas fa-users" aria-hidden="true"></i>
|
|
1023
1023
|
</span>
|
|
1024
1024
|
<span class="pf-c-tabs__item-text">Users</span>
|
|
1025
1025
|
</button>
|
|
@@ -1029,8 +1029,8 @@ cssPrefix: pf-c-tabs
|
|
|
1029
1029
|
class="pf-c-tabs__link"
|
|
1030
1030
|
id="filled-with-icons-example-containers-link"
|
|
1031
1031
|
>
|
|
1032
|
-
<span class="pf-c-tabs__item-icon"
|
|
1033
|
-
<i class="fas fa-fas fa-box"></i>
|
|
1032
|
+
<span class="pf-c-tabs__item-icon">
|
|
1033
|
+
<i class="fas fa-fas fa-box" aria-hidden="true"></i>
|
|
1034
1034
|
</span>
|
|
1035
1035
|
<span class="pf-c-tabs__item-text">Containers</span>
|
|
1036
1036
|
</button>
|
|
@@ -1040,8 +1040,8 @@ cssPrefix: pf-c-tabs
|
|
|
1040
1040
|
class="pf-c-tabs__link"
|
|
1041
1041
|
id="filled-with-icons-example-database-link"
|
|
1042
1042
|
>
|
|
1043
|
-
<span class="pf-c-tabs__item-icon"
|
|
1044
|
-
<i class="fas fa-database"></i>
|
|
1043
|
+
<span class="pf-c-tabs__item-icon">
|
|
1044
|
+
<i class="fas fa-database" aria-hidden="true"></i>
|
|
1045
1045
|
</span>
|
|
1046
1046
|
<span class="pf-c-tabs__item-text">Database</span>
|
|
1047
1047
|
</button>
|
|
@@ -1120,8 +1120,8 @@ cssPrefix: pf-c-tabs
|
|
|
1120
1120
|
class="pf-c-tabs__link"
|
|
1121
1121
|
id="filled-box-with-icons-example-users-link"
|
|
1122
1122
|
>
|
|
1123
|
-
<span class="pf-c-tabs__item-icon"
|
|
1124
|
-
<i class="fas fa-fas fa-users"></i>
|
|
1123
|
+
<span class="pf-c-tabs__item-icon">
|
|
1124
|
+
<i class="fas fa-fas fa-users" aria-hidden="true"></i>
|
|
1125
1125
|
</span>
|
|
1126
1126
|
<span class="pf-c-tabs__item-text">Users</span>
|
|
1127
1127
|
</button>
|
|
@@ -1131,8 +1131,8 @@ cssPrefix: pf-c-tabs
|
|
|
1131
1131
|
class="pf-c-tabs__link"
|
|
1132
1132
|
id="filled-box-with-icons-example-containers-link"
|
|
1133
1133
|
>
|
|
1134
|
-
<span class="pf-c-tabs__item-icon"
|
|
1135
|
-
<i class="fas fa-fas fa-box"></i>
|
|
1134
|
+
<span class="pf-c-tabs__item-icon">
|
|
1135
|
+
<i class="fas fa-fas fa-box" aria-hidden="true"></i>
|
|
1136
1136
|
</span>
|
|
1137
1137
|
<span class="pf-c-tabs__item-text">Containers</span>
|
|
1138
1138
|
</button>
|
|
@@ -1142,8 +1142,8 @@ cssPrefix: pf-c-tabs
|
|
|
1142
1142
|
class="pf-c-tabs__link"
|
|
1143
1143
|
id="filled-box-with-icons-example-database-link"
|
|
1144
1144
|
>
|
|
1145
|
-
<span class="pf-c-tabs__item-icon"
|
|
1146
|
-
<i class="fas fa-database"></i>
|
|
1145
|
+
<span class="pf-c-tabs__item-icon">
|
|
1146
|
+
<i class="fas fa-database" aria-hidden="true"></i>
|
|
1147
1147
|
</span>
|
|
1148
1148
|
<span class="pf-c-tabs__item-text">Database</span>
|
|
1149
1149
|
</button>
|
|
@@ -1877,6 +1877,1577 @@ cssPrefix: pf-c-tabs
|
|
|
1877
1877
|
|
|
1878
1878
|
```
|
|
1879
1879
|
|
|
1880
|
+
### Close button
|
|
1881
|
+
|
|
1882
|
+
```html
|
|
1883
|
+
<div class="pf-c-tabs pf-m-scrollable" id="close-default-example">
|
|
1884
|
+
<button class="pf-c-tabs__scroll-button" disabled aria-label="Scroll left">
|
|
1885
|
+
<i class="fas fa-angle-left" aria-hidden="true"></i>
|
|
1886
|
+
</button>
|
|
1887
|
+
<ul class="pf-c-tabs__list">
|
|
1888
|
+
<li class="pf-c-tabs__item pf-m-action">
|
|
1889
|
+
<button class="pf-c-tabs__link" id="close-default-example-users-link">
|
|
1890
|
+
<span class="pf-c-tabs__item-text">Users</span>
|
|
1891
|
+
</button>
|
|
1892
|
+
<span class="pf-c-tabs__item-close">
|
|
1893
|
+
<button
|
|
1894
|
+
class="pf-c-button pf-m-plain"
|
|
1895
|
+
type="button"
|
|
1896
|
+
aria-label="Close tab"
|
|
1897
|
+
>
|
|
1898
|
+
<span class="pf-c-tabs__item-close-icon">
|
|
1899
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
1900
|
+
</span>
|
|
1901
|
+
</button>
|
|
1902
|
+
</span>
|
|
1903
|
+
</li>
|
|
1904
|
+
<li class="pf-c-tabs__item pf-m-current pf-m-action">
|
|
1905
|
+
<button
|
|
1906
|
+
class="pf-c-tabs__link"
|
|
1907
|
+
id="close-default-example-containers-link"
|
|
1908
|
+
>
|
|
1909
|
+
<span class="pf-c-tabs__item-text">Containers</span>
|
|
1910
|
+
</button>
|
|
1911
|
+
<span class="pf-c-tabs__item-close">
|
|
1912
|
+
<button
|
|
1913
|
+
class="pf-c-button pf-m-plain"
|
|
1914
|
+
type="button"
|
|
1915
|
+
aria-label="Close tab"
|
|
1916
|
+
>
|
|
1917
|
+
<span class="pf-c-tabs__item-close-icon">
|
|
1918
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
1919
|
+
</span>
|
|
1920
|
+
</button>
|
|
1921
|
+
</span>
|
|
1922
|
+
</li>
|
|
1923
|
+
<li class="pf-c-tabs__item pf-m-action">
|
|
1924
|
+
<button class="pf-c-tabs__link" id="close-default-example-database-link">
|
|
1925
|
+
<span class="pf-c-tabs__item-text">Database</span>
|
|
1926
|
+
</button>
|
|
1927
|
+
<span class="pf-c-tabs__item-close">
|
|
1928
|
+
<button
|
|
1929
|
+
class="pf-c-button pf-m-plain"
|
|
1930
|
+
type="button"
|
|
1931
|
+
aria-label="Close tab"
|
|
1932
|
+
>
|
|
1933
|
+
<span class="pf-c-tabs__item-close-icon">
|
|
1934
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
1935
|
+
</span>
|
|
1936
|
+
</button>
|
|
1937
|
+
</span>
|
|
1938
|
+
</li>
|
|
1939
|
+
|
|
1940
|
+
<li class="pf-c-tabs__item pf-m-action pf-m-disabled">
|
|
1941
|
+
<button
|
|
1942
|
+
class="pf-c-tabs__link"
|
|
1943
|
+
disabled
|
|
1944
|
+
id="close-default-example-disabled-link"
|
|
1945
|
+
>
|
|
1946
|
+
<span class="pf-c-tabs__item-text">Disabled</span>
|
|
1947
|
+
</button>
|
|
1948
|
+
<span class="pf-c-tabs__item-close">
|
|
1949
|
+
<button
|
|
1950
|
+
class="pf-c-button pf-m-plain"
|
|
1951
|
+
type="button"
|
|
1952
|
+
aria-label="Close tab"
|
|
1953
|
+
>
|
|
1954
|
+
<span class="pf-c-tabs__item-close-icon">
|
|
1955
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
1956
|
+
</span>
|
|
1957
|
+
</button>
|
|
1958
|
+
</span>
|
|
1959
|
+
</li>
|
|
1960
|
+
<li class="pf-c-tabs__item pf-m-action pf-m-disabled">
|
|
1961
|
+
<button
|
|
1962
|
+
class="pf-c-tabs__link pf-m-aria-disabled"
|
|
1963
|
+
aria-disabled="true"
|
|
1964
|
+
id="close-default-example-aria-disabled-link"
|
|
1965
|
+
>
|
|
1966
|
+
<span class="pf-c-tabs__item-text">ARIA disabled</span>
|
|
1967
|
+
</button>
|
|
1968
|
+
<span class="pf-c-tabs__item-close">
|
|
1969
|
+
<button
|
|
1970
|
+
class="pf-c-button pf-m-plain"
|
|
1971
|
+
type="button"
|
|
1972
|
+
aria-label="Close tab"
|
|
1973
|
+
>
|
|
1974
|
+
<span class="pf-c-tabs__item-close-icon">
|
|
1975
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
1976
|
+
</span>
|
|
1977
|
+
</button>
|
|
1978
|
+
</span>
|
|
1979
|
+
</li>
|
|
1980
|
+
<li class="pf-c-tabs__item pf-m-action pf-m-disabled">
|
|
1981
|
+
<button
|
|
1982
|
+
class="pf-c-tabs__link"
|
|
1983
|
+
disabled
|
|
1984
|
+
id="close-default-example-close-disabled-link"
|
|
1985
|
+
>
|
|
1986
|
+
<span class="pf-c-tabs__item-text">Close disabled</span>
|
|
1987
|
+
</button>
|
|
1988
|
+
<span class="pf-c-tabs__item-close">
|
|
1989
|
+
<button
|
|
1990
|
+
class="pf-c-button pf-m-plain"
|
|
1991
|
+
type="button"
|
|
1992
|
+
aria-label="Close tab"
|
|
1993
|
+
disabled
|
|
1994
|
+
>
|
|
1995
|
+
<span class="pf-c-tabs__item-close-icon">
|
|
1996
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
1997
|
+
</span>
|
|
1998
|
+
</button>
|
|
1999
|
+
</span>
|
|
2000
|
+
</li>
|
|
2001
|
+
<li class="pf-c-tabs__item pf-m-action">
|
|
2002
|
+
<button
|
|
2003
|
+
class="pf-c-tabs__link"
|
|
2004
|
+
id="close-default-example-network-wired-link"
|
|
2005
|
+
>
|
|
2006
|
+
<span class="pf-c-tabs__item-text">Network</span>
|
|
2007
|
+
</button>
|
|
2008
|
+
<span class="pf-c-tabs__item-close">
|
|
2009
|
+
<button
|
|
2010
|
+
class="pf-c-button pf-m-plain"
|
|
2011
|
+
type="button"
|
|
2012
|
+
aria-label="Close tab"
|
|
2013
|
+
>
|
|
2014
|
+
<span class="pf-c-tabs__item-close-icon">
|
|
2015
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
2016
|
+
</span>
|
|
2017
|
+
</button>
|
|
2018
|
+
</span>
|
|
2019
|
+
</li>
|
|
2020
|
+
</ul>
|
|
2021
|
+
|
|
2022
|
+
<button class="pf-c-tabs__scroll-button" aria-label="Scroll right">
|
|
2023
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2024
|
+
</button>
|
|
2025
|
+
</div>
|
|
2026
|
+
|
|
2027
|
+
<br />
|
|
2028
|
+
<br />
|
|
2029
|
+
|
|
2030
|
+
<div class="pf-c-tabs pf-m-box pf-m-scrollable" id="close-box-example">
|
|
2031
|
+
<button class="pf-c-tabs__scroll-button" disabled aria-label="Scroll left">
|
|
2032
|
+
<i class="fas fa-angle-left" aria-hidden="true"></i>
|
|
2033
|
+
</button>
|
|
2034
|
+
<ul class="pf-c-tabs__list">
|
|
2035
|
+
<li class="pf-c-tabs__item pf-m-action">
|
|
2036
|
+
<button class="pf-c-tabs__link" id="close-box-example-users-link">
|
|
2037
|
+
<span class="pf-c-tabs__item-text">Users</span>
|
|
2038
|
+
</button>
|
|
2039
|
+
<span class="pf-c-tabs__item-close">
|
|
2040
|
+
<button
|
|
2041
|
+
class="pf-c-button pf-m-plain"
|
|
2042
|
+
type="button"
|
|
2043
|
+
aria-label="Close tab"
|
|
2044
|
+
>
|
|
2045
|
+
<span class="pf-c-tabs__item-close-icon">
|
|
2046
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
2047
|
+
</span>
|
|
2048
|
+
</button>
|
|
2049
|
+
</span>
|
|
2050
|
+
</li>
|
|
2051
|
+
<li class="pf-c-tabs__item pf-m-current pf-m-action">
|
|
2052
|
+
<button class="pf-c-tabs__link" id="close-box-example-containers-link">
|
|
2053
|
+
<span class="pf-c-tabs__item-text">Containers</span>
|
|
2054
|
+
</button>
|
|
2055
|
+
<span class="pf-c-tabs__item-close">
|
|
2056
|
+
<button
|
|
2057
|
+
class="pf-c-button pf-m-plain"
|
|
2058
|
+
type="button"
|
|
2059
|
+
aria-label="Close tab"
|
|
2060
|
+
>
|
|
2061
|
+
<span class="pf-c-tabs__item-close-icon">
|
|
2062
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
2063
|
+
</span>
|
|
2064
|
+
</button>
|
|
2065
|
+
</span>
|
|
2066
|
+
</li>
|
|
2067
|
+
<li class="pf-c-tabs__item pf-m-action">
|
|
2068
|
+
<button class="pf-c-tabs__link" id="close-box-example-database-link">
|
|
2069
|
+
<span class="pf-c-tabs__item-text">Database</span>
|
|
2070
|
+
</button>
|
|
2071
|
+
<span class="pf-c-tabs__item-close">
|
|
2072
|
+
<button
|
|
2073
|
+
class="pf-c-button pf-m-plain"
|
|
2074
|
+
type="button"
|
|
2075
|
+
aria-label="Close tab"
|
|
2076
|
+
>
|
|
2077
|
+
<span class="pf-c-tabs__item-close-icon">
|
|
2078
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
2079
|
+
</span>
|
|
2080
|
+
</button>
|
|
2081
|
+
</span>
|
|
2082
|
+
</li>
|
|
2083
|
+
|
|
2084
|
+
<li class="pf-c-tabs__item pf-m-action pf-m-disabled">
|
|
2085
|
+
<button
|
|
2086
|
+
class="pf-c-tabs__link"
|
|
2087
|
+
disabled
|
|
2088
|
+
id="close-box-example-disabled-link"
|
|
2089
|
+
>
|
|
2090
|
+
<span class="pf-c-tabs__item-text">Disabled</span>
|
|
2091
|
+
</button>
|
|
2092
|
+
<span class="pf-c-tabs__item-close">
|
|
2093
|
+
<button
|
|
2094
|
+
class="pf-c-button pf-m-plain"
|
|
2095
|
+
type="button"
|
|
2096
|
+
aria-label="Close tab"
|
|
2097
|
+
>
|
|
2098
|
+
<span class="pf-c-tabs__item-close-icon">
|
|
2099
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
2100
|
+
</span>
|
|
2101
|
+
</button>
|
|
2102
|
+
</span>
|
|
2103
|
+
</li>
|
|
2104
|
+
<li class="pf-c-tabs__item pf-m-action pf-m-disabled">
|
|
2105
|
+
<button
|
|
2106
|
+
class="pf-c-tabs__link pf-m-aria-disabled"
|
|
2107
|
+
aria-disabled="true"
|
|
2108
|
+
id="close-box-example-aria-disabled-link"
|
|
2109
|
+
>
|
|
2110
|
+
<span class="pf-c-tabs__item-text">ARIA disabled</span>
|
|
2111
|
+
</button>
|
|
2112
|
+
<span class="pf-c-tabs__item-close">
|
|
2113
|
+
<button
|
|
2114
|
+
class="pf-c-button pf-m-plain"
|
|
2115
|
+
type="button"
|
|
2116
|
+
aria-label="Close tab"
|
|
2117
|
+
>
|
|
2118
|
+
<span class="pf-c-tabs__item-close-icon">
|
|
2119
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
2120
|
+
</span>
|
|
2121
|
+
</button>
|
|
2122
|
+
</span>
|
|
2123
|
+
</li>
|
|
2124
|
+
<li class="pf-c-tabs__item pf-m-action pf-m-disabled">
|
|
2125
|
+
<button
|
|
2126
|
+
class="pf-c-tabs__link"
|
|
2127
|
+
disabled
|
|
2128
|
+
id="close-box-example-close-disabled-link"
|
|
2129
|
+
>
|
|
2130
|
+
<span class="pf-c-tabs__item-text">Close disabled</span>
|
|
2131
|
+
</button>
|
|
2132
|
+
<span class="pf-c-tabs__item-close">
|
|
2133
|
+
<button
|
|
2134
|
+
class="pf-c-button pf-m-plain"
|
|
2135
|
+
type="button"
|
|
2136
|
+
aria-label="Close tab"
|
|
2137
|
+
disabled
|
|
2138
|
+
>
|
|
2139
|
+
<span class="pf-c-tabs__item-close-icon">
|
|
2140
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
2141
|
+
</span>
|
|
2142
|
+
</button>
|
|
2143
|
+
</span>
|
|
2144
|
+
</li>
|
|
2145
|
+
<li class="pf-c-tabs__item pf-m-action">
|
|
2146
|
+
<button class="pf-c-tabs__link" id="close-box-example-network-wired-link">
|
|
2147
|
+
<span class="pf-c-tabs__item-text">Network</span>
|
|
2148
|
+
</button>
|
|
2149
|
+
<span class="pf-c-tabs__item-close">
|
|
2150
|
+
<button
|
|
2151
|
+
class="pf-c-button pf-m-plain"
|
|
2152
|
+
type="button"
|
|
2153
|
+
aria-label="Close tab"
|
|
2154
|
+
>
|
|
2155
|
+
<span class="pf-c-tabs__item-close-icon">
|
|
2156
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
2157
|
+
</span>
|
|
2158
|
+
</button>
|
|
2159
|
+
</span>
|
|
2160
|
+
</li>
|
|
2161
|
+
</ul>
|
|
2162
|
+
|
|
2163
|
+
<button class="pf-c-tabs__scroll-button" aria-label="Scroll right">
|
|
2164
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2165
|
+
</button>
|
|
2166
|
+
</div>
|
|
2167
|
+
|
|
2168
|
+
<br />
|
|
2169
|
+
<br />
|
|
2170
|
+
|
|
2171
|
+
<div
|
|
2172
|
+
class="pf-c-tabs pf-m-box pf-m-color-scheme--light-300 pf-m-scrollable"
|
|
2173
|
+
id="close-box-light-300-example"
|
|
2174
|
+
>
|
|
2175
|
+
<button class="pf-c-tabs__scroll-button" disabled aria-label="Scroll left">
|
|
2176
|
+
<i class="fas fa-angle-left" aria-hidden="true"></i>
|
|
2177
|
+
</button>
|
|
2178
|
+
<ul class="pf-c-tabs__list">
|
|
2179
|
+
<li class="pf-c-tabs__item pf-m-action">
|
|
2180
|
+
<button
|
|
2181
|
+
class="pf-c-tabs__link"
|
|
2182
|
+
id="close-box-light-300-example-users-link"
|
|
2183
|
+
>
|
|
2184
|
+
<span class="pf-c-tabs__item-text">Users</span>
|
|
2185
|
+
</button>
|
|
2186
|
+
<span class="pf-c-tabs__item-close">
|
|
2187
|
+
<button
|
|
2188
|
+
class="pf-c-button pf-m-plain"
|
|
2189
|
+
type="button"
|
|
2190
|
+
aria-label="Close tab"
|
|
2191
|
+
>
|
|
2192
|
+
<span class="pf-c-tabs__item-close-icon">
|
|
2193
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
2194
|
+
</span>
|
|
2195
|
+
</button>
|
|
2196
|
+
</span>
|
|
2197
|
+
</li>
|
|
2198
|
+
<li class="pf-c-tabs__item pf-m-current pf-m-action">
|
|
2199
|
+
<button
|
|
2200
|
+
class="pf-c-tabs__link"
|
|
2201
|
+
id="close-box-light-300-example-containers-link"
|
|
2202
|
+
>
|
|
2203
|
+
<span class="pf-c-tabs__item-text">Containers</span>
|
|
2204
|
+
</button>
|
|
2205
|
+
<span class="pf-c-tabs__item-close">
|
|
2206
|
+
<button
|
|
2207
|
+
class="pf-c-button pf-m-plain"
|
|
2208
|
+
type="button"
|
|
2209
|
+
aria-label="Close tab"
|
|
2210
|
+
>
|
|
2211
|
+
<span class="pf-c-tabs__item-close-icon">
|
|
2212
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
2213
|
+
</span>
|
|
2214
|
+
</button>
|
|
2215
|
+
</span>
|
|
2216
|
+
</li>
|
|
2217
|
+
<li class="pf-c-tabs__item pf-m-action">
|
|
2218
|
+
<button
|
|
2219
|
+
class="pf-c-tabs__link"
|
|
2220
|
+
id="close-box-light-300-example-database-link"
|
|
2221
|
+
>
|
|
2222
|
+
<span class="pf-c-tabs__item-text">Database</span>
|
|
2223
|
+
</button>
|
|
2224
|
+
<span class="pf-c-tabs__item-close">
|
|
2225
|
+
<button
|
|
2226
|
+
class="pf-c-button pf-m-plain"
|
|
2227
|
+
type="button"
|
|
2228
|
+
aria-label="Close tab"
|
|
2229
|
+
>
|
|
2230
|
+
<span class="pf-c-tabs__item-close-icon">
|
|
2231
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
2232
|
+
</span>
|
|
2233
|
+
</button>
|
|
2234
|
+
</span>
|
|
2235
|
+
</li>
|
|
2236
|
+
|
|
2237
|
+
<li class="pf-c-tabs__item pf-m-action pf-m-disabled">
|
|
2238
|
+
<button
|
|
2239
|
+
class="pf-c-tabs__link"
|
|
2240
|
+
disabled
|
|
2241
|
+
id="close-box-light-300-example-disabled-link"
|
|
2242
|
+
>
|
|
2243
|
+
<span class="pf-c-tabs__item-text">Disabled</span>
|
|
2244
|
+
</button>
|
|
2245
|
+
<span class="pf-c-tabs__item-close">
|
|
2246
|
+
<button
|
|
2247
|
+
class="pf-c-button pf-m-plain"
|
|
2248
|
+
type="button"
|
|
2249
|
+
aria-label="Close tab"
|
|
2250
|
+
>
|
|
2251
|
+
<span class="pf-c-tabs__item-close-icon">
|
|
2252
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
2253
|
+
</span>
|
|
2254
|
+
</button>
|
|
2255
|
+
</span>
|
|
2256
|
+
</li>
|
|
2257
|
+
<li class="pf-c-tabs__item pf-m-action pf-m-disabled">
|
|
2258
|
+
<button
|
|
2259
|
+
class="pf-c-tabs__link pf-m-aria-disabled"
|
|
2260
|
+
aria-disabled="true"
|
|
2261
|
+
id="close-box-light-300-example-aria-disabled-link"
|
|
2262
|
+
>
|
|
2263
|
+
<span class="pf-c-tabs__item-text">ARIA disabled</span>
|
|
2264
|
+
</button>
|
|
2265
|
+
<span class="pf-c-tabs__item-close">
|
|
2266
|
+
<button
|
|
2267
|
+
class="pf-c-button pf-m-plain"
|
|
2268
|
+
type="button"
|
|
2269
|
+
aria-label="Close tab"
|
|
2270
|
+
>
|
|
2271
|
+
<span class="pf-c-tabs__item-close-icon">
|
|
2272
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
2273
|
+
</span>
|
|
2274
|
+
</button>
|
|
2275
|
+
</span>
|
|
2276
|
+
</li>
|
|
2277
|
+
<li class="pf-c-tabs__item pf-m-action pf-m-disabled">
|
|
2278
|
+
<button
|
|
2279
|
+
class="pf-c-tabs__link"
|
|
2280
|
+
disabled
|
|
2281
|
+
id="close-box-light-300-example-close-disabled-link"
|
|
2282
|
+
>
|
|
2283
|
+
<span class="pf-c-tabs__item-text">Close disabled</span>
|
|
2284
|
+
</button>
|
|
2285
|
+
<span class="pf-c-tabs__item-close">
|
|
2286
|
+
<button
|
|
2287
|
+
class="pf-c-button pf-m-plain"
|
|
2288
|
+
type="button"
|
|
2289
|
+
aria-label="Close tab"
|
|
2290
|
+
disabled
|
|
2291
|
+
>
|
|
2292
|
+
<span class="pf-c-tabs__item-close-icon">
|
|
2293
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
2294
|
+
</span>
|
|
2295
|
+
</button>
|
|
2296
|
+
</span>
|
|
2297
|
+
</li>
|
|
2298
|
+
<li class="pf-c-tabs__item pf-m-action">
|
|
2299
|
+
<button
|
|
2300
|
+
class="pf-c-tabs__link"
|
|
2301
|
+
id="close-box-light-300-example-network-wired-link"
|
|
2302
|
+
>
|
|
2303
|
+
<span class="pf-c-tabs__item-text">Network</span>
|
|
2304
|
+
</button>
|
|
2305
|
+
<span class="pf-c-tabs__item-close">
|
|
2306
|
+
<button
|
|
2307
|
+
class="pf-c-button pf-m-plain"
|
|
2308
|
+
type="button"
|
|
2309
|
+
aria-label="Close tab"
|
|
2310
|
+
>
|
|
2311
|
+
<span class="pf-c-tabs__item-close-icon">
|
|
2312
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
2313
|
+
</span>
|
|
2314
|
+
</button>
|
|
2315
|
+
</span>
|
|
2316
|
+
</li>
|
|
2317
|
+
</ul>
|
|
2318
|
+
|
|
2319
|
+
<button class="pf-c-tabs__scroll-button" aria-label="Scroll right">
|
|
2320
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2321
|
+
</button>
|
|
2322
|
+
</div>
|
|
2323
|
+
|
|
2324
|
+
<br />
|
|
2325
|
+
<br />
|
|
2326
|
+
|
|
2327
|
+
<div class="pf-c-tabs pf-m-scrollable" id="close-icons-text-example">
|
|
2328
|
+
<button class="pf-c-tabs__scroll-button" disabled aria-label="Scroll left">
|
|
2329
|
+
<i class="fas fa-angle-left" aria-hidden="true"></i>
|
|
2330
|
+
</button>
|
|
2331
|
+
<ul class="pf-c-tabs__list">
|
|
2332
|
+
<li class="pf-c-tabs__item pf-m-action">
|
|
2333
|
+
<button class="pf-c-tabs__link" id="close-icons-text-example-users-link">
|
|
2334
|
+
<span class="pf-c-tabs__item-icon">
|
|
2335
|
+
<i class="fas fa-fas fa-users" aria-hidden="true"></i>
|
|
2336
|
+
</span>
|
|
2337
|
+
<span class="pf-c-tabs__item-text">Users</span>
|
|
2338
|
+
</button>
|
|
2339
|
+
<span class="pf-c-tabs__item-close">
|
|
2340
|
+
<button
|
|
2341
|
+
class="pf-c-button pf-m-plain"
|
|
2342
|
+
type="button"
|
|
2343
|
+
aria-label="Close tab"
|
|
2344
|
+
>
|
|
2345
|
+
<span class="pf-c-tabs__item-close-icon">
|
|
2346
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
2347
|
+
</span>
|
|
2348
|
+
</button>
|
|
2349
|
+
</span>
|
|
2350
|
+
</li>
|
|
2351
|
+
<li class="pf-c-tabs__item pf-m-current pf-m-action">
|
|
2352
|
+
<button
|
|
2353
|
+
class="pf-c-tabs__link"
|
|
2354
|
+
id="close-icons-text-example-containers-link"
|
|
2355
|
+
>
|
|
2356
|
+
<span class="pf-c-tabs__item-icon">
|
|
2357
|
+
<i class="fas fa-fas fa-box" aria-hidden="true"></i>
|
|
2358
|
+
</span>
|
|
2359
|
+
<span class="pf-c-tabs__item-text">Containers</span>
|
|
2360
|
+
</button>
|
|
2361
|
+
<span class="pf-c-tabs__item-close">
|
|
2362
|
+
<button
|
|
2363
|
+
class="pf-c-button pf-m-plain"
|
|
2364
|
+
type="button"
|
|
2365
|
+
aria-label="Close tab"
|
|
2366
|
+
>
|
|
2367
|
+
<span class="pf-c-tabs__item-close-icon">
|
|
2368
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
2369
|
+
</span>
|
|
2370
|
+
</button>
|
|
2371
|
+
</span>
|
|
2372
|
+
</li>
|
|
2373
|
+
<li class="pf-c-tabs__item pf-m-action">
|
|
2374
|
+
<button
|
|
2375
|
+
class="pf-c-tabs__link"
|
|
2376
|
+
id="close-icons-text-example-database-link"
|
|
2377
|
+
>
|
|
2378
|
+
<span class="pf-c-tabs__item-icon">
|
|
2379
|
+
<i class="fas fa-database" aria-hidden="true"></i>
|
|
2380
|
+
</span>
|
|
2381
|
+
<span class="pf-c-tabs__item-text">Database</span>
|
|
2382
|
+
</button>
|
|
2383
|
+
<span class="pf-c-tabs__item-close">
|
|
2384
|
+
<button
|
|
2385
|
+
class="pf-c-button pf-m-plain"
|
|
2386
|
+
type="button"
|
|
2387
|
+
aria-label="Close tab"
|
|
2388
|
+
>
|
|
2389
|
+
<span class="pf-c-tabs__item-close-icon">
|
|
2390
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
2391
|
+
</span>
|
|
2392
|
+
</button>
|
|
2393
|
+
</span>
|
|
2394
|
+
</li>
|
|
2395
|
+
|
|
2396
|
+
<li class="pf-c-tabs__item pf-m-action pf-m-disabled">
|
|
2397
|
+
<button
|
|
2398
|
+
class="pf-c-tabs__link"
|
|
2399
|
+
disabled
|
|
2400
|
+
id="close-icons-text-example-disabled-link"
|
|
2401
|
+
>
|
|
2402
|
+
<span class="pf-c-tabs__item-icon">
|
|
2403
|
+
<i class="fas fa-server" aria-hidden="true"></i>
|
|
2404
|
+
</span>
|
|
2405
|
+
<span class="pf-c-tabs__item-text">Disabled</span>
|
|
2406
|
+
</button>
|
|
2407
|
+
<span class="pf-c-tabs__item-close">
|
|
2408
|
+
<button
|
|
2409
|
+
class="pf-c-button pf-m-plain"
|
|
2410
|
+
type="button"
|
|
2411
|
+
aria-label="Close tab"
|
|
2412
|
+
>
|
|
2413
|
+
<span class="pf-c-tabs__item-close-icon">
|
|
2414
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
2415
|
+
</span>
|
|
2416
|
+
</button>
|
|
2417
|
+
</span>
|
|
2418
|
+
</li>
|
|
2419
|
+
<li class="pf-c-tabs__item pf-m-action pf-m-disabled">
|
|
2420
|
+
<button
|
|
2421
|
+
class="pf-c-tabs__link pf-m-aria-disabled"
|
|
2422
|
+
aria-disabled="true"
|
|
2423
|
+
id="close-icons-text-example-aria-disabled-link"
|
|
2424
|
+
>
|
|
2425
|
+
<span class="pf-c-tabs__item-icon">
|
|
2426
|
+
<i class="fas fa-laptop" aria-hidden="true"></i>
|
|
2427
|
+
</span>
|
|
2428
|
+
<span class="pf-c-tabs__item-text">ARIA disabled</span>
|
|
2429
|
+
</button>
|
|
2430
|
+
<span class="pf-c-tabs__item-close">
|
|
2431
|
+
<button
|
|
2432
|
+
class="pf-c-button pf-m-plain"
|
|
2433
|
+
type="button"
|
|
2434
|
+
aria-label="Close tab"
|
|
2435
|
+
>
|
|
2436
|
+
<span class="pf-c-tabs__item-close-icon">
|
|
2437
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
2438
|
+
</span>
|
|
2439
|
+
</button>
|
|
2440
|
+
</span>
|
|
2441
|
+
</li>
|
|
2442
|
+
<li class="pf-c-tabs__item pf-m-action pf-m-disabled">
|
|
2443
|
+
<button
|
|
2444
|
+
class="pf-c-tabs__link"
|
|
2445
|
+
disabled
|
|
2446
|
+
id="close-icons-text-example-close-disabled-link"
|
|
2447
|
+
>
|
|
2448
|
+
<span class="pf-c-tabs__item-icon">
|
|
2449
|
+
<i class="fas fa-laptop" aria-hidden="true"></i>
|
|
2450
|
+
</span>
|
|
2451
|
+
<span class="pf-c-tabs__item-text">Close disabled</span>
|
|
2452
|
+
</button>
|
|
2453
|
+
<span class="pf-c-tabs__item-close">
|
|
2454
|
+
<button
|
|
2455
|
+
class="pf-c-button pf-m-plain"
|
|
2456
|
+
type="button"
|
|
2457
|
+
aria-label="Close tab"
|
|
2458
|
+
disabled
|
|
2459
|
+
>
|
|
2460
|
+
<span class="pf-c-tabs__item-close-icon">
|
|
2461
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
2462
|
+
</span>
|
|
2463
|
+
</button>
|
|
2464
|
+
</span>
|
|
2465
|
+
</li>
|
|
2466
|
+
<li class="pf-c-tabs__item pf-m-action">
|
|
2467
|
+
<button
|
|
2468
|
+
class="pf-c-tabs__link"
|
|
2469
|
+
id="close-icons-text-example-network-wired-link"
|
|
2470
|
+
>
|
|
2471
|
+
<span class="pf-c-tabs__item-icon">
|
|
2472
|
+
<i class="fas fa-project-diagram" aria-hidden="true"></i>
|
|
2473
|
+
</span>
|
|
2474
|
+
<span class="pf-c-tabs__item-text">Network</span>
|
|
2475
|
+
</button>
|
|
2476
|
+
<span class="pf-c-tabs__item-close">
|
|
2477
|
+
<button
|
|
2478
|
+
class="pf-c-button pf-m-plain"
|
|
2479
|
+
type="button"
|
|
2480
|
+
aria-label="Close tab"
|
|
2481
|
+
>
|
|
2482
|
+
<span class="pf-c-tabs__item-close-icon">
|
|
2483
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
2484
|
+
</span>
|
|
2485
|
+
</button>
|
|
2486
|
+
</span>
|
|
2487
|
+
</li>
|
|
2488
|
+
</ul>
|
|
2489
|
+
|
|
2490
|
+
<button class="pf-c-tabs__scroll-button" aria-label="Scroll right">
|
|
2491
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2492
|
+
</button>
|
|
2493
|
+
</div>
|
|
2494
|
+
|
|
2495
|
+
<br />
|
|
2496
|
+
<br />
|
|
2497
|
+
|
|
2498
|
+
<div class="pf-c-tabs pf-m-fill pf-m-scrollable" id="close-filled-example">
|
|
2499
|
+
<button class="pf-c-tabs__scroll-button" disabled aria-label="Scroll left">
|
|
2500
|
+
<i class="fas fa-angle-left" aria-hidden="true"></i>
|
|
2501
|
+
</button>
|
|
2502
|
+
<ul class="pf-c-tabs__list">
|
|
2503
|
+
<li class="pf-c-tabs__item pf-m-action">
|
|
2504
|
+
<button class="pf-c-tabs__link" id="close-filled-example-users-link">
|
|
2505
|
+
<span class="pf-c-tabs__item-text">Users</span>
|
|
2506
|
+
</button>
|
|
2507
|
+
<span class="pf-c-tabs__item-close">
|
|
2508
|
+
<button
|
|
2509
|
+
class="pf-c-button pf-m-plain"
|
|
2510
|
+
type="button"
|
|
2511
|
+
aria-label="Close tab"
|
|
2512
|
+
>
|
|
2513
|
+
<span class="pf-c-tabs__item-close-icon">
|
|
2514
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
2515
|
+
</span>
|
|
2516
|
+
</button>
|
|
2517
|
+
</span>
|
|
2518
|
+
</li>
|
|
2519
|
+
<li class="pf-c-tabs__item pf-m-current pf-m-action">
|
|
2520
|
+
<button class="pf-c-tabs__link" id="close-filled-example-containers-link">
|
|
2521
|
+
<span class="pf-c-tabs__item-text">Containers</span>
|
|
2522
|
+
</button>
|
|
2523
|
+
<span class="pf-c-tabs__item-close">
|
|
2524
|
+
<button
|
|
2525
|
+
class="pf-c-button pf-m-plain"
|
|
2526
|
+
type="button"
|
|
2527
|
+
aria-label="Close tab"
|
|
2528
|
+
>
|
|
2529
|
+
<span class="pf-c-tabs__item-close-icon">
|
|
2530
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
2531
|
+
</span>
|
|
2532
|
+
</button>
|
|
2533
|
+
</span>
|
|
2534
|
+
</li>
|
|
2535
|
+
<li class="pf-c-tabs__item pf-m-action">
|
|
2536
|
+
<button class="pf-c-tabs__link" id="close-filled-example-database-link">
|
|
2537
|
+
<span class="pf-c-tabs__item-text">Database</span>
|
|
2538
|
+
</button>
|
|
2539
|
+
<span class="pf-c-tabs__item-close">
|
|
2540
|
+
<button
|
|
2541
|
+
class="pf-c-button pf-m-plain"
|
|
2542
|
+
type="button"
|
|
2543
|
+
aria-label="Close tab"
|
|
2544
|
+
>
|
|
2545
|
+
<span class="pf-c-tabs__item-close-icon">
|
|
2546
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
2547
|
+
</span>
|
|
2548
|
+
</button>
|
|
2549
|
+
</span>
|
|
2550
|
+
</li>
|
|
2551
|
+
|
|
2552
|
+
<li class="pf-c-tabs__item pf-m-action pf-m-disabled">
|
|
2553
|
+
<button
|
|
2554
|
+
class="pf-c-tabs__link"
|
|
2555
|
+
disabled
|
|
2556
|
+
id="close-filled-example-disabled-link"
|
|
2557
|
+
>
|
|
2558
|
+
<span class="pf-c-tabs__item-text">Disabled</span>
|
|
2559
|
+
</button>
|
|
2560
|
+
<span class="pf-c-tabs__item-close">
|
|
2561
|
+
<button
|
|
2562
|
+
class="pf-c-button pf-m-plain"
|
|
2563
|
+
type="button"
|
|
2564
|
+
aria-label="Close tab"
|
|
2565
|
+
>
|
|
2566
|
+
<span class="pf-c-tabs__item-close-icon">
|
|
2567
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
2568
|
+
</span>
|
|
2569
|
+
</button>
|
|
2570
|
+
</span>
|
|
2571
|
+
</li>
|
|
2572
|
+
<li class="pf-c-tabs__item pf-m-action pf-m-disabled">
|
|
2573
|
+
<button
|
|
2574
|
+
class="pf-c-tabs__link pf-m-aria-disabled"
|
|
2575
|
+
aria-disabled="true"
|
|
2576
|
+
id="close-filled-example-aria-disabled-link"
|
|
2577
|
+
>
|
|
2578
|
+
<span class="pf-c-tabs__item-text">ARIA disabled</span>
|
|
2579
|
+
</button>
|
|
2580
|
+
<span class="pf-c-tabs__item-close">
|
|
2581
|
+
<button
|
|
2582
|
+
class="pf-c-button pf-m-plain"
|
|
2583
|
+
type="button"
|
|
2584
|
+
aria-label="Close tab"
|
|
2585
|
+
>
|
|
2586
|
+
<span class="pf-c-tabs__item-close-icon">
|
|
2587
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
2588
|
+
</span>
|
|
2589
|
+
</button>
|
|
2590
|
+
</span>
|
|
2591
|
+
</li>
|
|
2592
|
+
<li class="pf-c-tabs__item pf-m-action pf-m-disabled">
|
|
2593
|
+
<button
|
|
2594
|
+
class="pf-c-tabs__link"
|
|
2595
|
+
disabled
|
|
2596
|
+
id="close-filled-example-close-disabled-link"
|
|
2597
|
+
>
|
|
2598
|
+
<span class="pf-c-tabs__item-text">Close disabled</span>
|
|
2599
|
+
</button>
|
|
2600
|
+
<span class="pf-c-tabs__item-close">
|
|
2601
|
+
<button
|
|
2602
|
+
class="pf-c-button pf-m-plain"
|
|
2603
|
+
type="button"
|
|
2604
|
+
aria-label="Close tab"
|
|
2605
|
+
disabled
|
|
2606
|
+
>
|
|
2607
|
+
<span class="pf-c-tabs__item-close-icon">
|
|
2608
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
2609
|
+
</span>
|
|
2610
|
+
</button>
|
|
2611
|
+
</span>
|
|
2612
|
+
</li>
|
|
2613
|
+
<li class="pf-c-tabs__item pf-m-action">
|
|
2614
|
+
<button
|
|
2615
|
+
class="pf-c-tabs__link"
|
|
2616
|
+
id="close-filled-example-network-wired-link"
|
|
2617
|
+
>
|
|
2618
|
+
<span class="pf-c-tabs__item-text">Network</span>
|
|
2619
|
+
</button>
|
|
2620
|
+
<span class="pf-c-tabs__item-close">
|
|
2621
|
+
<button
|
|
2622
|
+
class="pf-c-button pf-m-plain"
|
|
2623
|
+
type="button"
|
|
2624
|
+
aria-label="Close tab"
|
|
2625
|
+
>
|
|
2626
|
+
<span class="pf-c-tabs__item-close-icon">
|
|
2627
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
2628
|
+
</span>
|
|
2629
|
+
</button>
|
|
2630
|
+
</span>
|
|
2631
|
+
</li>
|
|
2632
|
+
</ul>
|
|
2633
|
+
|
|
2634
|
+
<button class="pf-c-tabs__scroll-button" aria-label="Scroll right">
|
|
2635
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2636
|
+
</button>
|
|
2637
|
+
</div>
|
|
2638
|
+
|
|
2639
|
+
<br />
|
|
2640
|
+
<br />
|
|
2641
|
+
|
|
2642
|
+
<div class="pf-c-tabs pf-m-scrollable" id="close-secondary-primary-example">
|
|
2643
|
+
<button class="pf-c-tabs__scroll-button" disabled aria-label="Scroll left">
|
|
2644
|
+
<i class="fas fa-angle-left" aria-hidden="true"></i>
|
|
2645
|
+
</button>
|
|
2646
|
+
<ul class="pf-c-tabs__list">
|
|
2647
|
+
<li class="pf-c-tabs__item pf-m-action">
|
|
2648
|
+
<button
|
|
2649
|
+
class="pf-c-tabs__link"
|
|
2650
|
+
id="close-secondary-primary-example-users-link"
|
|
2651
|
+
>
|
|
2652
|
+
<span class="pf-c-tabs__item-text">Users</span>
|
|
2653
|
+
</button>
|
|
2654
|
+
<span class="pf-c-tabs__item-close">
|
|
2655
|
+
<button
|
|
2656
|
+
class="pf-c-button pf-m-plain"
|
|
2657
|
+
type="button"
|
|
2658
|
+
aria-label="Close tab"
|
|
2659
|
+
>
|
|
2660
|
+
<span class="pf-c-tabs__item-close-icon">
|
|
2661
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
2662
|
+
</span>
|
|
2663
|
+
</button>
|
|
2664
|
+
</span>
|
|
2665
|
+
</li>
|
|
2666
|
+
<li class="pf-c-tabs__item pf-m-current pf-m-action">
|
|
2667
|
+
<button
|
|
2668
|
+
class="pf-c-tabs__link"
|
|
2669
|
+
id="close-secondary-primary-example-containers-link"
|
|
2670
|
+
>
|
|
2671
|
+
<span class="pf-c-tabs__item-text">Containers</span>
|
|
2672
|
+
</button>
|
|
2673
|
+
<span class="pf-c-tabs__item-close">
|
|
2674
|
+
<button
|
|
2675
|
+
class="pf-c-button pf-m-plain"
|
|
2676
|
+
type="button"
|
|
2677
|
+
aria-label="Close tab"
|
|
2678
|
+
>
|
|
2679
|
+
<span class="pf-c-tabs__item-close-icon">
|
|
2680
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
2681
|
+
</span>
|
|
2682
|
+
</button>
|
|
2683
|
+
</span>
|
|
2684
|
+
</li>
|
|
2685
|
+
<li class="pf-c-tabs__item pf-m-action">
|
|
2686
|
+
<button
|
|
2687
|
+
class="pf-c-tabs__link"
|
|
2688
|
+
id="close-secondary-primary-example-database-link"
|
|
2689
|
+
>
|
|
2690
|
+
<span class="pf-c-tabs__item-text">Database</span>
|
|
2691
|
+
</button>
|
|
2692
|
+
<span class="pf-c-tabs__item-close">
|
|
2693
|
+
<button
|
|
2694
|
+
class="pf-c-button pf-m-plain"
|
|
2695
|
+
type="button"
|
|
2696
|
+
aria-label="Close tab"
|
|
2697
|
+
>
|
|
2698
|
+
<span class="pf-c-tabs__item-close-icon">
|
|
2699
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
2700
|
+
</span>
|
|
2701
|
+
</button>
|
|
2702
|
+
</span>
|
|
2703
|
+
</li>
|
|
2704
|
+
|
|
2705
|
+
<li class="pf-c-tabs__item pf-m-action pf-m-disabled">
|
|
2706
|
+
<button
|
|
2707
|
+
class="pf-c-tabs__link"
|
|
2708
|
+
disabled
|
|
2709
|
+
id="close-secondary-primary-example-disabled-link"
|
|
2710
|
+
>
|
|
2711
|
+
<span class="pf-c-tabs__item-text">Disabled</span>
|
|
2712
|
+
</button>
|
|
2713
|
+
<span class="pf-c-tabs__item-close">
|
|
2714
|
+
<button
|
|
2715
|
+
class="pf-c-button pf-m-plain"
|
|
2716
|
+
type="button"
|
|
2717
|
+
aria-label="Close tab"
|
|
2718
|
+
>
|
|
2719
|
+
<span class="pf-c-tabs__item-close-icon">
|
|
2720
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
2721
|
+
</span>
|
|
2722
|
+
</button>
|
|
2723
|
+
</span>
|
|
2724
|
+
</li>
|
|
2725
|
+
<li class="pf-c-tabs__item pf-m-action pf-m-disabled">
|
|
2726
|
+
<button
|
|
2727
|
+
class="pf-c-tabs__link pf-m-aria-disabled"
|
|
2728
|
+
aria-disabled="true"
|
|
2729
|
+
id="close-secondary-primary-example-aria-disabled-link"
|
|
2730
|
+
>
|
|
2731
|
+
<span class="pf-c-tabs__item-text">ARIA disabled</span>
|
|
2732
|
+
</button>
|
|
2733
|
+
<span class="pf-c-tabs__item-close">
|
|
2734
|
+
<button
|
|
2735
|
+
class="pf-c-button pf-m-plain"
|
|
2736
|
+
type="button"
|
|
2737
|
+
aria-label="Close tab"
|
|
2738
|
+
>
|
|
2739
|
+
<span class="pf-c-tabs__item-close-icon">
|
|
2740
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
2741
|
+
</span>
|
|
2742
|
+
</button>
|
|
2743
|
+
</span>
|
|
2744
|
+
</li>
|
|
2745
|
+
<li class="pf-c-tabs__item pf-m-action pf-m-disabled">
|
|
2746
|
+
<button
|
|
2747
|
+
class="pf-c-tabs__link"
|
|
2748
|
+
disabled
|
|
2749
|
+
id="close-secondary-primary-example-close-disabled-link"
|
|
2750
|
+
>
|
|
2751
|
+
<span class="pf-c-tabs__item-text">Close disabled</span>
|
|
2752
|
+
</button>
|
|
2753
|
+
<span class="pf-c-tabs__item-close">
|
|
2754
|
+
<button
|
|
2755
|
+
class="pf-c-button pf-m-plain"
|
|
2756
|
+
type="button"
|
|
2757
|
+
aria-label="Close tab"
|
|
2758
|
+
disabled
|
|
2759
|
+
>
|
|
2760
|
+
<span class="pf-c-tabs__item-close-icon">
|
|
2761
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
2762
|
+
</span>
|
|
2763
|
+
</button>
|
|
2764
|
+
</span>
|
|
2765
|
+
</li>
|
|
2766
|
+
<li class="pf-c-tabs__item pf-m-action">
|
|
2767
|
+
<button
|
|
2768
|
+
class="pf-c-tabs__link"
|
|
2769
|
+
id="close-secondary-primary-example-network-wired-link"
|
|
2770
|
+
>
|
|
2771
|
+
<span class="pf-c-tabs__item-text">Network</span>
|
|
2772
|
+
</button>
|
|
2773
|
+
<span class="pf-c-tabs__item-close">
|
|
2774
|
+
<button
|
|
2775
|
+
class="pf-c-button pf-m-plain"
|
|
2776
|
+
type="button"
|
|
2777
|
+
aria-label="Close tab"
|
|
2778
|
+
>
|
|
2779
|
+
<span class="pf-c-tabs__item-close-icon">
|
|
2780
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
2781
|
+
</span>
|
|
2782
|
+
</button>
|
|
2783
|
+
</span>
|
|
2784
|
+
</li>
|
|
2785
|
+
</ul>
|
|
2786
|
+
|
|
2787
|
+
<button class="pf-c-tabs__scroll-button" aria-label="Scroll right">
|
|
2788
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2789
|
+
</button>
|
|
2790
|
+
</div>
|
|
2791
|
+
<div
|
|
2792
|
+
class="pf-c-tabs pf-m-secondary pf-m-scrollable"
|
|
2793
|
+
id="close-secondary-secondary-example"
|
|
2794
|
+
>
|
|
2795
|
+
<button class="pf-c-tabs__scroll-button" disabled aria-label="Scroll left">
|
|
2796
|
+
<i class="fas fa-angle-left" aria-hidden="true"></i>
|
|
2797
|
+
</button>
|
|
2798
|
+
<ul class="pf-c-tabs__list">
|
|
2799
|
+
<li class="pf-c-tabs__item pf-m-action">
|
|
2800
|
+
<button
|
|
2801
|
+
class="pf-c-tabs__link"
|
|
2802
|
+
id="close-secondary-secondary-example-users-link"
|
|
2803
|
+
>
|
|
2804
|
+
<span class="pf-c-tabs__item-text">Users</span>
|
|
2805
|
+
</button>
|
|
2806
|
+
<span class="pf-c-tabs__item-close">
|
|
2807
|
+
<button
|
|
2808
|
+
class="pf-c-button pf-m-plain"
|
|
2809
|
+
type="button"
|
|
2810
|
+
aria-label="Close tab"
|
|
2811
|
+
>
|
|
2812
|
+
<span class="pf-c-tabs__item-close-icon">
|
|
2813
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
2814
|
+
</span>
|
|
2815
|
+
</button>
|
|
2816
|
+
</span>
|
|
2817
|
+
</li>
|
|
2818
|
+
<li class="pf-c-tabs__item pf-m-current pf-m-action">
|
|
2819
|
+
<button
|
|
2820
|
+
class="pf-c-tabs__link"
|
|
2821
|
+
id="close-secondary-secondary-example-containers-link"
|
|
2822
|
+
>
|
|
2823
|
+
<span class="pf-c-tabs__item-text">Containers</span>
|
|
2824
|
+
</button>
|
|
2825
|
+
<span class="pf-c-tabs__item-close">
|
|
2826
|
+
<button
|
|
2827
|
+
class="pf-c-button pf-m-plain"
|
|
2828
|
+
type="button"
|
|
2829
|
+
aria-label="Close tab"
|
|
2830
|
+
>
|
|
2831
|
+
<span class="pf-c-tabs__item-close-icon">
|
|
2832
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
2833
|
+
</span>
|
|
2834
|
+
</button>
|
|
2835
|
+
</span>
|
|
2836
|
+
</li>
|
|
2837
|
+
<li class="pf-c-tabs__item pf-m-action">
|
|
2838
|
+
<button
|
|
2839
|
+
class="pf-c-tabs__link"
|
|
2840
|
+
id="close-secondary-secondary-example-database-link"
|
|
2841
|
+
>
|
|
2842
|
+
<span class="pf-c-tabs__item-text">Database</span>
|
|
2843
|
+
</button>
|
|
2844
|
+
<span class="pf-c-tabs__item-close">
|
|
2845
|
+
<button
|
|
2846
|
+
class="pf-c-button pf-m-plain"
|
|
2847
|
+
type="button"
|
|
2848
|
+
aria-label="Close tab"
|
|
2849
|
+
>
|
|
2850
|
+
<span class="pf-c-tabs__item-close-icon">
|
|
2851
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
2852
|
+
</span>
|
|
2853
|
+
</button>
|
|
2854
|
+
</span>
|
|
2855
|
+
</li>
|
|
2856
|
+
|
|
2857
|
+
<li class="pf-c-tabs__item pf-m-action pf-m-disabled">
|
|
2858
|
+
<button
|
|
2859
|
+
class="pf-c-tabs__link"
|
|
2860
|
+
disabled
|
|
2861
|
+
id="close-secondary-secondary-example-disabled-link"
|
|
2862
|
+
>
|
|
2863
|
+
<span class="pf-c-tabs__item-text">Disabled</span>
|
|
2864
|
+
</button>
|
|
2865
|
+
<span class="pf-c-tabs__item-close">
|
|
2866
|
+
<button
|
|
2867
|
+
class="pf-c-button pf-m-plain"
|
|
2868
|
+
type="button"
|
|
2869
|
+
aria-label="Close tab"
|
|
2870
|
+
>
|
|
2871
|
+
<span class="pf-c-tabs__item-close-icon">
|
|
2872
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
2873
|
+
</span>
|
|
2874
|
+
</button>
|
|
2875
|
+
</span>
|
|
2876
|
+
</li>
|
|
2877
|
+
<li class="pf-c-tabs__item pf-m-action pf-m-disabled">
|
|
2878
|
+
<button
|
|
2879
|
+
class="pf-c-tabs__link pf-m-aria-disabled"
|
|
2880
|
+
aria-disabled="true"
|
|
2881
|
+
id="close-secondary-secondary-example-aria-disabled-link"
|
|
2882
|
+
>
|
|
2883
|
+
<span class="pf-c-tabs__item-text">ARIA disabled</span>
|
|
2884
|
+
</button>
|
|
2885
|
+
<span class="pf-c-tabs__item-close">
|
|
2886
|
+
<button
|
|
2887
|
+
class="pf-c-button pf-m-plain"
|
|
2888
|
+
type="button"
|
|
2889
|
+
aria-label="Close tab"
|
|
2890
|
+
>
|
|
2891
|
+
<span class="pf-c-tabs__item-close-icon">
|
|
2892
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
2893
|
+
</span>
|
|
2894
|
+
</button>
|
|
2895
|
+
</span>
|
|
2896
|
+
</li>
|
|
2897
|
+
<li class="pf-c-tabs__item pf-m-action pf-m-disabled">
|
|
2898
|
+
<button
|
|
2899
|
+
class="pf-c-tabs__link"
|
|
2900
|
+
disabled
|
|
2901
|
+
id="close-secondary-secondary-example-close-disabled-link"
|
|
2902
|
+
>
|
|
2903
|
+
<span class="pf-c-tabs__item-text">Close disabled</span>
|
|
2904
|
+
</button>
|
|
2905
|
+
<span class="pf-c-tabs__item-close">
|
|
2906
|
+
<button
|
|
2907
|
+
class="pf-c-button pf-m-plain"
|
|
2908
|
+
type="button"
|
|
2909
|
+
aria-label="Close tab"
|
|
2910
|
+
disabled
|
|
2911
|
+
>
|
|
2912
|
+
<span class="pf-c-tabs__item-close-icon">
|
|
2913
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
2914
|
+
</span>
|
|
2915
|
+
</button>
|
|
2916
|
+
</span>
|
|
2917
|
+
</li>
|
|
2918
|
+
<li class="pf-c-tabs__item pf-m-action">
|
|
2919
|
+
<button
|
|
2920
|
+
class="pf-c-tabs__link"
|
|
2921
|
+
id="close-secondary-secondary-example-network-wired-link"
|
|
2922
|
+
>
|
|
2923
|
+
<span class="pf-c-tabs__item-text">Network</span>
|
|
2924
|
+
</button>
|
|
2925
|
+
<span class="pf-c-tabs__item-close">
|
|
2926
|
+
<button
|
|
2927
|
+
class="pf-c-button pf-m-plain"
|
|
2928
|
+
type="button"
|
|
2929
|
+
aria-label="Close tab"
|
|
2930
|
+
>
|
|
2931
|
+
<span class="pf-c-tabs__item-close-icon">
|
|
2932
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
2933
|
+
</span>
|
|
2934
|
+
</button>
|
|
2935
|
+
</span>
|
|
2936
|
+
</li>
|
|
2937
|
+
</ul>
|
|
2938
|
+
|
|
2939
|
+
<button class="pf-c-tabs__scroll-button" aria-label="Scroll right">
|
|
2940
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2941
|
+
</button>
|
|
2942
|
+
</div>
|
|
2943
|
+
|
|
2944
|
+
```
|
|
2945
|
+
|
|
2946
|
+
### Add tab button
|
|
2947
|
+
|
|
2948
|
+
```html
|
|
2949
|
+
<div class="pf-c-tabs pf-m-scrollable" id="close-default-example">
|
|
2950
|
+
<button class="pf-c-tabs__scroll-button" disabled aria-label="Scroll left">
|
|
2951
|
+
<i class="fas fa-angle-left" aria-hidden="true"></i>
|
|
2952
|
+
</button>
|
|
2953
|
+
<ul class="pf-c-tabs__list">
|
|
2954
|
+
<li class="pf-c-tabs__item pf-m-action">
|
|
2955
|
+
<button class="pf-c-tabs__link" id="close-default-example-users-link">
|
|
2956
|
+
<span class="pf-c-tabs__item-text">Users</span>
|
|
2957
|
+
</button>
|
|
2958
|
+
<span class="pf-c-tabs__item-close">
|
|
2959
|
+
<button
|
|
2960
|
+
class="pf-c-button pf-m-plain"
|
|
2961
|
+
type="button"
|
|
2962
|
+
aria-label="Close tab"
|
|
2963
|
+
>
|
|
2964
|
+
<span class="pf-c-tabs__item-close-icon">
|
|
2965
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
2966
|
+
</span>
|
|
2967
|
+
</button>
|
|
2968
|
+
</span>
|
|
2969
|
+
</li>
|
|
2970
|
+
<li class="pf-c-tabs__item pf-m-current pf-m-action">
|
|
2971
|
+
<button
|
|
2972
|
+
class="pf-c-tabs__link"
|
|
2973
|
+
id="close-default-example-containers-link"
|
|
2974
|
+
>
|
|
2975
|
+
<span class="pf-c-tabs__item-text">Containers</span>
|
|
2976
|
+
</button>
|
|
2977
|
+
<span class="pf-c-tabs__item-close">
|
|
2978
|
+
<button
|
|
2979
|
+
class="pf-c-button pf-m-plain"
|
|
2980
|
+
type="button"
|
|
2981
|
+
aria-label="Close tab"
|
|
2982
|
+
>
|
|
2983
|
+
<span class="pf-c-tabs__item-close-icon">
|
|
2984
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
2985
|
+
</span>
|
|
2986
|
+
</button>
|
|
2987
|
+
</span>
|
|
2988
|
+
</li>
|
|
2989
|
+
<li class="pf-c-tabs__item pf-m-action">
|
|
2990
|
+
<button class="pf-c-tabs__link" id="close-default-example-database-link">
|
|
2991
|
+
<span class="pf-c-tabs__item-text">Database</span>
|
|
2992
|
+
</button>
|
|
2993
|
+
<span class="pf-c-tabs__item-close">
|
|
2994
|
+
<button
|
|
2995
|
+
class="pf-c-button pf-m-plain"
|
|
2996
|
+
type="button"
|
|
2997
|
+
aria-label="Close tab"
|
|
2998
|
+
>
|
|
2999
|
+
<span class="pf-c-tabs__item-close-icon">
|
|
3000
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
3001
|
+
</span>
|
|
3002
|
+
</button>
|
|
3003
|
+
</span>
|
|
3004
|
+
</li>
|
|
3005
|
+
|
|
3006
|
+
<li class="pf-c-tabs__item pf-m-action">
|
|
3007
|
+
<button class="pf-c-tabs__link" id="close-default-example-server-link">
|
|
3008
|
+
<span class="pf-c-tabs__item-text">Server</span>
|
|
3009
|
+
</button>
|
|
3010
|
+
<span class="pf-c-tabs__item-close">
|
|
3011
|
+
<button
|
|
3012
|
+
class="pf-c-button pf-m-plain"
|
|
3013
|
+
type="button"
|
|
3014
|
+
aria-label="Close tab"
|
|
3015
|
+
>
|
|
3016
|
+
<span class="pf-c-tabs__item-close-icon">
|
|
3017
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
3018
|
+
</span>
|
|
3019
|
+
</button>
|
|
3020
|
+
</span>
|
|
3021
|
+
</li>
|
|
3022
|
+
<li class="pf-c-tabs__item pf-m-action">
|
|
3023
|
+
<button class="pf-c-tabs__link" id="close-default-example-system-link">
|
|
3024
|
+
<span class="pf-c-tabs__item-text">System</span>
|
|
3025
|
+
</button>
|
|
3026
|
+
<span class="pf-c-tabs__item-close">
|
|
3027
|
+
<button
|
|
3028
|
+
class="pf-c-button pf-m-plain"
|
|
3029
|
+
type="button"
|
|
3030
|
+
aria-label="Close tab"
|
|
3031
|
+
>
|
|
3032
|
+
<span class="pf-c-tabs__item-close-icon">
|
|
3033
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
3034
|
+
</span>
|
|
3035
|
+
</button>
|
|
3036
|
+
</span>
|
|
3037
|
+
</li>
|
|
3038
|
+
<li class="pf-c-tabs__item pf-m-action">
|
|
3039
|
+
<button
|
|
3040
|
+
class="pf-c-tabs__link"
|
|
3041
|
+
id="close-default-example-network-wired-link"
|
|
3042
|
+
>
|
|
3043
|
+
<span class="pf-c-tabs__item-text">Network</span>
|
|
3044
|
+
</button>
|
|
3045
|
+
<span class="pf-c-tabs__item-close">
|
|
3046
|
+
<button
|
|
3047
|
+
class="pf-c-button pf-m-plain"
|
|
3048
|
+
type="button"
|
|
3049
|
+
aria-label="Close tab"
|
|
3050
|
+
>
|
|
3051
|
+
<span class="pf-c-tabs__item-close-icon">
|
|
3052
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
3053
|
+
</span>
|
|
3054
|
+
</button>
|
|
3055
|
+
</span>
|
|
3056
|
+
</li>
|
|
3057
|
+
</ul>
|
|
3058
|
+
|
|
3059
|
+
<button class="pf-c-tabs__scroll-button" aria-label="Scroll right">
|
|
3060
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
3061
|
+
</button>
|
|
3062
|
+
<span class="pf-c-tabs__add">
|
|
3063
|
+
<button class="pf-c-button pf-m-plain" type="button" aria-label="Add tab">
|
|
3064
|
+
<i class="fas fa-plus" aria-hidden="true"></i>
|
|
3065
|
+
</button>
|
|
3066
|
+
</span>
|
|
3067
|
+
</div>
|
|
3068
|
+
<div
|
|
3069
|
+
class="pf-c-tabs pf-m-secondary pf-m-scrollable"
|
|
3070
|
+
id="close-secondary-example"
|
|
3071
|
+
>
|
|
3072
|
+
<button class="pf-c-tabs__scroll-button" disabled aria-label="Scroll left">
|
|
3073
|
+
<i class="fas fa-angle-left" aria-hidden="true"></i>
|
|
3074
|
+
</button>
|
|
3075
|
+
<ul class="pf-c-tabs__list">
|
|
3076
|
+
<li class="pf-c-tabs__item pf-m-action">
|
|
3077
|
+
<button class="pf-c-tabs__link" id="close-secondary-example-users-link">
|
|
3078
|
+
<span class="pf-c-tabs__item-text">Users</span>
|
|
3079
|
+
</button>
|
|
3080
|
+
<span class="pf-c-tabs__item-close">
|
|
3081
|
+
<button
|
|
3082
|
+
class="pf-c-button pf-m-plain"
|
|
3083
|
+
type="button"
|
|
3084
|
+
aria-label="Close tab"
|
|
3085
|
+
>
|
|
3086
|
+
<span class="pf-c-tabs__item-close-icon">
|
|
3087
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
3088
|
+
</span>
|
|
3089
|
+
</button>
|
|
3090
|
+
</span>
|
|
3091
|
+
</li>
|
|
3092
|
+
<li class="pf-c-tabs__item pf-m-current pf-m-action">
|
|
3093
|
+
<button
|
|
3094
|
+
class="pf-c-tabs__link"
|
|
3095
|
+
id="close-secondary-example-containers-link"
|
|
3096
|
+
>
|
|
3097
|
+
<span class="pf-c-tabs__item-text">Containers</span>
|
|
3098
|
+
</button>
|
|
3099
|
+
<span class="pf-c-tabs__item-close">
|
|
3100
|
+
<button
|
|
3101
|
+
class="pf-c-button pf-m-plain"
|
|
3102
|
+
type="button"
|
|
3103
|
+
aria-label="Close tab"
|
|
3104
|
+
>
|
|
3105
|
+
<span class="pf-c-tabs__item-close-icon">
|
|
3106
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
3107
|
+
</span>
|
|
3108
|
+
</button>
|
|
3109
|
+
</span>
|
|
3110
|
+
</li>
|
|
3111
|
+
<li class="pf-c-tabs__item pf-m-action">
|
|
3112
|
+
<button
|
|
3113
|
+
class="pf-c-tabs__link"
|
|
3114
|
+
id="close-secondary-example-database-link"
|
|
3115
|
+
>
|
|
3116
|
+
<span class="pf-c-tabs__item-text">Database</span>
|
|
3117
|
+
</button>
|
|
3118
|
+
<span class="pf-c-tabs__item-close">
|
|
3119
|
+
<button
|
|
3120
|
+
class="pf-c-button pf-m-plain"
|
|
3121
|
+
type="button"
|
|
3122
|
+
aria-label="Close tab"
|
|
3123
|
+
>
|
|
3124
|
+
<span class="pf-c-tabs__item-close-icon">
|
|
3125
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
3126
|
+
</span>
|
|
3127
|
+
</button>
|
|
3128
|
+
</span>
|
|
3129
|
+
</li>
|
|
3130
|
+
|
|
3131
|
+
<li class="pf-c-tabs__item pf-m-action">
|
|
3132
|
+
<button class="pf-c-tabs__link" id="close-secondary-example-server-link">
|
|
3133
|
+
<span class="pf-c-tabs__item-text">Server</span>
|
|
3134
|
+
</button>
|
|
3135
|
+
<span class="pf-c-tabs__item-close">
|
|
3136
|
+
<button
|
|
3137
|
+
class="pf-c-button pf-m-plain"
|
|
3138
|
+
type="button"
|
|
3139
|
+
aria-label="Close tab"
|
|
3140
|
+
>
|
|
3141
|
+
<span class="pf-c-tabs__item-close-icon">
|
|
3142
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
3143
|
+
</span>
|
|
3144
|
+
</button>
|
|
3145
|
+
</span>
|
|
3146
|
+
</li>
|
|
3147
|
+
<li class="pf-c-tabs__item pf-m-action">
|
|
3148
|
+
<button class="pf-c-tabs__link" id="close-secondary-example-system-link">
|
|
3149
|
+
<span class="pf-c-tabs__item-text">System</span>
|
|
3150
|
+
</button>
|
|
3151
|
+
<span class="pf-c-tabs__item-close">
|
|
3152
|
+
<button
|
|
3153
|
+
class="pf-c-button pf-m-plain"
|
|
3154
|
+
type="button"
|
|
3155
|
+
aria-label="Close tab"
|
|
3156
|
+
>
|
|
3157
|
+
<span class="pf-c-tabs__item-close-icon">
|
|
3158
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
3159
|
+
</span>
|
|
3160
|
+
</button>
|
|
3161
|
+
</span>
|
|
3162
|
+
</li>
|
|
3163
|
+
<li class="pf-c-tabs__item pf-m-action">
|
|
3164
|
+
<button
|
|
3165
|
+
class="pf-c-tabs__link"
|
|
3166
|
+
id="close-secondary-example-network-wired-link"
|
|
3167
|
+
>
|
|
3168
|
+
<span class="pf-c-tabs__item-text">Network</span>
|
|
3169
|
+
</button>
|
|
3170
|
+
<span class="pf-c-tabs__item-close">
|
|
3171
|
+
<button
|
|
3172
|
+
class="pf-c-button pf-m-plain"
|
|
3173
|
+
type="button"
|
|
3174
|
+
aria-label="Close tab"
|
|
3175
|
+
>
|
|
3176
|
+
<span class="pf-c-tabs__item-close-icon">
|
|
3177
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
3178
|
+
</span>
|
|
3179
|
+
</button>
|
|
3180
|
+
</span>
|
|
3181
|
+
</li>
|
|
3182
|
+
</ul>
|
|
3183
|
+
|
|
3184
|
+
<button class="pf-c-tabs__scroll-button" aria-label="Scroll right">
|
|
3185
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
3186
|
+
</button>
|
|
3187
|
+
<span class="pf-c-tabs__add">
|
|
3188
|
+
<button class="pf-c-button pf-m-plain" type="button" aria-label="Add tab">
|
|
3189
|
+
<i class="fas fa-plus" aria-hidden="true"></i>
|
|
3190
|
+
</button>
|
|
3191
|
+
</span>
|
|
3192
|
+
</div>
|
|
3193
|
+
|
|
3194
|
+
<br />
|
|
3195
|
+
<br />
|
|
3196
|
+
|
|
3197
|
+
<div class="pf-c-tabs pf-m-box pf-m-scrollable" id="close-box-example">
|
|
3198
|
+
<button class="pf-c-tabs__scroll-button" disabled aria-label="Scroll left">
|
|
3199
|
+
<i class="fas fa-angle-left" aria-hidden="true"></i>
|
|
3200
|
+
</button>
|
|
3201
|
+
<ul class="pf-c-tabs__list">
|
|
3202
|
+
<li class="pf-c-tabs__item pf-m-action">
|
|
3203
|
+
<button class="pf-c-tabs__link" id="close-box-example-users-link">
|
|
3204
|
+
<span class="pf-c-tabs__item-text">Users</span>
|
|
3205
|
+
</button>
|
|
3206
|
+
<span class="pf-c-tabs__item-close">
|
|
3207
|
+
<button
|
|
3208
|
+
class="pf-c-button pf-m-plain"
|
|
3209
|
+
type="button"
|
|
3210
|
+
aria-label="Close tab"
|
|
3211
|
+
>
|
|
3212
|
+
<span class="pf-c-tabs__item-close-icon">
|
|
3213
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
3214
|
+
</span>
|
|
3215
|
+
</button>
|
|
3216
|
+
</span>
|
|
3217
|
+
</li>
|
|
3218
|
+
<li class="pf-c-tabs__item pf-m-current pf-m-action">
|
|
3219
|
+
<button class="pf-c-tabs__link" id="close-box-example-containers-link">
|
|
3220
|
+
<span class="pf-c-tabs__item-text">Containers</span>
|
|
3221
|
+
</button>
|
|
3222
|
+
<span class="pf-c-tabs__item-close">
|
|
3223
|
+
<button
|
|
3224
|
+
class="pf-c-button pf-m-plain"
|
|
3225
|
+
type="button"
|
|
3226
|
+
aria-label="Close tab"
|
|
3227
|
+
>
|
|
3228
|
+
<span class="pf-c-tabs__item-close-icon">
|
|
3229
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
3230
|
+
</span>
|
|
3231
|
+
</button>
|
|
3232
|
+
</span>
|
|
3233
|
+
</li>
|
|
3234
|
+
<li class="pf-c-tabs__item pf-m-action">
|
|
3235
|
+
<button class="pf-c-tabs__link" id="close-box-example-database-link">
|
|
3236
|
+
<span class="pf-c-tabs__item-text">Database</span>
|
|
3237
|
+
</button>
|
|
3238
|
+
<span class="pf-c-tabs__item-close">
|
|
3239
|
+
<button
|
|
3240
|
+
class="pf-c-button pf-m-plain"
|
|
3241
|
+
type="button"
|
|
3242
|
+
aria-label="Close tab"
|
|
3243
|
+
>
|
|
3244
|
+
<span class="pf-c-tabs__item-close-icon">
|
|
3245
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
3246
|
+
</span>
|
|
3247
|
+
</button>
|
|
3248
|
+
</span>
|
|
3249
|
+
</li>
|
|
3250
|
+
|
|
3251
|
+
<li class="pf-c-tabs__item pf-m-action">
|
|
3252
|
+
<button class="pf-c-tabs__link" id="close-box-example-server-link">
|
|
3253
|
+
<span class="pf-c-tabs__item-text">Server</span>
|
|
3254
|
+
</button>
|
|
3255
|
+
<span class="pf-c-tabs__item-close">
|
|
3256
|
+
<button
|
|
3257
|
+
class="pf-c-button pf-m-plain"
|
|
3258
|
+
type="button"
|
|
3259
|
+
aria-label="Close tab"
|
|
3260
|
+
>
|
|
3261
|
+
<span class="pf-c-tabs__item-close-icon">
|
|
3262
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
3263
|
+
</span>
|
|
3264
|
+
</button>
|
|
3265
|
+
</span>
|
|
3266
|
+
</li>
|
|
3267
|
+
<li class="pf-c-tabs__item pf-m-action">
|
|
3268
|
+
<button class="pf-c-tabs__link" id="close-box-example-system-link">
|
|
3269
|
+
<span class="pf-c-tabs__item-text">System</span>
|
|
3270
|
+
</button>
|
|
3271
|
+
<span class="pf-c-tabs__item-close">
|
|
3272
|
+
<button
|
|
3273
|
+
class="pf-c-button pf-m-plain"
|
|
3274
|
+
type="button"
|
|
3275
|
+
aria-label="Close tab"
|
|
3276
|
+
>
|
|
3277
|
+
<span class="pf-c-tabs__item-close-icon">
|
|
3278
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
3279
|
+
</span>
|
|
3280
|
+
</button>
|
|
3281
|
+
</span>
|
|
3282
|
+
</li>
|
|
3283
|
+
<li class="pf-c-tabs__item pf-m-action">
|
|
3284
|
+
<button class="pf-c-tabs__link" id="close-box-example-network-wired-link">
|
|
3285
|
+
<span class="pf-c-tabs__item-text">Network</span>
|
|
3286
|
+
</button>
|
|
3287
|
+
<span class="pf-c-tabs__item-close">
|
|
3288
|
+
<button
|
|
3289
|
+
class="pf-c-button pf-m-plain"
|
|
3290
|
+
type="button"
|
|
3291
|
+
aria-label="Close tab"
|
|
3292
|
+
>
|
|
3293
|
+
<span class="pf-c-tabs__item-close-icon">
|
|
3294
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
3295
|
+
</span>
|
|
3296
|
+
</button>
|
|
3297
|
+
</span>
|
|
3298
|
+
</li>
|
|
3299
|
+
</ul>
|
|
3300
|
+
|
|
3301
|
+
<button class="pf-c-tabs__scroll-button" aria-label="Scroll right">
|
|
3302
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
3303
|
+
</button>
|
|
3304
|
+
<span class="pf-c-tabs__add">
|
|
3305
|
+
<button class="pf-c-button pf-m-plain" type="button" aria-label="Add tab">
|
|
3306
|
+
<i class="fas fa-plus" aria-hidden="true"></i>
|
|
3307
|
+
</button>
|
|
3308
|
+
</span>
|
|
3309
|
+
</div>
|
|
3310
|
+
|
|
3311
|
+
<br />
|
|
3312
|
+
<br />
|
|
3313
|
+
|
|
3314
|
+
<div
|
|
3315
|
+
class="pf-c-tabs pf-m-box pf-m-color-scheme--light-300 pf-m-scrollable"
|
|
3316
|
+
id="close-box-light-300-example"
|
|
3317
|
+
>
|
|
3318
|
+
<button class="pf-c-tabs__scroll-button" disabled aria-label="Scroll left">
|
|
3319
|
+
<i class="fas fa-angle-left" aria-hidden="true"></i>
|
|
3320
|
+
</button>
|
|
3321
|
+
<ul class="pf-c-tabs__list">
|
|
3322
|
+
<li class="pf-c-tabs__item pf-m-action">
|
|
3323
|
+
<button
|
|
3324
|
+
class="pf-c-tabs__link"
|
|
3325
|
+
id="close-box-light-300-example-users-link"
|
|
3326
|
+
>
|
|
3327
|
+
<span class="pf-c-tabs__item-text">Users</span>
|
|
3328
|
+
</button>
|
|
3329
|
+
<span class="pf-c-tabs__item-close">
|
|
3330
|
+
<button
|
|
3331
|
+
class="pf-c-button pf-m-plain"
|
|
3332
|
+
type="button"
|
|
3333
|
+
aria-label="Close tab"
|
|
3334
|
+
>
|
|
3335
|
+
<span class="pf-c-tabs__item-close-icon">
|
|
3336
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
3337
|
+
</span>
|
|
3338
|
+
</button>
|
|
3339
|
+
</span>
|
|
3340
|
+
</li>
|
|
3341
|
+
<li class="pf-c-tabs__item pf-m-current pf-m-action">
|
|
3342
|
+
<button
|
|
3343
|
+
class="pf-c-tabs__link"
|
|
3344
|
+
id="close-box-light-300-example-containers-link"
|
|
3345
|
+
>
|
|
3346
|
+
<span class="pf-c-tabs__item-text">Containers</span>
|
|
3347
|
+
</button>
|
|
3348
|
+
<span class="pf-c-tabs__item-close">
|
|
3349
|
+
<button
|
|
3350
|
+
class="pf-c-button pf-m-plain"
|
|
3351
|
+
type="button"
|
|
3352
|
+
aria-label="Close tab"
|
|
3353
|
+
>
|
|
3354
|
+
<span class="pf-c-tabs__item-close-icon">
|
|
3355
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
3356
|
+
</span>
|
|
3357
|
+
</button>
|
|
3358
|
+
</span>
|
|
3359
|
+
</li>
|
|
3360
|
+
<li class="pf-c-tabs__item pf-m-action">
|
|
3361
|
+
<button
|
|
3362
|
+
class="pf-c-tabs__link"
|
|
3363
|
+
id="close-box-light-300-example-database-link"
|
|
3364
|
+
>
|
|
3365
|
+
<span class="pf-c-tabs__item-text">Database</span>
|
|
3366
|
+
</button>
|
|
3367
|
+
<span class="pf-c-tabs__item-close">
|
|
3368
|
+
<button
|
|
3369
|
+
class="pf-c-button pf-m-plain"
|
|
3370
|
+
type="button"
|
|
3371
|
+
aria-label="Close tab"
|
|
3372
|
+
>
|
|
3373
|
+
<span class="pf-c-tabs__item-close-icon">
|
|
3374
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
3375
|
+
</span>
|
|
3376
|
+
</button>
|
|
3377
|
+
</span>
|
|
3378
|
+
</li>
|
|
3379
|
+
|
|
3380
|
+
<li class="pf-c-tabs__item pf-m-action">
|
|
3381
|
+
<button
|
|
3382
|
+
class="pf-c-tabs__link"
|
|
3383
|
+
id="close-box-light-300-example-server-link"
|
|
3384
|
+
>
|
|
3385
|
+
<span class="pf-c-tabs__item-text">Server</span>
|
|
3386
|
+
</button>
|
|
3387
|
+
<span class="pf-c-tabs__item-close">
|
|
3388
|
+
<button
|
|
3389
|
+
class="pf-c-button pf-m-plain"
|
|
3390
|
+
type="button"
|
|
3391
|
+
aria-label="Close tab"
|
|
3392
|
+
>
|
|
3393
|
+
<span class="pf-c-tabs__item-close-icon">
|
|
3394
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
3395
|
+
</span>
|
|
3396
|
+
</button>
|
|
3397
|
+
</span>
|
|
3398
|
+
</li>
|
|
3399
|
+
<li class="pf-c-tabs__item pf-m-action">
|
|
3400
|
+
<button
|
|
3401
|
+
class="pf-c-tabs__link"
|
|
3402
|
+
id="close-box-light-300-example-system-link"
|
|
3403
|
+
>
|
|
3404
|
+
<span class="pf-c-tabs__item-text">System</span>
|
|
3405
|
+
</button>
|
|
3406
|
+
<span class="pf-c-tabs__item-close">
|
|
3407
|
+
<button
|
|
3408
|
+
class="pf-c-button pf-m-plain"
|
|
3409
|
+
type="button"
|
|
3410
|
+
aria-label="Close tab"
|
|
3411
|
+
>
|
|
3412
|
+
<span class="pf-c-tabs__item-close-icon">
|
|
3413
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
3414
|
+
</span>
|
|
3415
|
+
</button>
|
|
3416
|
+
</span>
|
|
3417
|
+
</li>
|
|
3418
|
+
<li class="pf-c-tabs__item pf-m-action">
|
|
3419
|
+
<button
|
|
3420
|
+
class="pf-c-tabs__link"
|
|
3421
|
+
id="close-box-light-300-example-network-wired-link"
|
|
3422
|
+
>
|
|
3423
|
+
<span class="pf-c-tabs__item-text">Network</span>
|
|
3424
|
+
</button>
|
|
3425
|
+
<span class="pf-c-tabs__item-close">
|
|
3426
|
+
<button
|
|
3427
|
+
class="pf-c-button pf-m-plain"
|
|
3428
|
+
type="button"
|
|
3429
|
+
aria-label="Close tab"
|
|
3430
|
+
>
|
|
3431
|
+
<span class="pf-c-tabs__item-close-icon">
|
|
3432
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
3433
|
+
</span>
|
|
3434
|
+
</button>
|
|
3435
|
+
</span>
|
|
3436
|
+
</li>
|
|
3437
|
+
</ul>
|
|
3438
|
+
|
|
3439
|
+
<button class="pf-c-tabs__scroll-button" aria-label="Scroll right">
|
|
3440
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
3441
|
+
</button>
|
|
3442
|
+
<span class="pf-c-tabs__add">
|
|
3443
|
+
<button class="pf-c-button pf-m-plain" type="button" aria-label="Add tab">
|
|
3444
|
+
<i class="fas fa-plus" aria-hidden="true"></i>
|
|
3445
|
+
</button>
|
|
3446
|
+
</span>
|
|
3447
|
+
</div>
|
|
3448
|
+
|
|
3449
|
+
```
|
|
3450
|
+
|
|
1880
3451
|
The tabs component should only be used to change content views within a page. The similar-looking but semantically different [horizontal nav component](/components/navigation/#horizontal) is available for general navigation use cases.
|
|
1881
3452
|
|
|
1882
3453
|
Tabs should be used with the [tab content component](/components/tab-content).
|
|
@@ -1902,18 +3473,23 @@ Whenever a list of tabs is unique on the current page, it can be used in a `<nav
|
|
|
1902
3473
|
| `.pf-c-tabs__item` | `<li>` | Initiates a tabs component item. **Required** |
|
|
1903
3474
|
| `.pf-c-tabs__item-text` | `<span>` | Initiates a tabs component item icon. **Required** |
|
|
1904
3475
|
| `.pf-c-tabs__item-icon` | `<span>` | Initiates a tabs component item text. **Required** |
|
|
3476
|
+
| `.pf-c-tabs__item-close` | `<span>` | Initiates a tabs component item close. |
|
|
3477
|
+
| `.pf-c-tabs__item-close-icon` | `<span>` | Initiates a tabs component item close icon. |
|
|
1905
3478
|
| `.pf-c-tabs__link` | `<button>`, `<a>` | Initiates a tabs component link. **Required** |
|
|
1906
3479
|
| `.pf-c-tabs__scroll-button` | `<button>` | Initiates a tabs component scroll button. |
|
|
3480
|
+
| `.pf-c-tabs__add` | `<span>` | Initiates a tabs component add button. |
|
|
1907
3481
|
| `.pf-c-tabs__toggle` | `<div>` | Initiates a tabs expandable toggle. |
|
|
1908
3482
|
| `.pf-c-tabs__toggle-button` | `<button>` | Initiates a tabs expandable toggle button. |
|
|
1909
3483
|
| `.pf-c-tabs__toggle-icon` | `<span>` | Initiates a tabs expandable toggle icon. |
|
|
1910
3484
|
| `.pf-c-tabs__toggle-text` | `<span>` | Initiates a tabs expandable toggle text. |
|
|
1911
3485
|
| `.pf-m-secondary` | `.pf-c-tabs` | Applies secondary styling to the tab component. |
|
|
1912
3486
|
| `.pf-m-no-border-bottom` | `.pf-c-tabs` | Removes bottom border from a tab component. |
|
|
3487
|
+
| `.pf-m-border-bottom` | `.pf-c-tabs` | Adds a bottom border to secondary tabs. |
|
|
1913
3488
|
| `.pf-m-box` | `.pf-c-tabs` | Applies box styling to the tab component. |
|
|
1914
3489
|
| `.pf-m-vertical` | `.pf-c-tabs` | Applies vertical styling to the tab component. |
|
|
1915
3490
|
| `.pf-m-fill` | `.pf-c-tabs` | Modifies the tabs to fill the available space. |
|
|
1916
3491
|
| `.pf-m-current` | `.pf-c-tabs__item` | Indicates that a tab item is currently selected. |
|
|
3492
|
+
| `.pf-m-action` | `.pf-c-tabs__item` | Indicates that a tab item contains actions other than the tab link. |
|
|
1917
3493
|
| `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[md, lg, xl, 2xl]}` | `.pf-c-tabs` | Modifies the tabs component padding/inset to visually match padding of other adjacent components. |
|
|
1918
3494
|
| `.pf-m-page-insets` | `.pf-c-tabs` | Modifies the tabs component padding/inset to visually match padding of page elements. |
|
|
1919
3495
|
| `.pf-m-color-scheme--light-300` | `.pf-c-tabs` | Modifies the tabs component tab background colors. |
|