-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
5 changed files
with
1,569 additions
and
9 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1 @@ | ||
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><link rel="stylesheet" href="/accordion/magic.css?sk8zq2yGtI" integrity="sha384-sk8zq2yGtIBSI0KA/gMmNioLDSeTf0gO0YSxSUweai2HCuVBWssD5UogYR4SInxt" crossorigin="anonymous"/><link rel="icon" href="/accordion/favicon.ico"/><title>@magic-modules/accordion</title><meta name="description" content="shows / hides items in a vertical accordion"/><script type="application/ld+json">{"@context":"http://schema.org","@type":"website","name":"@magic-modules/accordion"}</script></head><body><a class="SkipLink" href="/accordion/#page">Skip to Content</a><main id="Magic"><div class="Wrapper"><header class="Header"><a class="Logo" href="/accordion/"><span>Accordion</span></a><nav class="Menu"><ul><li><a href="/accordion/#installation">installation</a></li><li><a href="/accordion/#usage">usage</a></li><li><a href="/accordion/#demo">demo</a></li><li><a href="/accordion/#css">css</a></li><li><a href="/accordion/#source">source</a></li></ul></nav></header><div class="Page" id="page"><div>404 - not found</div></div><footer class="Footer"><div class="Container"><div class="Credits">made with a few bits of <a target="_blank" rel="noopener" href="https://github.com/magic/core">magic</a></div></div></footer></div></main><script src="/accordion/magic.js?EUOqUJhb5F" integrity="sha384-EUOqUJhb5FRjMfUhdSDCHxTNOhLyZQ3C7OkWrxDZRSaGkPiEHgZQDEfEq2s6A8St" crossorigin="anonymous"></script></body></html> | ||
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><link rel="stylesheet" href="/accordion/magic.css?sk8zq2yGtI" integrity="sha384-sk8zq2yGtIBSI0KA/gMmNioLDSeTf0gO0YSxSUweai2HCuVBWssD5UogYR4SInxt" crossorigin="anonymous"/><link rel="icon" href="/accordion/favicon.ico"/><title>@magic-modules/accordion</title><meta name="description" content="shows / hides items in a vertical accordion"/><script type="application/ld+json">{"@context":"http://schema.org","@type":"website","name":"@magic-modules/accordion"}</script></head><body><a class="SkipLink" href="/accordion/#page">Skip to Content</a><main id="Magic"><div class="Wrapper"><header class="Header"><a class="Logo" href="/accordion/"><span>Accordion</span></a><nav class="Menu"><ul><li><a href="/accordion/#installation">installation</a></li><li><a href="/accordion/#usage">usage</a></li><li><a href="/accordion/#demo">demo</a></li><li><a href="/accordion/#css">css</a></li><li><a href="/accordion/#source">source</a></li></ul></nav></header><div class="Page" id="page"><div>404 - not found</div></div><footer class="Footer"><div class="Container"><div class="Credits">made with a few bits of <a target="_blank" rel="noopener" href="https://github.com/magic/core">magic</a></div></div></footer></div></main><script src="/accordion/magic.js?L63ziNxJRa" integrity="sha384-L63ziNxJRaowtkI2HbzSfyhdM87wa2avygz/+5UEjd9SsPUrFfFk5pTRuYgMEC84" crossorigin="anonymous"></script></body></html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1 @@ | ||
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><link rel="stylesheet" href="/accordion/magic.css?sk8zq2yGtI" integrity="sha384-sk8zq2yGtIBSI0KA/gMmNioLDSeTf0gO0YSxSUweai2HCuVBWssD5UogYR4SInxt" crossorigin="anonymous"/><link rel="icon" href="/accordion/favicon.ico"/><title>@magic-modules/accordion</title><meta name="description" content="shows / hides items in a vertical accordion"/><script type="application/ld+json">{"@context":"http://schema.org","@type":"website","name":"@magic-modules/accordion"}</script></head><body><a class="SkipLink" href="/accordion/#page">Skip to Content</a><main id="Magic"><div class="Wrapper"><header class="Header"><a class="Logo" href="/accordion/"><span>Accordion</span></a><nav class="Menu"><ul><li><a href="/accordion/#installation">installation</a></li><li><a href="/accordion/#usage">usage</a></li><li><a href="/accordion/#demo">demo</a></li><li><a href="/accordion/#css">css</a></li><li><a href="/accordion/#source">source</a></li></ul></nav></header><div class="Page" id="page"><h1>@magic-modules/accordion</h1><p>this is the <a href="https://github.com/magic-modules" target="_blank" rel="noopener">@magic-modules</a> Accordion component. shows / hides items in a vertical accordion</p><ul class="GitBadges"><li><a href="https://www.npmjs.com/package/@magic-modules/accordion" target="_blank" rel="noopener"><img src="https://img.shields.io/npm/v/@magic-modules/accordion.svg" role="presentation" alt=""/></a></li><li><a href="https://travis-ci.com/magic-modules/accordion" target="_blank" rel="noopener"><img src="https://img.shields.io/travis/com/magic-modules/accordion/master" role="presentation" alt=""/></a></li><li><a href="https://ci.appveyor.com/project/magicmodules/accordion/branch/master" target="_blank" rel="noopener"><img src="https://img.shields.io/appveyor/ci/magicmodules/accordion/master.svg" role="presentation" alt=""/></a></li><li><a href="https://coveralls.io/github/magic-modules/accordion" target="_blank" rel="noopener"><img src="https://img.shields.io/coveralls/github/magic-modules/accordion/master.svg" role="presentation" alt=""/></a></li><li><a href="https://greenkeeper.io" target="_blank" rel="noopener"><img src="https://badges.greenkeeper.io/magic-modules/accordion.svg" role="presentation" alt=""/></a></li><li><a href="https://snyk.io/test/github/magic-modules/accordion" target="_blank" rel="noopener"><img src="https://img.shields.io/snyk/vulnerabilities/github/magic-modules/accordion.svg" role="presentation" alt=""/></a></li></ul><h2 id="installation">installation:</h2><div class="Pre lines"><div class="menu"><button>copy</button></div><pre><code class="line">npm install @magic-modules/accordion</code></pre></div><h2 id="usage">usage:</h2><p>in a page or Component.</p><div class="Pre lines"><div class="menu"><button>copy</button></div><pre><code class="line"><span class="keyword">export</span> <span class="keyword">const</span> View = <span class="state">state</span> => Accordion({</code><code class="line"> <span class="colon">key</span>: <span class="string">'about'</span>,</code><code class="line"> <span class="colon">items</span>: [</code><code class="line"> { <span class="colon">title</span>: <span class="string">'title'</span>, <span class="colon">text</span>: <span class="string">'content'</span> },</code><code class="line"> { <span class="colon">title</span>: <span class="string">'title 2'</span>, <span class="colon">text</span>: <span class="string">'content 2'</span> },</code><code class="line"> {</code><code class="line"> <span class="colon">title</span>: <span class="string">'title 3'</span>,</code><code class="line"> <span class="colon">text</span>: [</code><code class="line"> p(<span class="string">'content'</span>),</code><code class="line"> p(<span class="string">'can also be an'</span>),</code><code class="line"> p([<span class="string">'array'</span>, <span class="string">' of'</span>, <span class="string">' modules'</span>]),</code><code class="line"> Link({ <span class="colon">to</span>: 'https://magic.github.io' }, '<span class="object">magic</span>.<span class="property">github</span>.<span class="property">io</span>'),</code><code class="line"> ],</code><code class="line"> },</code><code class="line"> ],</code><code class="line"> <span class="colon">title</span>: <span class="string">'optional title'</span>,</code><code class="line"> <span class="state">state</span>,</code><code class="line">})</code></pre></div><h2 id="demo">demo</h2><p>the example above renders</p><div class="Accordion about"><h3>optional title</h3><div class="AccordionItem"><h4>title</h4><div class="content">content</div></div><div class="AccordionItem"><h4>title 2</h4><div class="content">content 2</div></div><div class="AccordionItem"><h4>title 3</h4><div class="content"><p>content</p><p>can also be an</p><p>array of modules</p><a href="https://magic.github.io" target="_blank" rel="noopener">magic.github.io</a></div></div></div><h2 id="css">css</h2><p>by default, css is minimal. to adapt the styles for your theme, add (and change) the following object to /assets/theme/{THEME_NAME}/index.mjs</p><div class="Pre lines"><div class="menu"><button>copy</button></div><pre><code class="line"><span class="string">'.<span class="property">Accordion</span>'</span>: {</code><code class="line"> <span class="colon">h3</span>: {}, <span class="comment">// main title</span></code><code class="line"> <span class="string">'.<span class="property">AccordionItem</span>'</span>: {</code><code class="line"> <span class="colon">h4</span>: {}, <span class="comment">// item title</span></code><code class="line"></code><code class="line"> <span class="string">'.<span class="property">content</span>'</span>: {}, <span class="comment">// item content</span></code><code class="line"></code><code class="line"> <span class="string">'&.open'</span>: {</code><code class="line"> <span class="string">'.<span class="property">content</span>'</span>: {}, <span class="comment">// item content <span class="keyword">if</span> opened</span></code><code class="line"> },</code><code class="line"> },</code><code class="line">}</code></pre></div><h2 id="source">source</h2><p>the source for this page is in the <a href="https://github.com/magic-modules/accordion/tree/master/example" target="_blank" rel="noopener">example directory</a> and gets built and published to github using <a href="https://github.com/magic/core" target="_blank" rel="noopener">@magic/core</a></p><button class="LightSwitch"></button></div><footer class="Footer"><div class="Container"><div class="Credits">made with a few bits of <a target="_blank" rel="noopener" href="https://github.com/magic/core">magic</a></div></div></footer></div></main><script src="/accordion/magic.js?EUOqUJhb5F" integrity="sha384-EUOqUJhb5FRjMfUhdSDCHxTNOhLyZQ3C7OkWrxDZRSaGkPiEHgZQDEfEq2s6A8St" crossorigin="anonymous"></script></body></html> | ||
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><link rel="stylesheet" href="/accordion/magic.css?sk8zq2yGtI" integrity="sha384-sk8zq2yGtIBSI0KA/gMmNioLDSeTf0gO0YSxSUweai2HCuVBWssD5UogYR4SInxt" crossorigin="anonymous"/><link rel="icon" href="/accordion/favicon.ico"/><title>@magic-modules/accordion</title><meta name="description" content="shows / hides items in a vertical accordion"/><script type="application/ld+json">{"@context":"http://schema.org","@type":"website","name":"@magic-modules/accordion"}</script></head><body><a class="SkipLink" href="/accordion/#page">Skip to Content</a><main id="Magic"><div class="Wrapper"><header class="Header"><a class="Logo" href="/accordion/"><span>Accordion</span></a><nav class="Menu"><ul><li><a href="/accordion/#installation">installation</a></li><li><a href="/accordion/#usage">usage</a></li><li><a href="/accordion/#demo">demo</a></li><li><a href="/accordion/#css">css</a></li><li><a href="/accordion/#source">source</a></li></ul></nav></header><div class="Page" id="page"><h1>@magic-modules/accordion</h1><p>this is the <a href="https://github.com/magic-modules" target="_blank" rel="noopener">@magic-modules</a> Accordion component. shows / hides items in a vertical accordion</p><ul class="GitBadges"><li><a href="https://www.npmjs.com/package/@magic-modules/accordion" target="_blank" rel="noopener"><img src="https://img.shields.io/npm/v/@magic-modules/accordion.svg" role="presentation" alt=""/></a></li><li><a href="https://travis-ci.com/magic-modules/accordion" target="_blank" rel="noopener"><img src="https://img.shields.io/travis/com/magic-modules/accordion/master" role="presentation" alt=""/></a></li><li><a href="https://ci.appveyor.com/project/magicmodules/accordion/branch/master" target="_blank" rel="noopener"><img src="https://img.shields.io/appveyor/ci/magicmodules/accordion/master.svg" role="presentation" alt=""/></a></li><li><a href="https://coveralls.io/github/magic-modules/accordion" target="_blank" rel="noopener"><img src="https://img.shields.io/coveralls/github/magic-modules/accordion/master.svg" role="presentation" alt=""/></a></li><li><a href="https://greenkeeper.io" target="_blank" rel="noopener"><img src="https://badges.greenkeeper.io/magic-modules/accordion.svg" role="presentation" alt=""/></a></li><li><a href="https://snyk.io/test/github/magic-modules/accordion" target="_blank" rel="noopener"><img src="https://img.shields.io/snyk/vulnerabilities/github/magic-modules/accordion.svg" role="presentation" alt=""/></a></li></ul><h2 id="installation">installation:</h2><div class="Pre lines"><div class="menu"><button>copy</button></div><pre><code class="line">npm install @magic-modules/accordion</code></pre></div><h2 id="usage">usage:</h2><p>in a page or Component.</p><div class="Pre lines"><div class="menu"><button>copy</button></div><pre><code class="line"><span class="keyword">export</span> <span class="keyword">const</span> View = <span class="state">state</span> => Accordion({</code><code class="line"> <span class="colon">key</span>: <span class="string">'about'</span>,</code><code class="line"> <span class="colon">items</span>: [</code><code class="line"> { <span class="colon">title</span>: <span class="string">'title'</span>, <span class="colon">text</span>: <span class="string">'content'</span> },</code><code class="line"> { <span class="colon">title</span>: <span class="string">'title 2'</span>, <span class="colon">text</span>: <span class="string">'content 2'</span> },</code><code class="line"> {</code><code class="line"> <span class="colon">title</span>: <span class="string">'title 3'</span>,</code><code class="line"> <span class="colon">text</span>: [</code><code class="line"> p(<span class="string">'content'</span>),</code><code class="line"> p(<span class="string">'can also be an'</span>),</code><code class="line"> p([<span class="string">'array'</span>, <span class="string">' of'</span>, <span class="string">' modules'</span>]),</code><code class="line"> Link({ <span class="colon">to</span>: 'https://magic.github.io' }, '<span class="object">magic</span>.<span class="property">github</span>.<span class="property">io</span>'),</code><code class="line"> ],</code><code class="line"> },</code><code class="line"> ],</code><code class="line"> <span class="colon">title</span>: <span class="string">'optional title'</span>,</code><code class="line"> <span class="state">state</span>,</code><code class="line">})</code></pre></div><h2 id="demo">demo</h2><p>the example above renders</p><div class="Accordion about"><h3>optional title</h3><div class="AccordionItem"><h4>title</h4><div class="content">content</div></div><div class="AccordionItem"><h4>title 2</h4><div class="content">content 2</div></div><div class="AccordionItem"><h4>title 3</h4><div class="content"><p>content</p><p>can also be an</p><p>array of modules</p><a href="https://magic.github.io" target="_blank" rel="noopener">magic.github.io</a></div></div></div><h2 id="css">css</h2><p>by default, css is minimal. to adapt the styles for your theme, add (and change) the following object to /assets/theme/{THEME_NAME}/index.mjs</p><div class="Pre lines"><div class="menu"><button>copy</button></div><pre><code class="line"><span class="string">'.<span class="property">Accordion</span>'</span>: {</code><code class="line"> <span class="colon">h3</span>: {}, <span class="comment">// main title</span></code><code class="line"> <span class="string">'.<span class="property">AccordionItem</span>'</span>: {</code><code class="line"> <span class="colon">h4</span>: {}, <span class="comment">// item title</span></code><code class="line"></code><code class="line"> <span class="string">'.<span class="property">content</span>'</span>: {}, <span class="comment">// item content</span></code><code class="line"></code><code class="line"> <span class="string">'&.open'</span>: {</code><code class="line"> <span class="string">'.<span class="property">content</span>'</span>: {}, <span class="comment">// item content <span class="keyword">if</span> opened</span></code><code class="line"> },</code><code class="line"> },</code><code class="line">}</code></pre></div><h2 id="source">source</h2><p>the source for this page is in the <a href="https://github.com/magic-modules/accordion/tree/master/example" target="_blank" rel="noopener">example directory</a> and gets built and published to github using <a href="https://github.com/magic/core" target="_blank" rel="noopener">@magic/core</a></p><button class="LightSwitch"></button></div><footer class="Footer"><div class="Container"><div class="Credits">made with a few bits of <a target="_blank" rel="noopener" href="https://github.com/magic/core">magic</a></div></div></footer></div></main><script src="/accordion/magic.js?L63ziNxJRa" integrity="sha384-L63ziNxJRaowtkI2HbzSfyhdM87wa2avygz/+5UEjd9SsPUrFfFk5pTRuYgMEC84" crossorigin="anonymous"></script></body></html> |
Oops, something went wrong.