2 lines
2.9 KiB
JavaScript
2 lines
2.9 KiB
JavaScript
import{_ as e,o,c as a,ae as r}from"./chunks/framework.C8AWLET_.js";const p=JSON.parse('{"title":"UI Components","description":"","frontmatter":{},"headers":[],"relativePath":"ui/introduction.md","filePath":"ui/introduction.md"}'),n={name:"ui/introduction.md"};function d(i,t,s,c,l,u){return o(),a("div",null,[...t[0]||(t[0]=[r('<h1 id="ui-components" tabindex="-1">UI Components <a class="header-anchor" href="#ui-components" aria-label="Permalink to "UI Components""></a></h1><p>The <strong>SigPro UI</strong> plugin is a high-level component library built on top of the reactive core. It leverages <strong>Tailwind CSS v4</strong> for utility styling and <strong>daisyUI v5</strong> for semantic, themeable components.</p><h2 id="features" tabindex="-1">Features <a class="header-anchor" href="#features" aria-label="Permalink to "Features""></a></h2><ul><li>🚀 <strong>Fully Reactive</strong>: Every component automatically updates with signals</li><li>🎨 <strong>Themeable</strong>: Supports all daisyUI themes out of the box</li><li>📱 <strong>Responsive</strong>: Designed to work on all devices</li><li>🔧 <strong>Zero Dependencies</strong>: Pure SigPro with no framework overhead</li></ul><h2 id="quick-demo" tabindex="-1">Quick Demo <a class="header-anchor" href="#quick-demo" aria-label="Permalink to "Quick Demo""></a></h2><div id="quick-demo"></div><h2 id="what-s-included" tabindex="-1">What's Included <a class="header-anchor" href="#what-s-included" aria-label="Permalink to "What's Included""></a></h2><p>The UI plugin provides a comprehensive set of reactive components:</p><table tabindex="0"><thead><tr><th>Category</th><th>Components</th></tr></thead><tbody><tr><td><strong>Actions</strong></td><td><code>_button</code></td></tr><tr><td><strong>Forms</strong></td><td><code>_input</code>, <code>_select</code>, <code>_checkbox</code>, <code>_radio</code>, <code>_range</code></td></tr><tr><td><strong>Layout</strong></td><td><code>_fieldset</code>, <code>_accordion</code>, <code>_drawer</code></td></tr><tr><td><strong>Navigation</strong></td><td><code>_navbar</code>, <code>_menu</code>, <code>_tabs</code></td></tr><tr><td><strong>Overlays</strong></td><td><code>_modal</code>, <code>_dropdown</code></td></tr><tr><td><strong>Feedback</strong></td><td><code>_badge</code>, <code>_tooltip</code></td></tr></tbody></table><h2 id="next-steps" tabindex="-1">Next Steps <a class="header-anchor" href="#next-steps" aria-label="Permalink to "Next Steps""></a></h2><ul><li><a href="/sigpro/ui/installation.html">Installation Guide</a> - Set up Tailwind and daisyUI</li><li><a href="/sigpro/ui/button.html">Button Component</a> - Explore the button component</li><li><a href="/sigpro/ui/form.html">Form Components</a> - Build reactive forms with validation</li></ul>',11)])])}const m=e(n,[["render",d]]);export{p as __pageData,m as default};
|