-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
109 lines (94 loc) · 5.6 KB
/
Copy pathindex.html
File metadata and controls
109 lines (94 loc) · 5.6 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ayAccordion</title>
<link rel="stylesheet" href="./web-accordion.css"></link>
<link href="https://fonts.googleapis.com/css?family=Fjalla+One&display=swap" rel="stylesheet">
<script src="./dist/index.js"></script>
</head>
<body>
<header>
<a class="gh-logo" title="View on GitHub" href="https://github.com/AyogoHealth/ay-accordion">
<svg viewBox="0 0 1024 1024"><title>View on GitHub</title><path d="M512 0C229.25 0 0 229.25 0 512c0 226.25 146.688 418.125 350.156 485.812 25.594 4.688 34.938-11.125 34.938-24.625 0-12.188-0.469-52.562-0.719-95.312C242 908.812 211.906 817.5 211.906 817.5c-23.312-59.125-56.844-74.875-56.844-74.875-46.531-31.75 3.53-31.125 3.53-31.125 51.406 3.562 78.47 52.75 78.47 52.75 45.688 78.25 119.875 55.625 149 42.5 4.654-33 17.904-55.625 32.5-68.375C304.906 725.438 185.344 681.5 185.344 485.312c0-55.938 19.969-101.562 52.656-137.406-5.219-13-22.844-65.094 5.062-135.562 0 0 42.938-13.75 140.812 52.5 40.812-11.406 84.594-17.031 128.125-17.219 43.5 0.188 87.312 5.875 128.188 17.281 97.688-66.312 140.688-52.5 140.688-52.5 28 70.531 10.375 122.562 5.125 135.5 32.812 35.844 52.625 81.469 52.625 137.406 0 196.688-119.75 240-233.812 252.688 18.438 15.875 34.75 47 34.75 94.75 0 68.438-0.688 123.625-0.688 140.5 0 13.625 9.312 29.562 35.25 24.562C877.438 930 1024 738.125 1024 512 1024 229.25 794.75 0 512 0z"></path></svg>
</a>
<h1>ayAccordion</h1>
<p class="lead">
A mobile friendly, web component based jank free accordion
</p>
</header>
<main class="container">
<ay-accordion-root multiple>
<ay-accordion>
<ay-accordion-header>
Features
</ay-accordion-header>
<ul>
<li>Keyboard accessible and screen-reader friendly</li>
<li>Support for single/multiple expanded regions</li>
<li>Smooth animation on desktop and mobile</li>
<li>Per-section open/close events</li>
<li>Works with browsers supporting ES6 and web components</li>
</ul>
</ay-accordion>
<ay-accordion>
<ay-accordion-header>
Installation & Usage
</ay-accordion-header>
<p>To get started, install the package from npm: <code>npm install ay-accordion</code></p>
<h3>Usage</h3>
<p>Add a script tag to your page to reference the accordion.js file:</p>
<p><code><script src="node_modules/ay-accordion/dist/index.js"></script></code></p>
<p>Mark up your accordions using the provided web component HTML elements:</p>
<pre><code><ay-accordion-root multiple>
<ay-accordion open>
<ay-accordion-header>Panel 1 (Click to open)</b>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</ay-accordion-header>
</ay-accordion>
</ay-accordion-root multiple></code></pre>
</ay-accordion>
<ay-accordion>
<ay-accordion-header>
The Accordion Components
</ay-accordion-header>
<p>This package provides 3 HTML custom elements built using web components, which can be used to build accordions.</p>
<h3>ay-accordion-root</h3>
<p>This web component wraps the entire accordion, as well as any content below the accordion that needs to be pushed down when accordion sections open and close.</p>
<dl>
<dt>multiple</dt>
<dd>This attribute allows multiple accordion sections to be open at the same time (default is only a single section expanded at a time).</dd>
</dl>
<h3>ay-accordion</h3>
<p>This web component manages a single expanding/collapsing accordion section, including the title content shown when it is collapsed.</p>
<dl>
<dt>open</dt>
<dd>This attribute will make the section expanded by default.</dd>
<dt>disabled</dt>
<dd>This attribute will disable the open/close functionality of the accordion. The accordion will still maintain its original state open/close.</dd>
</dl>
<h3>ay-accordion-header</h3>
<p>This web component wraps the title of the accordion section, and attaches the event handlers to expand the section when clicked.</p>
</ay-accordion>
<ay-accordion>
<ay-accordion-header>Additional Information</ay-accordion-header>
<p>Contributions of bug reports, feature requests, and pull requests are greatly appreciated on our <a href="https://github.com/AyogoHealth/ay-accordion">GitHub project</a>!</p>
<p>Released under the terms of the <a href="https://github.com/AyogoHealth/ay-accordion/blob/master/LICENCE">MIT License</a>.</p>
<p>This project would not have happened without the knowledge and support of <a href="https://ada.is">Ada Rose Cannon</a>, in particular the following posts:</p>
<ul>
<li><a href="https://ada.is/blog/2015/04/26/animation-perf/">Animation Performance</a></li>
<li><a href="https://ada.is/blog/2015/04/29/animation-perf-follow-up/">Animation Performance - Follow Up</a></li>
<li><a href="https://medium.com/samsung-internet-dev/animating-dom-changes-33b031927e96">Animating DOM Changes</a></li>
</ul>
</ay-accordion>
<footer>
Copyright © 2023 <a href="https://ayogo.com">Ayogo Health Inc.</a>
<br>
MIT Licence
</footer>
</ay-accordion-root>
</main>
</body>
</html>