@zeix/ui-element/docs/examples/accordion-panel.html

UIElement - minimal reactive framework based on Web Components

<tab-group>
	<div role="tablist">
		<button type="button" role="tab" id="trigger_accordion-panel.html" aria-controls="panel_accordion-panel.html" aria-selected="false" tabindex="-1">HTML</button>
		<button type="button" role="tab" id="trigger_accordion-panel.css" aria-controls="panel_accordion-panel.css" aria-selected="false" tabindex="-1">CSS</button>
		<button type="button" role="tab" id="trigger_accordion-panel.ts" aria-controls="panel_accordion-panel.ts" aria-selected="true" tabindex="0">TypeScript</button>
	</div>
	
<div role="tabpanel" id="panel_accordion-panel.html" aria-labelledby="trigger_accordion-panel.html" hidden>
	<code-block language="html" copy-success="Copied!" copy-error="Error trying to copy to clipboard!">
		<p class="meta">
			<span class="file">accordion-panel.html</span>
			<span class="language">html</span>
		</p>
		<pre class="shiki monokai" style="background-color:#272822;color:#F8F8F2" tabindex="0"><code><span class="line"><span style="color:#F8F8F2">&#x3C;</span><span style="color:#F92672">accordion-panel</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">	&#x3C;</span><span style="color:#F92672">details</span><span style="color:#A6E22E"> open</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">		&#x3C;</span><span style="color:#F92672">summary</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">			&#x3C;</span><span style="color:#F92672">div</span><span style="color:#A6E22E"> class</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"summary"</span><span style="color:#F8F8F2">>Tab 1&#x3C;/</span><span style="color:#F92672">div</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">		&#x3C;/</span><span style="color:#F92672">summary</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">		Content for Tab 1</span></span>
<span class="line"><span style="color:#F8F8F2">	&#x3C;/</span><span style="color:#F92672">details</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">&#x3C;/</span><span style="color:#F92672">accordion-panel</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">&#x3C;</span><span style="color:#F92672">accordion-panel</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">	&#x3C;</span><span style="color:#F92672">details</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">		&#x3C;</span><span style="color:#F92672">summary</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">			&#x3C;</span><span style="color:#F92672">div</span><span style="color:#A6E22E"> class</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"summary"</span><span style="color:#F8F8F2">>Tab 2&#x3C;/</span><span style="color:#F92672">div</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">		&#x3C;/</span><span style="color:#F92672">summary</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">		Content for Tab 2</span></span>
<span class="line"><span style="color:#F8F8F2">	&#x3C;/</span><span style="color:#F92672">details</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">&#x3C;/</span><span style="color:#F92672">accordion-panel</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">&#x3C;</span><span style="color:#F92672">accordion-panel</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">	&#x3C;</span><span style="color:#F92672">details</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">		&#x3C;</span><span style="color:#F92672">summary</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">			&#x3C;</span><span style="color:#F92672">div</span><span style="color:#A6E22E"> class</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"summary"</span><span style="color:#F8F8F2">>Tab 3&#x3C;/</span><span style="color:#F92672">div</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">		&#x3C;/</span><span style="color:#F92672">summary</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">		Content for Tab 3</span></span>
<span class="line"><span style="color:#F8F8F2">	&#x3C;/</span><span style="color:#F92672">details</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">&#x3C;/</span><span style="color:#F92672">accordion-panel</span><span style="color:#F8F8F2">></span></span></code></pre>
		<input-button class="copy">
			<button type="button" class="secondary small">
				<span class="label">Copy</span>
			</button>
		</input-button>
	</code-block>
</div>

