UNPKG

@patternfly/patternfly

Version:

Assets, source, tooling, and content for PatternFly 4

github.com/patternfly/patternfly

patternfly/patternfly

123 lines (118 loc) • 4.04 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
--- id: Data list section: demos wrapperTag: div --- ## Demos ### Simple ```hbs isFullscreen {{#> page page--id="page-layout-data-list-simple"}} {{#> skip-to-content skip-to-content--attribute=(concat 'href="#main-content-' page--id '"')}} Skip to content {{/skip-to-content}} {{#> page-header}} {{> data-list-page-header}} {{/page-header}} {{#> page-sidebar}} {{> data-list-page-nav}} {{/page-sidebar}} {{#> page-main page-main--attribute=(concat 'id="main-content-' page--id '"')}} {{#> page-main-nav page-main-nav--modifier="pf-m-light"}} {{> data-list-main-section-nav}} {{/page-main-nav}} {{#> page-main-section page-main-section--modifier="pf-m-light"}} {{> data-list-main-section-content}} {{/page-main-section}} {{#> page-main-section page-main-section--modifier="pf-m-no-padding pf-m-padding-on-md"}} {{#> card}} {{> data-list-simple-data-list}} {{> data-list-pagination-footer}} {{/card}} {{/page-main-section}} {{/page-main}} {{/page}} ``` ### Actionable ```hbs isFullscreen {{#> page page--id="page-layout-data-list-actionable"}} {{#> skip-to-content skip-to-content--attribute=(concat 'href="#main-content-' page--id '"')}} Skip to content {{/skip-to-content}} {{#> page-header}} {{> data-list-page-header}} {{/page-header}} {{#> page-sidebar}} {{> data-list-page-nav}} {{/page-sidebar}} {{#> page-main page-main--attribute=(concat 'id="main-content-' page--id '"')}} {{#> page-main-nav page-main-nav--modifier="pf-m-light"}} {{> data-list-main-section-nav}} {{/page-main-nav}} {{#> page-main-section page-main-section--modifier="pf-m-light"}} {{> data-list-main-section-content}} {{/page-main-section}} {{#> page-main-section page-main-section--modifier="pf-m-no-padding pf-m-padding-on-md"}} {{#> card}} {{> data-list-actionable-data-list}} {{> data-list-pagination-footer}} {{/card}} {{/page-main-section}} {{/page-main}} {{/page}} ``` ### Expandable demo ```hbs isFullscreen {{#> page page--id="page-layout-data-list-expandable"}} {{#> skip-to-content skip-to-content--attribute=(concat 'href="#main-content-' page--id '"')}} Skip to content {{/skip-to-content}} {{#> page-header}} {{> data-list-page-header}} {{/page-header}} {{#> page-sidebar}} {{> data-list-page-nav}} {{/page-sidebar}} {{#> page-main page-main--attribute=(concat 'id="main-content-' page--id '"')}} {{#> page-main-nav page-main-nav--modifier="pf-m-light"}} {{> data-list-main-section-nav}} {{/page-main-nav}} {{#> page-main-section page-main-section--modifier="pf-m-light"}} {{> data-list-main-section-content}} {{/page-main-section}} {{#> page-main-section page-main-section--modifier="pf-m-no-padding pf-m-padding-on-md"}} {{#> card}} {{> data-list-expandable-data-list}} {{> data-list-pagination-footer}} {{/card}} {{/page-main-section}} {{/page-main}} {{/page}} ``` ### Static bottom pagination ```hbs isFullscreen {{#> page page--id="page-layout-data-list-simple"}} {{#> skip-to-content skip-to-content--attribute=(concat 'href="#main-content-' page--id '"')}} Skip to content {{/skip-to-content}} {{#> page-header}} {{> data-list-page-header}} {{/page-header}} {{#> page-sidebar}} {{> data-list-page-nav}} {{/page-sidebar}} {{#> page-main page-main--attribute=(concat 'id="main-content-' page--id '"')}} {{#> page-main-nav page-main-nav--modifier="pf-m-light"}} {{> data-list-main-section-nav}} {{/page-main-nav}} {{#> page-main-section page-main-section--modifier="pf-m-light"}} {{> data-list-main-section-content}} {{/page-main-section}} {{#> page-main-section page-main-section--modifier="pf-m-no-padding pf-m-padding-on-md"}} {{#> card}} {{> data-list-simple-data-list}} {{> data-list-pagination-footer-static}} {{/card}} {{/page-main-section}} {{/page-main}} {{/page}} ```