patternfly-elements/elements/pf-v5-accordion/demo/fixed-panel.html at 72754edd35767965018bb22e347a394ca473d3ee · 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
<article>
  <pf-v5-accordion>
    <pf-v5-accordion-header>
      <h3>Item one</h3>
    </pf-v5-accordion-header>
    <pf-v5-accordion-panel>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
        magna aliqua.</p>
    </pf-v5-accordion-panel>
    <pf-v5-accordion-header>
      <h3>Item two</h3>
    </pf-v5-accordion-header>
    <pf-v5-accordion-panel>
      <p>Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam ultrices,
        faucibus erat id, maximus nunc.</p>
    </pf-v5-accordion-panel>
    <pf-v5-accordion-header>
      <h3>Item three</h3>
    </pf-v5-accordion-header>
    <pf-v5-accordion-panel>
      <p>Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.</p>
      <pf-v6-button>Focus on me!</pf-v6-button>
    </pf-v5-accordion-panel>
    <pf-v5-accordion-header>
      <h3>Item four</h3>
    </pf-v5-accordion-header>
    <pf-v5-accordion-panel fixed>
      <p>
        Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,
        sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
        cubilia Curae;
        Vestibulum ultricies nulla nibh. Etiam vel dui fermentum ligula ullamcorper eleifend non quis tortor. Morbi
        tempus ornare tempus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
        Mauris
        et velit neque. Donec ultricies condimentum mauris, pellentesque imperdiet libero convallis convallis. Aliquam
        erat volutpat. Donec rutrum semper tempus. Proin dictum imperdiet nibh, quis dapibus nulla. Integer sed
        tincidunt
        lectus, sit amet auctor eros.
      </p>
      <p>
        Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,
        sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
        cubilia Curae;
        Vestibulum ultricies nulla nibh. Etiam vel dui fermentum ligula ullamcorper eleifend non quis tortor. Morbi
        tempus ornare tempus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
        Mauris
        et velit neque. Donec ultricies condimentum mauris, pellentesque imperdiet libero convallis convallis. Aliquam
        erat volutpat. Donec rutrum semper tempus. Proin dictum imperdiet nibh, quis dapibus nulla. Integer sed
        tincidunt
        lectus, sit amet auctor eros.
      </p>
      <p>
        Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,
        sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
        cubilia Curae;
        Vestibulum ultricies nulla nibh. Etiam vel dui fermentum ligula ullamcorper eleifend non quis tortor. Morbi
        tempus ornare tempus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
        Mauris
        et velit neque. Donec ultricies condimentum mauris, pellentesque imperdiet libero convallis convallis. Aliquam
        erat volutpat. Donec rutrum semper tempus. Proin dictum imperdiet nibh, quis dapibus nulla. Integer sed
        tincidunt
        lectus, sit amet auctor eros.
      </p>
      <p>
        Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,
        sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
        cubilia Curae;
        Vestibulum ultricies nulla nibh. Etiam vel dui fermentum ligula ullamcorper eleifend non quis tortor. Morbi
        tempus ornare tempus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
        Mauris
        et velit neque. Donec ultricies condimentum mauris, pellentesque imperdiet libero convallis convallis. Aliquam
        erat volutpat. Donec rutrum semper tempus. Proin dictum imperdiet nibh, quis dapibus nulla. Integer sed
        tincidunt
        lectus, sit amet auctor eros.
      </p>
    </pf-v5-accordion-panel>
    <pf-v5-accordion-header>
      <h3>Item five</h3>
    </pf-v5-accordion-header>
    <pf-v5-accordion-panel>
      <p>Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis blandit.</p>
    </pf-v5-accordion-panel>
  </pf-v5-accordion>
</article>

<script type="module">
  import '@patternfly/elements/pf-v5-accordion/pf-v5-accordion.js';
  import '@patternfly/elements/pf-v6-button/pf-v6-button.js';
</script>

<style>
article {
  margin-inline: 4em;
}
</style>