@patternfly/patternfly 6.5.0-prerelease.77 → 6.5.0-prerelease.79
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/components/Button/button.css +10 -4
- package/components/Button/button.scss +7 -1
- package/components/Compass/compass.css +147 -3
- package/components/Compass/compass.scss +142 -3
- package/components/Masthead/masthead.css +3 -3
- package/components/Masthead/masthead.scss +1 -1
- package/components/MenuToggle/menu-toggle.css +3 -3
- package/components/MenuToggle/menu-toggle.scss +1 -1
- package/components/Nav/nav.css +2 -2
- package/components/Nav/nav.scss +1 -1
- package/components/Page/page.css +12 -8
- package/components/Page/page.scss +6 -1
- package/components/Pagination/pagination.css +56 -4
- package/components/Pagination/pagination.scss +66 -5
- package/components/_index.css +233 -27
- package/docs/components/Compass/examples/Compass.css +2 -11
- package/docs/components/Compass/examples/Compass.md +8 -1
- package/docs/components/Nav/examples/Navigation.md +105 -9
- package/docs/components/Pagination/examples/Pagination.md +495 -3
- package/docs/demos/CardView/examples/CardView.md +1 -1
- package/docs/demos/Compass/examples/Compass.md +2108 -267
- package/docs/demos/DataList/examples/DataList.md +1 -1
- package/docs/demos/Nav/examples/Nav.md +272 -90
- package/docs/demos/Table/examples/Table.md +1 -1
- package/docs/demos/Toolbar/examples/Toolbar.md +7 -7
- package/package.json +1 -1
- package/patternfly-no-globals.css +233 -27
- package/patternfly.css +233 -27
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/sass-utilities/mixins.scss +2 -2
|
@@ -635,6 +635,166 @@ cssPrefix: pf-v6-c-pagination
|
|
|
635
635
|
|
|
636
636
|
```
|
|
637
637
|
|
|
638
|
+
### Bottom plain
|
|
639
|
+
|
|
640
|
+
```html
|
|
641
|
+
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
|
|
642
|
+
<br />
|
|
643
|
+
<br />
|
|
644
|
+
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
|
|
645
|
+
<br />
|
|
646
|
+
<br />
|
|
647
|
+
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
|
|
648
|
+
<br />
|
|
649
|
+
<br />
|
|
650
|
+
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
|
|
651
|
+
<div class="pf-v6-c-pagination pf-m-plain pf-m-bottom">
|
|
652
|
+
<div class="pf-v6-c-pagination__page-menu">
|
|
653
|
+
<button
|
|
654
|
+
class="pf-v6-c-menu-toggle pf-m-top pf-m-text pf-m-plain"
|
|
655
|
+
type="button"
|
|
656
|
+
aria-expanded="false"
|
|
657
|
+
id="pagination-plain-bottom-menu-toggle"
|
|
658
|
+
>
|
|
659
|
+
<span class="pf-v6-c-menu-toggle__text">
|
|
660
|
+
<b>1 - 10</b> of
|
|
661
|
+
<b>36</b>
|
|
662
|
+
</span>
|
|
663
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
664
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
665
|
+
<svg
|
|
666
|
+
class="pf-v6-svg"
|
|
667
|
+
viewBox="0 0 20 20"
|
|
668
|
+
fill="currentColor"
|
|
669
|
+
aria-hidden="true"
|
|
670
|
+
role="img"
|
|
671
|
+
width="1em"
|
|
672
|
+
height="1em"
|
|
673
|
+
>
|
|
674
|
+
<path
|
|
675
|
+
d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
|
|
676
|
+
/>
|
|
677
|
+
</svg>
|
|
678
|
+
</span>
|
|
679
|
+
</span>
|
|
680
|
+
</button>
|
|
681
|
+
</div>
|
|
682
|
+
<nav
|
|
683
|
+
class="pf-v6-c-pagination__nav"
|
|
684
|
+
aria-label="Pagination nav - plain bottom example"
|
|
685
|
+
>
|
|
686
|
+
<div class="pf-v6-c-pagination__nav-control pf-m-first">
|
|
687
|
+
<button
|
|
688
|
+
class="pf-v6-c-button pf-m-plain"
|
|
689
|
+
type="button"
|
|
690
|
+
disabled
|
|
691
|
+
aria-label="Go to first page"
|
|
692
|
+
>
|
|
693
|
+
<span class="pf-v6-c-button__icon">
|
|
694
|
+
<svg
|
|
695
|
+
class="pf-v6-svg"
|
|
696
|
+
viewBox="0 0 448 512"
|
|
697
|
+
fill="currentColor"
|
|
698
|
+
aria-hidden="true"
|
|
699
|
+
role="img"
|
|
700
|
+
width="1em"
|
|
701
|
+
height="1em"
|
|
702
|
+
>
|
|
703
|
+
<path
|
|
704
|
+
d="M223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
|
|
705
|
+
/>
|
|
706
|
+
</svg>
|
|
707
|
+
</span>
|
|
708
|
+
</button>
|
|
709
|
+
</div>
|
|
710
|
+
<div class="pf-v6-c-pagination__nav-control pf-m-prev">
|
|
711
|
+
<button
|
|
712
|
+
class="pf-v6-c-button pf-m-plain"
|
|
713
|
+
type="button"
|
|
714
|
+
disabled
|
|
715
|
+
aria-label="Go to previous page"
|
|
716
|
+
>
|
|
717
|
+
<span class="pf-v6-c-button__icon">
|
|
718
|
+
<svg
|
|
719
|
+
class="pf-v6-svg"
|
|
720
|
+
viewBox="0 0 256 512"
|
|
721
|
+
fill="currentColor"
|
|
722
|
+
aria-hidden="true"
|
|
723
|
+
role="img"
|
|
724
|
+
width="1em"
|
|
725
|
+
height="1em"
|
|
726
|
+
>
|
|
727
|
+
<path
|
|
728
|
+
d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
|
|
729
|
+
/>
|
|
730
|
+
</svg>
|
|
731
|
+
</span>
|
|
732
|
+
</button>
|
|
733
|
+
</div>
|
|
734
|
+
<div class="pf-v6-c-pagination__nav-page-select">
|
|
735
|
+
<span class="pf-v6-c-form-control">
|
|
736
|
+
<input
|
|
737
|
+
aria-label="Current page"
|
|
738
|
+
type="number"
|
|
739
|
+
min="1"
|
|
740
|
+
max="4"
|
|
741
|
+
value="1"
|
|
742
|
+
/>
|
|
743
|
+
</span>
|
|
744
|
+
<span aria-hidden="true">of 4</span>
|
|
745
|
+
</div>
|
|
746
|
+
<div class="pf-v6-c-pagination__nav-control pf-m-next">
|
|
747
|
+
<button
|
|
748
|
+
class="pf-v6-c-button pf-m-plain"
|
|
749
|
+
type="button"
|
|
750
|
+
aria-label="Go to next page"
|
|
751
|
+
>
|
|
752
|
+
<span class="pf-v6-c-button__icon">
|
|
753
|
+
<svg
|
|
754
|
+
class="pf-v6-svg"
|
|
755
|
+
viewBox="0 0 256 512"
|
|
756
|
+
fill="currentColor"
|
|
757
|
+
aria-hidden="true"
|
|
758
|
+
role="img"
|
|
759
|
+
width="1em"
|
|
760
|
+
height="1em"
|
|
761
|
+
>
|
|
762
|
+
<path
|
|
763
|
+
d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
|
|
764
|
+
/>
|
|
765
|
+
</svg>
|
|
766
|
+
</span>
|
|
767
|
+
</button>
|
|
768
|
+
</div>
|
|
769
|
+
<div class="pf-v6-c-pagination__nav-control pf-m-last">
|
|
770
|
+
<button
|
|
771
|
+
class="pf-v6-c-button pf-m-plain"
|
|
772
|
+
type="button"
|
|
773
|
+
disabled
|
|
774
|
+
aria-label="Go to last page"
|
|
775
|
+
>
|
|
776
|
+
<span class="pf-v6-c-button__icon">
|
|
777
|
+
<svg
|
|
778
|
+
class="pf-v6-svg"
|
|
779
|
+
viewBox="0 0 448 512"
|
|
780
|
+
fill="currentColor"
|
|
781
|
+
aria-hidden="true"
|
|
782
|
+
role="img"
|
|
783
|
+
width="1em"
|
|
784
|
+
height="1em"
|
|
785
|
+
>
|
|
786
|
+
<path
|
|
787
|
+
d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
|
|
788
|
+
/>
|
|
789
|
+
</svg>
|
|
790
|
+
</span>
|
|
791
|
+
</button>
|
|
792
|
+
</div>
|
|
793
|
+
</nav>
|
|
794
|
+
</div>
|
|
795
|
+
|
|
796
|
+
```
|
|
797
|
+
|
|
638
798
|
### Bottom sticky
|
|
639
799
|
|
|
640
800
|
```html
|
|
@@ -648,7 +808,7 @@ cssPrefix: pf-v6-c-pagination
|
|
|
648
808
|
<br />
|
|
649
809
|
<br />
|
|
650
810
|
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
|
|
651
|
-
<div class="pf-v6-c-pagination pf-m-
|
|
811
|
+
<div class="pf-v6-c-pagination pf-m-sticky pf-m-bottom">
|
|
652
812
|
<div class="pf-v6-c-pagination__page-menu">
|
|
653
813
|
<button
|
|
654
814
|
class="pf-v6-c-menu-toggle pf-m-top pf-m-text pf-m-plain"
|
|
@@ -795,6 +955,334 @@ cssPrefix: pf-v6-c-pagination
|
|
|
795
955
|
|
|
796
956
|
```
|
|
797
957
|
|
|
958
|
+
### Top sticky with base and stuck
|
|
959
|
+
|
|
960
|
+
This example shows the use of `.pf-m-sticky-base` and `.pf-m-sticky-stuck`. `.pf-m-sticky-stuck` can be applied dynamically as the page has scrolled to only show sticky styles when the pagination is "stuck" and floating above the content.
|
|
961
|
+
|
|
962
|
+
```html
|
|
963
|
+
<div class="pf-v6-c-pagination pf-m-sticky-stuck pf-m-sticky-base">
|
|
964
|
+
<div class="pf-v6-c-pagination__total-items">
|
|
965
|
+
<b>1 - 10</b> of
|
|
966
|
+
<b>36</b>
|
|
967
|
+
</div>
|
|
968
|
+
<div class="pf-v6-c-pagination__page-menu">
|
|
969
|
+
<button
|
|
970
|
+
class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
|
|
971
|
+
type="button"
|
|
972
|
+
aria-expanded="false"
|
|
973
|
+
id="pagination-top-sticky-base-stuck-menu-toggle"
|
|
974
|
+
>
|
|
975
|
+
<span class="pf-v6-c-menu-toggle__text">
|
|
976
|
+
<b>1 - 10</b> of
|
|
977
|
+
<b>36</b>
|
|
978
|
+
</span>
|
|
979
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
980
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
981
|
+
<svg
|
|
982
|
+
class="pf-v6-svg"
|
|
983
|
+
viewBox="0 0 20 20"
|
|
984
|
+
fill="currentColor"
|
|
985
|
+
aria-hidden="true"
|
|
986
|
+
role="img"
|
|
987
|
+
width="1em"
|
|
988
|
+
height="1em"
|
|
989
|
+
>
|
|
990
|
+
<path
|
|
991
|
+
d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
|
|
992
|
+
/>
|
|
993
|
+
</svg>
|
|
994
|
+
</span>
|
|
995
|
+
</span>
|
|
996
|
+
</button>
|
|
997
|
+
</div>
|
|
998
|
+
<nav
|
|
999
|
+
class="pf-v6-c-pagination__nav"
|
|
1000
|
+
aria-label="Pagination nav - top sticky with base and stuck example"
|
|
1001
|
+
>
|
|
1002
|
+
<div class="pf-v6-c-pagination__nav-control pf-m-first">
|
|
1003
|
+
<button
|
|
1004
|
+
class="pf-v6-c-button pf-m-plain"
|
|
1005
|
+
type="button"
|
|
1006
|
+
disabled
|
|
1007
|
+
aria-label="Go to first page"
|
|
1008
|
+
>
|
|
1009
|
+
<span class="pf-v6-c-button__icon">
|
|
1010
|
+
<svg
|
|
1011
|
+
class="pf-v6-svg"
|
|
1012
|
+
viewBox="0 0 448 512"
|
|
1013
|
+
fill="currentColor"
|
|
1014
|
+
aria-hidden="true"
|
|
1015
|
+
role="img"
|
|
1016
|
+
width="1em"
|
|
1017
|
+
height="1em"
|
|
1018
|
+
>
|
|
1019
|
+
<path
|
|
1020
|
+
d="M223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
|
|
1021
|
+
/>
|
|
1022
|
+
</svg>
|
|
1023
|
+
</span>
|
|
1024
|
+
</button>
|
|
1025
|
+
</div>
|
|
1026
|
+
<div class="pf-v6-c-pagination__nav-control pf-m-prev">
|
|
1027
|
+
<button
|
|
1028
|
+
class="pf-v6-c-button pf-m-plain"
|
|
1029
|
+
type="button"
|
|
1030
|
+
disabled
|
|
1031
|
+
aria-label="Go to previous page"
|
|
1032
|
+
>
|
|
1033
|
+
<span class="pf-v6-c-button__icon">
|
|
1034
|
+
<svg
|
|
1035
|
+
class="pf-v6-svg"
|
|
1036
|
+
viewBox="0 0 256 512"
|
|
1037
|
+
fill="currentColor"
|
|
1038
|
+
aria-hidden="true"
|
|
1039
|
+
role="img"
|
|
1040
|
+
width="1em"
|
|
1041
|
+
height="1em"
|
|
1042
|
+
>
|
|
1043
|
+
<path
|
|
1044
|
+
d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
|
|
1045
|
+
/>
|
|
1046
|
+
</svg>
|
|
1047
|
+
</span>
|
|
1048
|
+
</button>
|
|
1049
|
+
</div>
|
|
1050
|
+
<div class="pf-v6-c-pagination__nav-page-select">
|
|
1051
|
+
<span class="pf-v6-c-form-control">
|
|
1052
|
+
<input
|
|
1053
|
+
aria-label="Current page"
|
|
1054
|
+
type="number"
|
|
1055
|
+
min="1"
|
|
1056
|
+
max="4"
|
|
1057
|
+
value="1"
|
|
1058
|
+
/>
|
|
1059
|
+
</span>
|
|
1060
|
+
<span aria-hidden="true">of 4</span>
|
|
1061
|
+
</div>
|
|
1062
|
+
<div class="pf-v6-c-pagination__nav-control pf-m-next">
|
|
1063
|
+
<button
|
|
1064
|
+
class="pf-v6-c-button pf-m-plain"
|
|
1065
|
+
type="button"
|
|
1066
|
+
aria-label="Go to next page"
|
|
1067
|
+
>
|
|
1068
|
+
<span class="pf-v6-c-button__icon">
|
|
1069
|
+
<svg
|
|
1070
|
+
class="pf-v6-svg"
|
|
1071
|
+
viewBox="0 0 256 512"
|
|
1072
|
+
fill="currentColor"
|
|
1073
|
+
aria-hidden="true"
|
|
1074
|
+
role="img"
|
|
1075
|
+
width="1em"
|
|
1076
|
+
height="1em"
|
|
1077
|
+
>
|
|
1078
|
+
<path
|
|
1079
|
+
d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
|
|
1080
|
+
/>
|
|
1081
|
+
</svg>
|
|
1082
|
+
</span>
|
|
1083
|
+
</button>
|
|
1084
|
+
</div>
|
|
1085
|
+
<div class="pf-v6-c-pagination__nav-control pf-m-last">
|
|
1086
|
+
<button
|
|
1087
|
+
class="pf-v6-c-button pf-m-plain"
|
|
1088
|
+
type="button"
|
|
1089
|
+
disabled
|
|
1090
|
+
aria-label="Go to last page"
|
|
1091
|
+
>
|
|
1092
|
+
<span class="pf-v6-c-button__icon">
|
|
1093
|
+
<svg
|
|
1094
|
+
class="pf-v6-svg"
|
|
1095
|
+
viewBox="0 0 448 512"
|
|
1096
|
+
fill="currentColor"
|
|
1097
|
+
aria-hidden="true"
|
|
1098
|
+
role="img"
|
|
1099
|
+
width="1em"
|
|
1100
|
+
height="1em"
|
|
1101
|
+
>
|
|
1102
|
+
<path
|
|
1103
|
+
d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
|
|
1104
|
+
/>
|
|
1105
|
+
</svg>
|
|
1106
|
+
</span>
|
|
1107
|
+
</button>
|
|
1108
|
+
</div>
|
|
1109
|
+
</nav>
|
|
1110
|
+
</div>
|
|
1111
|
+
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
|
|
1112
|
+
<br />
|
|
1113
|
+
<br />
|
|
1114
|
+
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
|
|
1115
|
+
<br />
|
|
1116
|
+
<br />
|
|
1117
|
+
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
|
|
1118
|
+
<br />
|
|
1119
|
+
<br />
|
|
1120
|
+
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
|
|
1121
|
+
|
|
1122
|
+
```
|
|
1123
|
+
|
|
1124
|
+
### Bottom sticky with base and stuck
|
|
1125
|
+
|
|
1126
|
+
This example shows the use of `.pf-m-sticky-base` and `.pf-m-sticky-stuck` on bottom pagination. Like top pagination,`.pf-m-sticky-stuck` can be applied dynamically as the page has scrolled to only show sticky styles when the bottom pagination is "stuck" and floating above the content.
|
|
1127
|
+
|
|
1128
|
+
```html
|
|
1129
|
+
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
|
|
1130
|
+
<br />
|
|
1131
|
+
<br />
|
|
1132
|
+
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
|
|
1133
|
+
<br />
|
|
1134
|
+
<br />
|
|
1135
|
+
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
|
|
1136
|
+
<br />
|
|
1137
|
+
<br />
|
|
1138
|
+
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
|
|
1139
|
+
<div class="pf-v6-c-pagination pf-m-sticky-stuck pf-m-sticky-base pf-m-bottom">
|
|
1140
|
+
<div class="pf-v6-c-pagination__page-menu">
|
|
1141
|
+
<button
|
|
1142
|
+
class="pf-v6-c-menu-toggle pf-m-top pf-m-text pf-m-plain"
|
|
1143
|
+
type="button"
|
|
1144
|
+
aria-expanded="false"
|
|
1145
|
+
id="pagination-bottom-sticky-base-stuck-menu-toggle"
|
|
1146
|
+
>
|
|
1147
|
+
<span class="pf-v6-c-menu-toggle__text">
|
|
1148
|
+
<b>1 - 10</b> of
|
|
1149
|
+
<b>36</b>
|
|
1150
|
+
</span>
|
|
1151
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
1152
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
1153
|
+
<svg
|
|
1154
|
+
class="pf-v6-svg"
|
|
1155
|
+
viewBox="0 0 20 20"
|
|
1156
|
+
fill="currentColor"
|
|
1157
|
+
aria-hidden="true"
|
|
1158
|
+
role="img"
|
|
1159
|
+
width="1em"
|
|
1160
|
+
height="1em"
|
|
1161
|
+
>
|
|
1162
|
+
<path
|
|
1163
|
+
d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
|
|
1164
|
+
/>
|
|
1165
|
+
</svg>
|
|
1166
|
+
</span>
|
|
1167
|
+
</span>
|
|
1168
|
+
</button>
|
|
1169
|
+
</div>
|
|
1170
|
+
<nav
|
|
1171
|
+
class="pf-v6-c-pagination__nav"
|
|
1172
|
+
aria-label="Pagination nav - bottom sticky with base and stuck example"
|
|
1173
|
+
>
|
|
1174
|
+
<div class="pf-v6-c-pagination__nav-control pf-m-first">
|
|
1175
|
+
<button
|
|
1176
|
+
class="pf-v6-c-button pf-m-plain"
|
|
1177
|
+
type="button"
|
|
1178
|
+
disabled
|
|
1179
|
+
aria-label="Go to first page"
|
|
1180
|
+
>
|
|
1181
|
+
<span class="pf-v6-c-button__icon">
|
|
1182
|
+
<svg
|
|
1183
|
+
class="pf-v6-svg"
|
|
1184
|
+
viewBox="0 0 448 512"
|
|
1185
|
+
fill="currentColor"
|
|
1186
|
+
aria-hidden="true"
|
|
1187
|
+
role="img"
|
|
1188
|
+
width="1em"
|
|
1189
|
+
height="1em"
|
|
1190
|
+
>
|
|
1191
|
+
<path
|
|
1192
|
+
d="M223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
|
|
1193
|
+
/>
|
|
1194
|
+
</svg>
|
|
1195
|
+
</span>
|
|
1196
|
+
</button>
|
|
1197
|
+
</div>
|
|
1198
|
+
<div class="pf-v6-c-pagination__nav-control pf-m-prev">
|
|
1199
|
+
<button
|
|
1200
|
+
class="pf-v6-c-button pf-m-plain"
|
|
1201
|
+
type="button"
|
|
1202
|
+
disabled
|
|
1203
|
+
aria-label="Go to previous page"
|
|
1204
|
+
>
|
|
1205
|
+
<span class="pf-v6-c-button__icon">
|
|
1206
|
+
<svg
|
|
1207
|
+
class="pf-v6-svg"
|
|
1208
|
+
viewBox="0 0 256 512"
|
|
1209
|
+
fill="currentColor"
|
|
1210
|
+
aria-hidden="true"
|
|
1211
|
+
role="img"
|
|
1212
|
+
width="1em"
|
|
1213
|
+
height="1em"
|
|
1214
|
+
>
|
|
1215
|
+
<path
|
|
1216
|
+
d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
|
|
1217
|
+
/>
|
|
1218
|
+
</svg>
|
|
1219
|
+
</span>
|
|
1220
|
+
</button>
|
|
1221
|
+
</div>
|
|
1222
|
+
<div class="pf-v6-c-pagination__nav-page-select">
|
|
1223
|
+
<span class="pf-v6-c-form-control">
|
|
1224
|
+
<input
|
|
1225
|
+
aria-label="Current page"
|
|
1226
|
+
type="number"
|
|
1227
|
+
min="1"
|
|
1228
|
+
max="4"
|
|
1229
|
+
value="1"
|
|
1230
|
+
/>
|
|
1231
|
+
</span>
|
|
1232
|
+
<span aria-hidden="true">of 4</span>
|
|
1233
|
+
</div>
|
|
1234
|
+
<div class="pf-v6-c-pagination__nav-control pf-m-next">
|
|
1235
|
+
<button
|
|
1236
|
+
class="pf-v6-c-button pf-m-plain"
|
|
1237
|
+
type="button"
|
|
1238
|
+
aria-label="Go to next page"
|
|
1239
|
+
>
|
|
1240
|
+
<span class="pf-v6-c-button__icon">
|
|
1241
|
+
<svg
|
|
1242
|
+
class="pf-v6-svg"
|
|
1243
|
+
viewBox="0 0 256 512"
|
|
1244
|
+
fill="currentColor"
|
|
1245
|
+
aria-hidden="true"
|
|
1246
|
+
role="img"
|
|
1247
|
+
width="1em"
|
|
1248
|
+
height="1em"
|
|
1249
|
+
>
|
|
1250
|
+
<path
|
|
1251
|
+
d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
|
|
1252
|
+
/>
|
|
1253
|
+
</svg>
|
|
1254
|
+
</span>
|
|
1255
|
+
</button>
|
|
1256
|
+
</div>
|
|
1257
|
+
<div class="pf-v6-c-pagination__nav-control pf-m-last">
|
|
1258
|
+
<button
|
|
1259
|
+
class="pf-v6-c-button pf-m-plain"
|
|
1260
|
+
type="button"
|
|
1261
|
+
disabled
|
|
1262
|
+
aria-label="Go to last page"
|
|
1263
|
+
>
|
|
1264
|
+
<span class="pf-v6-c-button__icon">
|
|
1265
|
+
<svg
|
|
1266
|
+
class="pf-v6-svg"
|
|
1267
|
+
viewBox="0 0 448 512"
|
|
1268
|
+
fill="currentColor"
|
|
1269
|
+
aria-hidden="true"
|
|
1270
|
+
role="img"
|
|
1271
|
+
width="1em"
|
|
1272
|
+
height="1em"
|
|
1273
|
+
>
|
|
1274
|
+
<path
|
|
1275
|
+
d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
|
|
1276
|
+
/>
|
|
1277
|
+
</svg>
|
|
1278
|
+
</span>
|
|
1279
|
+
</button>
|
|
1280
|
+
</div>
|
|
1281
|
+
</nav>
|
|
1282
|
+
</div>
|
|
1283
|
+
|
|
1284
|
+
```
|
|
1285
|
+
|
|
798
1286
|
### Bottom static
|
|
799
1287
|
|
|
800
1288
|
```html
|
|
@@ -808,7 +1296,7 @@ cssPrefix: pf-v6-c-pagination
|
|
|
808
1296
|
<br />
|
|
809
1297
|
<br />
|
|
810
1298
|
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
|
|
811
|
-
<div class="pf-v6-c-pagination pf-m-
|
|
1299
|
+
<div class="pf-v6-c-pagination pf-m-static pf-m-bottom">
|
|
812
1300
|
<div class="pf-v6-c-pagination__page-menu">
|
|
813
1301
|
<button
|
|
814
1302
|
class="pf-v6-c-menu-toggle pf-m-top pf-m-text pf-m-plain"
|
|
@@ -1673,7 +2161,7 @@ cssPrefix: pf-v6-c-pagination
|
|
|
1673
2161
|
### Compact display full modifier
|
|
1674
2162
|
|
|
1675
2163
|
```html
|
|
1676
|
-
<div class="pf-v6-c-pagination pf-m-
|
|
2164
|
+
<div class="pf-v6-c-pagination pf-m-display-full pf-m-compact">
|
|
1677
2165
|
<div class="pf-v6-c-pagination__total-items">
|
|
1678
2166
|
<b>1 - 10</b> of
|
|
1679
2167
|
<b>36</b>
|
|
@@ -1949,6 +2437,10 @@ cssPrefix: pf-v6-c-pagination
|
|
|
1949
2437
|
| `.pf-m-compact` | `.pf-v6-c-pagination` | Modifies for compact pagination component styles. |
|
|
1950
2438
|
| `.pf-m-static` | `.pf-v6-c-pagination.pf-m-bottom` | Modifies bottom pagination to not be positioned sticky on summary. |
|
|
1951
2439
|
| `.pf-m-sticky` | `.pf-v6-c-pagination` | Modifies the pagination to be sticky to its container. It will be sticky to the top of the container by default, and sticky to the bottom of the container when applied to `.pf-v6-c-pagination.pf-m-bottom`. |
|
|
2440
|
+
| `.pf-m-sticky-base` | `.pf-v6-c-pagination` | Makes the pagination sticky on scroll, but does not apply sticky styling. `.pf-m-sticky-stuck` must be used to apply sticky styling. |
|
|
2441
|
+
| `.pf-m-sticky-stuck` | `.pf-v6-c-pagination.pf-m-sticky-base` | Applies sticky styling to a pagination with `.pf-m-sticky-base`. |
|
|
2442
|
+
| `.pf-m-plain` | `.pf-v6-c-pagination.pf-m-bottom` | Modifies the pagination to have a transparent background. Only applies outside of glass theme. |
|
|
2443
|
+
| `.pf-m-no-plain-on-glass` | `.pf-v6-c-pagination.pf-m-bottom` | Prevents the pagination from being transparent on glass theme. |
|
|
1952
2444
|
| `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[breakpoint]}` | `.pf-v6-c-pagination` | Modifies pagination horizontal padding at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
|
|
1953
2445
|
| `.pf-m-page-insets` | `.pf-v6-c-pagination` | Modifies the pagination component padding/inset to visually match padding of page elements. |
|
|
1954
2446
|
| `.pf-m-first` | `.pf-v6-c-pagination__nav-control` | Indicates the control is for the first page button. |
|
|
@@ -1370,7 +1370,7 @@ section: patterns
|
|
|
1370
1370
|
</div>
|
|
1371
1371
|
</div>
|
|
1372
1372
|
</section>
|
|
1373
|
-
<div class="pf-v6-c-pagination pf-m-
|
|
1373
|
+
<div class="pf-v6-c-pagination pf-m-sticky pf-m-bottom">
|
|
1374
1374
|
<div class="pf-v6-c-pagination__page-menu">
|
|
1375
1375
|
<button
|
|
1376
1376
|
class="pf-v6-c-menu-toggle pf-m-top pf-m-text pf-m-plain"
|