patternfly-elements/docs/components/demos.html at bf89edb7dd0d5a165050b686c333d7f8865e34a0 · patternfly/patternfly-elements · GitHub

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
---js
{
templateEngineOverride: 'njk',
permalink: '{{ demo.permalink }}',
pagination: {
  data: 'demos',
  alias: 'demo',
  size: 1,
  before: xs => xs.filter(x => x.permalink ),
},
preloads: [
  '@lit/reactive-element@1.0.2/development/css-tag.js',
  '@lit/reactive-element@1.0.2/development/decorators/base.js',
  '@lit/reactive-element@1.0.2/development/decorators/custom-element.js',
  '@lit/reactive-element@1.0.2/development/decorators/event-options.js',
  '@lit/reactive-element@1.0.2/development/decorators/property.js',
  '@lit/reactive-element@1.0.2/development/decorators/query-all.js',
  '@lit/reactive-element@1.0.2/development/decorators/query-assigned-nodes.js',
  '@lit/reactive-element@1.0.2/development/decorators/query-async.js',
  '@lit/reactive-element@1.0.2/development/decorators/query.js',
  '@lit/reactive-element@1.0.2/development/decorators/state.js',
  '@lit/reactive-element@1.0.2/development/reactive-element.js',
  'lit-element@3.0.2/development/experimental-hydrate-support.js',
  'lit-element@3.0.2/development/lit-element.js',
  'lit-html@2.0.2/_/a39ea7cf.js',
  'lit-html@2.0.2/development/async-directive.js',
  'lit-html@2.0.2/development/directive-helpers.js',
  'lit-html@2.0.2/development/directive.js',
  'lit-html@2.0.2/development/directives/guard.js',
  'lit-html@2.0.2/development/directives/if-defined.js',
  'lit-html@2.0.2/development/directives/live.js',
  'lit-html@2.0.2/development/directives/ref.js',
  'lit-html@2.0.2/development/directives/repeat.js',
  'lit-html@2.0.2/development/directives/style-map.js',
  'lit-html@2.0.2/development/directives/template-content.js',
  'lit-html@2.0.2/development/directives/unsafe-html.js',
  'lit-html@2.0.2/development/directives/unsafe-svg.js',
  'lit-html@2.0.2/development/directives/until.js',
  'lit-html@2.0.2/development/experimental-hydrate.js',
  'lit-html@2.0.2/development/lit-html.js',
  'lit-html@2.0.2/development/static.js',
  'lit@2.0.2/async-directive.js',
  'lit@2.0.2/decorators.js',
  'lit@2.0.2/decorators/query-all.js',
  'lit@2.0.2/decorators/query-assigned-nodes.js',
  'lit@2.0.2/decorators/query-async.js',
  'lit@2.0.2/decorators/query.js',
  'lit@2.0.2/directives/guard.js',
  'lit@2.0.2/directives/if-defined.js',
  'lit@2.0.2/directives/live.js',
  'lit@2.0.2/directives/ref.js',
  'lit@2.0.2/directives/repeat.js',
  'lit@2.0.2/directives/style-map.js',
  'lit@2.0.2/directives/template-content.js',
  'lit@2.0.2/directives/unsafe-html.js',
  'lit@2.0.2/directives/unsafe-svg.js',
  'lit@2.0.2/directives/until.js',
  'lit@2.0.2/experimental-hydrate-support.js',
  'lit@2.0.2/experimental-hydrate.js',
  'lit@2.0.2/html.js',
  'lit@2.0.2/index.js',
  'lit@2.0.2/polyfill-support.js',
  'lit@2.0.2/static-html.js',
]
}
---
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="PatternFly Elements: A set of community-created web components based on PatternFly design.">
    <link href="{{ '/brand/logo/svg/pfe-icon-blue.svg' | url }}" rel="shortcut icon">
    <title>{{ demo.title or (demo.tagName) }} | PatternFly Elements</title>
    <link rel="preconnect" href="https://ga.jspm.io">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <script type="importmap">{{ importMap | dump | safe }}</script>
    {%- for path in preloads -%}
    <link rel="modulepreload" href="https://ga.jspm.io/npm:{{ path }}">
    {%- endfor -%}
    <link rel="stylesheet" href="{{ '/main.css' | url }}">
    <noscript><link href="{{ '/core/styles/pf--noscript.min.css' | url }}" rel="stylesheet"></noscript>
    <script async src="https://ga.jspm.io/npm:es-module-shims@1.6.1/dist/es-module-shims.js"></script>
    <script type="module">
    import 'element-internals-polyfill';
    import { PfIcon } from '@patternfly/elements/pf-icon/pf-icon.js';
    const get = (set, icon) => new URL(`/components/icon/icons/${set}/${icon}.js`, import.meta.url);
    PfIcon.addIconSet('patternfly', get);
    PfIcon.addIconSet('fas', get);
    PfIcon.addIconSet('far', get);
    PfIcon.addIconSet('fab', get);
    </script>
    <style>
      html, body, main { min-height: 100%; }
    </style>
    <noscript>
      <style>
        :not(:defined) { opacity: 1; }
      </style>
    </noscript>
  </head>
  <body>
    <main>
      <div data-demo="{{demo.tagName}}">{% if demo.filePath %}
        {%- include demo.filePath -%}{% endif %}
      </div>
    </main>
  </body>
</html>