<div role="tabpanel" id="panel_accordion-panel.css" aria-labelledby="trigger_accordion-panel.css" hidden>
	<code-block language="css" copy-success="Copied!" copy-error="Error trying to copy to clipboard!">
		<p class="meta">
			<span class="file">accordion-panel.css</span>
			<span class="language">css</span>
		</p>
		<pre class="shiki monokai" style="background-color:#272822;color:#F8F8F2" tabindex="0"><code><span class="line"><span style="color:#F92672">accordion-panel</span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">	display</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">block</span><span style="color:#F8F8F2">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F8F8F2">	> details {</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F8F8F2">		&#x26; summary {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">			cursor</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">pointer</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">			font-size</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--font-size-m);</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">			font-weight</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--font-weight-bold);</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">            margin</span><span style="color:#F8F8F2">: </span><span style="color:#AE81FF">0</span><span style="color:#AE81FF"> 0</span><span style="color:#66D9EF"> var</span><span style="color:#F8F8F2">(--space-s);</span></span>
<span class="line"><span style="color:#F8F8F2">		}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6E22E">		::marker</span><span style="color:#F8F8F2">,</span></span>
<span class="line"><span style="color:#A6E22E">		::-webkit-details-marker</span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">			color</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--color-text-soft);</span></span>
<span class="line"><span style="color:#F8F8F2">		}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6E22E">		.summary</span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">			display</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">inline-block</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">			margin-left</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--space-xs);</span></span>
<span class="line"><span style="color:#F8F8F2">		}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F8F8F2">		&#x26;[</span><span style="color:#A6E22E">open</span><span style="color:#F8F8F2">] {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">			margin-bottom</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--space-m);</span></span>
<span class="line"><span style="color:#F8F8F2">		}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F8F8F2">		&#x26;[</span><span style="color:#A6E22E">aria-disabled</span><span style="color:#F92672">=</span><span style="color:#E6DB74">"true"</span><span style="color:#F8F8F2">] {</span></span>
<span class="line"><span style="color:#F8F8F2">			</span></span>
<span class="line"><span style="color:#F8F8F2">			&#x26; summary {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">				pointer-events</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">none</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">				display</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">block</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">				cursor</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">text</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#F8F8F2">			}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6E22E">			::marker</span><span style="color:#F8F8F2">,</span></span>
<span class="line"><span style="color:#A6E22E">			::-webkit-details-marker</span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">				display</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">none</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#F8F8F2">			}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6E22E">			.summary</span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">                margin-left</span><span style="color:#F8F8F2">: </span><span style="color:#AE81FF">0</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#F8F8F2">            }</span></span>
<span class="line"><span style="color:#F8F8F2">		}</span></span>
<span class="line"><span style="color:#F8F8F2">	}</span></span>
<span class="line"><span style="color:#F8F8F2">}</span></span></code></pre>
		<input-button class="copy">
			<button type="button" class="secondary small">
				<span class="label">Copy</span>
			</button>
		</input-button>
	</code-block>
</div>

<div role="tabpanel" id="panel_accordion-panel.ts" aria-labelledby="trigger_accordion-panel.ts">
	<code-block language="ts" copy-success="Copied!" copy-error="Error trying to copy to clipboard!">
		<p class="meta">
			<span class="file">accordion-panel.ts</span>
			<span class="language">ts</span>
		</p>
		<pre class="shiki monokai" style="background-color:#272822;color:#F8F8F2" tabindex="0"><code><span class="line"><span style="color:#F92672">import</span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#F92672">	type</span><span style="color:#F8F8F2"> Component,</span></span>
