Skip to content

Commit 129f646

Browse files
zeroedinbennypowers
zeroedin
authored and
bennypowers
committed
docs(accordion): improve docs to more closely match PFv4
1 parent 69a6799 commit 129f646

File tree

1 file changed

+186
-0
lines changed

1 file changed

+186
-0
lines changed

‎elements/pf-accordion/docs/pf-accordion.md‎

Lines changed: 186 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,192 @@
8989
</pf-accordion-panel>
9090
</pf-accordion>
9191
```
92+
93+
### Single Expanded Behavior
94+
<pf-accordion single>
95+
<pf-accordion-header>
96+
<h3>Laboris sunt qui dolor consectetur excepteur in aliqua ipsum?</h3>
97+
</pf-accordion-header>
98+
<pf-accordion-panel>
99+
<p>Culpa adipisicing sunt dolor ullamco dolor duis in ad commodo.</p>
100+
<a href="#">Call to action</a>
101+
</pf-accordion-panel>
102+
<pf-accordion-header expanded>
103+
<h3>Anim est tempor fugiat pariatur laborum deserunt ex mollit aliquip?</h3>
104+
</pf-accordion-header>
105+
<pf-accordion-panel>
106+
<p><a href="#">Ullamco ullamco sint</a> ex id magna elit deserunt dolore nostrud eu et dolore est Lorem. Esse laborum do ut consectetur occaecat proident et nostrud ut nostrud veniam officia Lorem.</p>
107+
</pf-accordion-panel>
108+
<pf-accordion-header>
109+
<h3>Nostrud ad sit commodo nostrud?</h3>
110+
</pf-accordion-header>
111+
<pf-accordion-panel>
112+
<p>Nisi veniam tempor reprehenderit laboris amet laborum et do ut. Veniam eiusmod aliquip ullamco quis esse laborum Lorem exercitation consequat.</p>
113+
</pf-accordion-panel>
114+
<pf-accordion-header>
115+
<h3>Reprehenderit cupidatat labore?</h3>
116+
</pf-accordion-header>
117+
<pf-accordion-panel>
118+
<p>Magna incididunt aliquip consectetur dolor adipisicing amet cillum officia nostrud. Elit exercitation voluptate aute nostrud.</p>
119+
<a href="#">Call to action</a>
120+
</pf-accordion-panel>
121+
</pf-accordion>
122+
123+
```html
124+
<pf-accordion single>
125+
<pf-accordion-header>
126+
<h3>Laboris sunt qui dolor consectetur excepteur in aliqua ipsum?</h3>
127+
</pf-accordion-header>
128+
<pf-accordion-panel>
129+
<p>Culpa adipisicing sunt dolor ullamco dolor duis in ad commodo.</p>
130+
<a href="#">Call to action</a>
131+
</pf-accordion-panel>
132+
<pf-accordion-header expanded>
133+
<h3>Anim est tempor fugiat pariatur laborum deserunt ex mollit aliquip?</h3>
134+
</pf-accordion-header>
135+
<pf-accordion-panel>
136+
<p><a href="#">Ullamco ullamco sint</a> ex id magna elit deserunt dolore nostrud eu et dolore est Lorem. Esse laborum do ut consectetur occaecat proident et nostrud ut nostrud veniam officia Lorem.</p>
137+
</pf-accordion-panel>
138+
<pf-accordion-header>
139+
<h3>Nostrud ad sit commodo nostrud?</h3>
140+
</pf-accordion-header>
141+
<pf-accordion-panel>
142+
<p>Nisi veniam tempor reprehenderit laboris amet laborum et do ut. Veniam eiusmod aliquip ullamco quis esse laborum Lorem exercitation consequat.</p>
143+
</pf-accordion-panel>
144+
<pf-accordion-header>
145+
<h3>Reprehenderit cupidatat labore?</h3>
146+
</pf-accordion-header>
147+
<pf-accordion-panel>
148+
<p>Magna incididunt aliquip consectetur dolor adipisicing amet cillum officia nostrud. Elit exercitation voluptate aute nostrud.</p>
149+
<a href="#">Call to action</a>
150+
</pf-accordion-panel>
151+
</pf-accordion>
152+
```
153+
154+
155+
### Fixed with multiple expand behavior
156+
<pf-accordion >
157+
<pf-accordion-header>
158+
<h3>Laboris sunt qui dolor consectetur excepteur in aliqua ipsum?</h3>
159+
</pf-accordion-header>
160+
<pf-accordion-panel>
161+
<p>Culpa adipisicing sunt dolor ullamco dolor duis in ad commodo.</p>
162+
<a href="#">Call to action</a>
163+
</pf-accordion-panel>
164+
<pf-accordion-header>
165+
<h3>Anim est tempor fugiat pariatur laborum deserunt ex mollit aliquip?</h3>
166+
</pf-accordion-header>
167+
<pf-accordion-panel>
168+
<p><a href="#">Ullamco ullamco sint</a> ex id magna elit deserunt dolore nostrud eu et dolore est Lorem. Esse laborum do ut consectetur occaecat proident et nostrud ut nostrud veniam officia Lorem.</p>
169+
</pf-accordion-panel>
170+
<pf-accordion-header>
171+
<h3>Nostrud ad sit commodo nostrud?</h3>
172+
</pf-accordion-header>
173+
<pf-accordion-panel>
174+
<p>Nisi veniam tempor reprehenderit laboris amet laborum et do ut. Veniam eiusmod aliquip ullamco quis esse laborum Lorem exercitation consequat.</p>
175+
</pf-accordion-panel>
176+
<pf-accordion-header>
177+
<h3>Reprehenderit cupidatat labore?</h3>
178+
</pf-accordion-header>
179+
<pf-accordion-panel fixed>
180+
<p>Magna incididunt aliquip consectetur dolor adipisicing amet cillum officia nostrud. Elit exercitation voluptate aute nostrud.</p>
181+
<a href="#">Call to action</a>
182+
</pf-accordion-panel>
183+
</pf-accordion>
184+
185+
```html
186+
<pf-accordion>
187+
<pf-accordion-header>
188+
<h3>Laboris sunt qui dolor consectetur excepteur in aliqua ipsum?</h3>
189+
</pf-accordion-header>
190+
<pf-accordion-panel>
191+
<p>Culpa adipisicing sunt dolor ullamco dolor duis in ad commodo.</p>
192+
<a href="#">Call to action</a>
193+
</pf-accordion-panel>
194+
<pf-accordion-header>
195+
<h3>Anim est tempor fugiat pariatur laborum deserunt ex mollit aliquip?</h3>
196+
</pf-accordion-header>
197+
<pf-accordion-panel>
198+
<p><a href="#">Ullamco ullamco sint</a> ex id magna elit deserunt dolore nostrud eu et dolore est Lorem. Esse laborum do ut consectetur occaecat proident et nostrud ut nostrud veniam officia Lorem.</p>
199+
</pf-accordion-panel>
200+
<pf-accordion-header>
201+
<h3>Nostrud ad sit commodo nostrud?</h3>
202+
</pf-accordion-header>
203+
<pf-accordion-panel>
204+
<p>Nisi veniam tempor reprehenderit laboris amet laborum et do ut. Veniam eiusmod aliquip ullamco quis esse laborum Lorem exercitation consequat.</p>
205+
</pf-accordion-panel>
206+
<pf-accordion-header>
207+
<h3>Reprehenderit cupidatat labore?</h3>
208+
</pf-accordion-header>
209+
<pf-accordion-panel fixed>
210+
<p>Magna incididunt aliquip consectetur dolor adipisicing amet cillum officia nostrud. Elit exercitation voluptate aute nostrud.</p>
211+
<a href="#">Call to action</a>
212+
</pf-accordion-panel>
213+
</pf-accordion>
214+
```
215+
216+
217+
### Bordered
218+
<pf-accordion bordered>
219+
<pf-accordion-header>
220+
<h3>Laboris sunt qui dolor consectetur excepteur in aliqua ipsum?</h3>
221+
</pf-accordion-header>
222+
<pf-accordion-panel>
223+
<p>Culpa adipisicing sunt dolor ullamco dolor duis in ad commodo.</p>
224+
<a href="#">Call to action</a>
225+
</pf-accordion-panel>
226+
<pf-accordion-header>
227+
<h3>Anim est tempor fugiat pariatur laborum deserunt ex mollit aliquip?</h3>
228+
</pf-accordion-header>
229+
<pf-accordion-panel>
230+
<p><a href="#">Ullamco ullamco sint</a> ex id magna elit deserunt dolore nostrud eu et dolore est Lorem. Esse laborum do ut consectetur occaecat proident et nostrud ut nostrud veniam officia Lorem.</p>
231+
</pf-accordion-panel>
232+
<pf-accordion-header>
233+
<h3>Nostrud ad sit commodo nostrud?</h3>
234+
</pf-accordion-header>
235+
<pf-accordion-panel>
236+
<p>Nisi veniam tempor reprehenderit laboris amet laborum et do ut. Veniam eiusmod aliquip ullamco quis esse laborum Lorem exercitation consequat.</p>
237+
</pf-accordion-panel>
238+
<pf-accordion-header>
239+
<h3>Reprehenderit cupidatat labore?</h3>
240+
</pf-accordion-header>
241+
<pf-accordion-panel>
242+
<p>Magna incididunt aliquip consectetur dolor adipisicing amet cillum officia nostrud. Elit exercitation voluptate aute nostrud.</p>
243+
<a href="#">Call to action</a>
244+
</pf-accordion-panel>
245+
</pf-accordion>
246+
247+
```html
248+
<pf-accordion bordered>
249+
<pf-accordion-header>
250+
<h3>Laboris sunt qui dolor consectetur excepteur in aliqua ipsum?</h3>
251+
</pf-accordion-header>
252+
<pf-accordion-panel>
253+
<p>Culpa adipisicing sunt dolor ullamco dolor duis in ad commodo.</p>
254+
<a href="#">Call to action</a>
255+
</pf-accordion-panel>
256+
<pf-accordion-header>
257+
<h3>Anim est tempor fugiat pariatur laborum deserunt ex mollit aliquip?</h3>
258+
</pf-accordion-header>
259+
<pf-accordion-panel>
260+
<p><a href="#">Ullamco ullamco sint</a> ex id magna elit deserunt dolore nostrud eu et dolore est Lorem. Esse laborum do ut consectetur occaecat proident et nostrud ut nostrud veniam officia Lorem.</p>
261+
</pf-accordion-panel>
262+
<pf-accordion-header>
263+
<h3>Nostrud ad sit commodo nostrud?</h3>
264+
</pf-accordion-header>
265+
<pf-accordion-panel>
266+
<p>Nisi veniam tempor reprehenderit laboris amet laborum et do ut. Veniam eiusmod aliquip ullamco quis esse laborum Lorem exercitation consequat.</p>
267+
</pf-accordion-panel>
268+
<pf-accordion-header>
269+
<h3>Reprehenderit cupidatat labore?</h3>
270+
</pf-accordion-header>
271+
<pf-accordion-panel>
272+
<p>Magna incididunt aliquip consectetur dolor adipisicing amet cillum officia nostrud. Elit exercitation voluptate aute nostrud.</p>
273+
<a href="#">Call to action</a>
274+
</pf-accordion-panel>
275+
</pf-accordion>
276+
```
277+
92278
{% endband %}
93279

94280
{% renderSlots %}

0 commit comments

Comments
 (0)