natxocc/sigpro
1
1
Fork 0
Code Issues Packages Projects Releases Wiki Activity
Files
e60c1f69b4d549f5c1abd3b1267203da71d955e6
sigpro/docs/assets/ui_layout.md.DLaYXca7.js
natxocc 9e5b520e91 Upload docs
2026-03-22 03:04:31 +01:00

30 lines
15 KiB
JavaScript
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
import{_ as i,o as a,c as t,ae as e}from"./chunks/framework.C8AWLET_.js";const c=JSON.parse('{"title":"Layout Components","description":"","frontmatter":{},"headers":[],"relativePath":"ui/layout.md","filePath":"ui/layout.md"}'),n={name:"ui/layout.md"};function l(h,s,p,d,o,k){return a(),t("div",null,[...s[0]||(s[0]=[e(`<h1 id="layout-components" tabindex="-1">Layout Components <a class="header-anchor" href="#layout-components" aria-label="Permalink to &quot;Layout Components&quot;">​</a></h1><p>Layout components for structuring your application with containers, sections, and collapsible panels.</p><h2 id="fieldset-fieldset" tabindex="-1">Fieldset (<code>_fieldset</code>) <a class="header-anchor" href="#fieldset-fieldset" aria-label="Permalink to &quot;Fieldset (\`_fieldset\`)&quot;">​</a></h2><p>Groups related form fields with a legend.</p><div id="fieldset-demo"></div><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">_fieldset</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ legend: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Personal Information&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, [</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> _input</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Full Name&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, $value: $name }),</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> _input</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Email Address&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;email&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, $value: $email }),</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> _select</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Role&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, options: [</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">...</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">], $value: $role })</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">])</span></span></code></pre></div><h2 id="accordion-accordion" tabindex="-1">Accordion (<code>_accordion</code>) <a class="header-anchor" href="#accordion-accordion" aria-label="Permalink to &quot;Accordion (\`_accordion\`)&quot;">​</a></h2><p>Collapsible content panels. Can be used as standalone or grouped.</p><h3 id="single-accordion" tabindex="-1">Single Accordion <a class="header-anchor" href="#single-accordion" aria-label="Permalink to &quot;Single Accordion&quot;">​</a></h3><div id="single-accordion-demo"></div><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">_accordion</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ title: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;What is SigPro UI?&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, [</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> $.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;p&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, {}, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;SigPro UI is a reactive component library...&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">])</span></span></code></pre></div><h3 id="grouped-accordions-radio-behavior" tabindex="-1">Grouped Accordions (Radio Behavior) <a class="header-anchor" href="#grouped-accordions-radio-behavior" aria-label="Permalink to &quot;Grouped Accordions (Radio Behavior)&quot;">​</a></h3><p>When multiple accordions share the same <code>name</code>, only one can be open at a time.</p><div id="grouped-accordion-demo"></div><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Grouped accordions - only one open at a time</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">_accordion</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ title: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Getting Started&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;faq&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, content1)</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">_accordion</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ title: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Installation&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;faq&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, content2)</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">_accordion</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ title: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Customization&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;faq&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, content3)</span></span></code></pre></div><h3 id="accordion-with-open-state" tabindex="-1">Accordion with Open State <a class="header-anchor" href="#accordion-with-open-state" aria-label="Permalink to &quot;Accordion with Open State&quot;">​</a></h3><p>Control the initial open state with the <code>open</code> prop.</p><div id="open-accordion-demo"></div><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">_accordion</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ title: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Open by Default&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, open: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, [</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> $.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;p&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, {}, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;This accordion starts open.&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">])</span></span></code></pre></div><h2 id="complete-layout-example" tabindex="-1">Complete Layout Example <a class="header-anchor" href="#complete-layout-example" aria-label="Permalink to &quot;Complete Layout Example&quot;">​</a></h2><div id="complete-layout-demo"></div><h2 id="api-reference" tabindex="-1">API Reference <a class="header-anchor" href="#api-reference" aria-label="Permalink to &quot;API Reference&quot;">​</a></h2><h3 id="fieldset" tabindex="-1"><code>_fieldset</code> <a class="header-anchor" href="#fieldset" aria-label="Permalink to &quot;\`_fieldset\`&quot;">​</a></h3><table tabindex="0"><thead><tr><th>Prop</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><code>legend</code></td><td><code>string</code></td><td>Fieldset title/legend text</td></tr><tr><td><code>class</code></td><td><code>string | function</code></td><td>Additional CSS classes</td></tr></tbody></table><h3 id="accordion" tabindex="-1"><code>_accordion</code> <a class="header-anchor" href="#accordion" aria-label="Permalink to &quot;\`_accordion\`&quot;">​</a></h3><table tabindex="0"><thead><tr><th>Prop</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Accordion header text</td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Group name for radio behavior (optional)</td></tr><tr><td><code>open</code></td><td><code>boolean</code></td><td>Initially open state (default: false)</td></tr></tbody></table><h2 id="styling-tips" tabindex="-1">Styling Tips <a class="header-anchor" href="#styling-tips" aria-label="Permalink to &quot;Styling Tips&quot;">​</a></h2><h3 id="custom-fieldset-styling" tabindex="-1">Custom Fieldset Styling <a class="header-anchor" href="#custom-fieldset-styling" aria-label="Permalink to &quot;Custom Fieldset Styling&quot;">​</a></h3><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">_fieldset</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ </span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> legend: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Custom Styled&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;bg-primary/10 border-primary&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}, [</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // content</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">])</span></span></code></pre></div><h3 id="custom-accordion-styling" tabindex="-1">Custom Accordion Styling <a class="header-anchor" href="#custom-accordion-styling" aria-label="Permalink to &quot;Custom Accordion Styling&quot;">​</a></h3><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">_accordion</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ </span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> title: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Styled Accordion&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;bg-base-200&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}, [</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // content</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">])</span></span></code></pre></div><h3 id="nested-layouts" tabindex="-1">Nested Layouts <a class="header-anchor" href="#nested-layouts" aria-label="Permalink to &quot;Nested Layouts&quot;">​</a></h3><p>Layout components can be nested to create complex structures:</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">_fieldset</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ legend: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Main Section&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, [</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> _accordion</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ title: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Subsection 1&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, [</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> _input</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Field 1&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, $value: $field1 })</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ]),</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> _accordion</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ title: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Subsection 2&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, [</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> _input</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Field 2&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, $value: $field2 })</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ])</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">])</span></span></code></pre></div>`,34)])])}const E=i(n,[["render",l]]);export{c as __pageData,E as default};
Reference in New Issue View Git Blame Copy Permalink