<span class="line"><span style="color:#F8F8F2">	asBoolean,</span></span>
<span class="line"><span style="color:#F8F8F2">	component,</span></span>
<span class="line"><span style="color:#F8F8F2">	first,</span></span>
<span class="line"><span style="color:#F8F8F2">	setProperty,</span></span>
<span class="line"><span style="color:#F8F8F2">	toggleAttribute,</span></span>
<span class="line"><span style="color:#F8F8F2">} </span><span style="color:#F92672">from</span><span style="color:#E6DB74"> "../../../"</span><span style="color:#F8F8F2">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F92672">export</span><span style="color:#66D9EF;font-style:italic"> type</span><span> </span><span style="color:#A6E22E;text-decoration:underline">AccordionPanelProps</span><span style="color:#F92672"> =</span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#F8F8F2">	open</span><span style="color:#F92672">:</span><span style="color:#66D9EF;font-style:italic"> boolean</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#F8F8F2">	collapsible</span><span style="color:#F92672">:</span><span style="color:#66D9EF;font-style:italic"> boolean</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#F8F8F2">};</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F92672">export</span><span style="color:#F92672"> default</span><span style="color:#A6E22E"> component</span><span style="color:#F8F8F2">(</span></span>
<span class="line"><span style="color:#E6DB74">	"accordion-panel"</span><span style="color:#F8F8F2">,</span></span>
<span class="line"><span style="color:#F8F8F2">	{</span></span>
<span class="line"><span style="color:#F8F8F2">		open: asBoolean,</span></span>
<span class="line"><span style="color:#F8F8F2">		collapsible: asBoolean,</span></span>
<span class="line"><span style="color:#F8F8F2">	},</span></span>
<span class="line"><span style="color:#F8F8F2">	(</span><span style="color:#FD971F;font-style:italic">el</span><span style="color:#F8F8F2">) </span><span style="color:#66D9EF;font-style:italic">=></span><span style="color:#F8F8F2"> [</span></span>
<span class="line"><span style="color:#A6E22E">		toggleAttribute</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">"open"</span><span style="color:#F8F8F2">),</span></span>
<span class="line"><span style="color:#A6E22E">		toggleAttribute</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">"collapsible"</span><span style="color:#F8F8F2">),</span></span>
<span class="line"><span style="color:#A6E22E">		setProperty</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">"hidden"</span><span style="color:#F8F8F2">, () </span><span style="color:#66D9EF;font-style:italic">=></span><span style="color:#F92672"> !</span><span style="color:#F8F8F2">el.open </span><span style="color:#F92672">&#x26;&#x26;</span><span style="color:#F92672"> !</span><span style="color:#F8F8F2">el.collapsible),</span></span>
<span class="line"><span style="color:#A6E22E">		first</span><span style="color:#F8F8F2">&#x3C;</span><span style="color:#A6E22E;text-decoration:underline">AccordionPanelProps</span><span style="color:#F8F8F2">, </span><span style="color:#A6E22E;text-decoration:underline">HTMLDetailsElement</span><span style="color:#F8F8F2">>(</span></span>
<span class="line"><span style="color:#E6DB74">			"details"</span><span style="color:#F8F8F2">,</span></span>
<span class="line"><span style="color:#A6E22E">			setProperty</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">"open"</span><span style="color:#F8F8F2">),</span></span>
<span class="line"><span style="color:#A6E22E">			setProperty</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">"ariaDisabled"</span><span style="color:#F8F8F2">, () </span><span style="color:#66D9EF;font-style:italic">=></span><span style="color:#A6E22E"> String</span><span style="color:#F8F8F2">(</span><span style="color:#F92672">!</span><span style="color:#F8F8F2">el.collapsible)),</span></span>
<span class="line"><span style="color:#F8F8F2">		),</span></span>
<span class="line"><span style="color:#F8F8F2">	],</span></span>
<span class="line"><span style="color:#F8F8F2">);</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F92672">declare</span><span style="color:#F8F8F2"> global {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">	interface</span><span> </span><span style="color:#A6E22E;text-decoration:underline">HTMLElementTagNameMap</span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#E6DB74">		"accordion-panel"</span><span style="color:#F92672">:</span><span> </span><span style="color:#A6E22E;text-decoration:underline">Component</span><span style="color:#F8F8F2">&#x3C;</span><span style="color:#A6E22E;text-decoration:underline">AccordionPanelProps</span><span style="color:#F8F8F2">>;</span></span>
<span class="line"><span style="color:#F8F8F2">	}</span></span>
<span class="line"><span style="color:#F8F8F2">}</span></span>
<span class="line"></span></code></pre>
		<input-button class="copy">
			<button type="button" class="secondary small">
				<span class="label">Copy</span>
			</button>
		</input-button>
	</code-block>
</div>
</tab-group>