@zeix/ui-element

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Examples & Recipes – UIElement Docs</title> <meta name="description" content="Common use cases and demos" /> <base href="./examples-recipes.html" /> <link rel="stylesheet" href="assets/main.css" /> <script type="module" src="assets/main.js"></script> </head> <body> <header class="content-grid"> <h1 class="content"> UIElement Docs Version 0.12.2 </h1> <nav class="breakout"> <ol> <li> <a href="index.html"> 📖 Introduction Overview and key benefits of UIElement </a> </li> <li> <a href="getting-started.html"> 🚀 Getting Started Installation, setup, and first steps </a> </li> <li> <a href="building-components.html"> 🏗️ Building Components Anatomy, lifecycle, signals, effects </a> </li> <li> <a href="styling-components.html"> 🎨 Styling Components Scoped styles, CSS custom properties </a> </li> <li> <a href="data-flow.html"> 🔄 Data Flow Passing state, events, context </a> </li> <li> <a href="patterns-techniques.html"> 💡 Patterns & Techniques Composition, scheduling, best practices </a> </li> <li> <a href="examples-recipes.html" class="active"> 🍽️ Examples & Recipes Common use cases and demos </a> </li> <li> <a href="api-reference.html"> 📚 API Reference Detailed documentation of classes and functions </a> </li> <li> <a href="about-community.html"> 🤝 About & Community License, versioning, getting involved </a> </li> </ol> </nav> </header> <main><section class="hero"> <h1 id="examples-amp-recipes"> <a name="examples-amp-recipes" class="anchor" href="#examples-amp-recipes"> 🔗 </a> 🍽️ Examples & Recipes </h1>Discover practical examples and patterns for building reactive, modular components with UIElement. Each example focuses on showcasing a specific feature or best practice, guiding you through real-world use cases. </section> <section> <h2 id="what-you39ll-learn"> <a name="what-you39ll-learn" class="anchor" href="#what-you39ll-learn"> 🔗 </a> What You'll Learn </h2>This collection of examples demonstrates a range of scenarios, from simple state updates in a single component to managing complex interactions across multiple components. Here's an overview of what you'll find: <ul> <li>Basic Composition: <code>TabList</code> and <code>AccordionPanel</code> - See how a parent component can control the visibility of multiple child components, showcasing state sharing and communication between components.</li> <li>Syntax Highlighting: - See how wrapping content in a <code>CodeBlock</code> component enables syntax highlighting on the client, demonstrating integration with third-party libraries.</li> <li>Fetching Data Example: <code>LazyLoad</code> - Learn how to fetch content only when needed, handling asynchronous operations and updating state reactively as data is loaded.</li> <li>Form Validation Example: <code>InputField</code> with Client-Side & Server-Side Validation - Validate input fields based on requirements passed from the server and dynamically check the validity of entries, such as checking the availability of usernames via server requests.</li> <li>Context Example: <code>MediaContext</code> - Discover how to share state globally across components using context, with practical use cases like adapting to media queries and responsive design.</li> </ul> Whether you're getting started with a basic component or building a full-featured application, these examples will help you understand how to use <code>UIElement</code> effectively to build reactive Web Components. </section> <section> <h2 id="tablist-and-accordionpanel-example"> <a name="tablist-and-accordionpanel-example" class="anchor" href="#tablist-and-accordionpanel-example"> 🔗 </a> TabList and AccordionPanel Example </h2><component-demo> <div class="preview"> <tab-list> <menu> <li><button type="button" aria-pressed="true">Tab 1</button></li> <li><button type="button">Tab 2</button></li> <li><button type="button">Tab 3</button></li> </menu> <accordion-panel> <details open aria-disabled="true"> <summary class="visually-hidden"> <div class="summary">Tab 1</div> </summary> Content for Tab 1 </details> </accordion-panel> <accordion-panel> <details aria-disabled="true"> <summary class="visually-hidden"> <div class="summary">Tab 2</div> </summary> Content for Tab 2 </details> </accordion-panel> <accordion-panel> <details aria-disabled="true"> <summary class="visually-hidden"> <div class="summary">Tab 3</div> </summary> Content for Tab 3 </details> </accordion-panel> </tab-list> </div> <accordion-panel collapsible> <details> <summary>TabList Source Code</summary> <lazy-load src="./examples/tab-list.html"> Loading... </lazy-load> </details> </accordion-panel> <accordion-panel collapsible> <details> <summary>AccordionPanel Source Code</summary> <lazy-load src="./examples/accordion-panel.html"> Loading... </lazy-load> </details> </accordion-panel> </component-demo> </section> <section> <h2 id="codeblock-example"> <a name="codeblock-example" class="anchor" href="#codeblock-example"> 🔗 </a> CodeBlock Example </h2><component-demo> <div class="preview"> <code-block collapsed language="html" copy-success="Copied!" copy-error="Error trying to copy to clipboard!"> code-block.html html <pre class="language-html"><code><code-block collapsed language="html" copy-success="Copied!" copy-error="Error trying to copy to clipboard!"> code-block.html html <pre><code class="language-html"><code-block collapsed language="html" copy-success="Copied!" copy-error="Error trying to copy to clipboard!"> code-block.html html <pre><code class="language-html"></code></pre> <input-button class="copy"> <button type="button" class="secondary small">Copy</button> </input-button> <button type="button" class="overlay">Expand</button> </code-block></code></pre> <input-button class="copy"> <button type="button" class="secondary small">Copy</button> </input-button> <button type="button" class="overlay">Expand</button> </code-block></code></pre> <input-button class="copy"> <button type="button" class="secondary small">Copy</button> </input-button> <button type="button" class="overlay">Expand</button> </code-block> </div> <accordion-panel collapsible> <details> <summary>CodeBlock Source Code</summary> <lazy-load src="./examples/code-block.html"> Loading... </lazy-load> </details> </accordion-panel> <accordion-panel collapsible> <details> <summary>InputButton Source Code</summary> <lazy-load src="./examples/input-button.html"> Loading... </lazy-load> </details> </accordion-panel> </component-demo> </section> <section> <h2 id="lazyload-example"> <a name="lazyload-example" class="anchor" href="#lazyload-example"> 🔗 </a> LazyLoad Example </h2><component-demo> <div class="preview"> <lazy-load src="./examples/snippets/snippet.html"> Loading... </lazy-load> </div> <accordion-panel collapsible> <details> <summary>LazyLoad Source Code</summary> <lazy-load src="./examples/lazy-load.html"> Loading... </lazy-load> </details> </accordion-panel> </component-demo> </section> <section> <h2 id="inputfield-example"> <a name="inputfield-example" class="anchor" href="#inputfield-example"> 🔗 </a> InputField Example </h2><component-demo> <div class="preview"> <input-field> <label for="name-input">Name</label> <div class="row"> <div class="group auto"> <input type="text" id="name-input" name="name" autocomplete="name" required> </div> </div> </input-field> <input-field integer> <label for="bday-year-input">Birthday Year</label> <div class="row"> <div class="group short"> <input type="number" id="bday-year-input" name="bday-year" autocomplete="bday-year" required minlength="4" maxlength="4" min="1900" max="2024" step="1"> </div> <div class="spinbutton" data-step="1"> <button type="button" class="decrement" aria-label="Decrement">−</button> <button type="button" class="increment" aria-label="Increment">+</button> </div> </div> </input-field> <input-field validate="./examples/snippets/validate.html"> <label for="username-input">Username</label> <div class="row"> <div class="group auto"> <input type="text" id="username-input" name="username" autocomplete="username" aria-describedby="username-description" required minlength="4" maxlength="20"> </div> </div> Max. 20 characters </input-field> </div> <accordion-panel collapsible> <details> <summary>InputField Source Code</summary> <lazy-load src="./examples/input-field.html"> Loading... </lazy-load> </details> </accordion-panel> </component-demo> </section> <section> <h2 id="mediacontext-example"> <a name="mediacontext-example" class="anchor" href="#mediacontext-example"> 🔗 </a> MediaContext Example </h2>The <code>MediaContext</code> component provides global state to any sub-components in its DOM tree by exposing context for responsive and adaptive features. It tracks the following: <ul> <li>Media Motion (<code>media-motion</code>): Indicates whether the user prefers reduced motion based on the <code>(prefers-reduced-motion)</code> media query.</li> <li>*Media Theme (<code>media-theme</code>): Provides the user's preferred color scheme, such as dark mode, based on the <code>(prefers-color-scheme)</code> media query.</li> <li>Media Viewport (<code>media-viewport</code>): Indicates the current viewport size and is classified into different sizes (e.g., <code>xs</code>, <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xl</code>). Custom breakpoints can be configured by setting attributes on the <code><media-context></code> element.</li> <li>Media Orientation (<code>media-orientation</code>): Tracks the device's screen orientation, switching between <code>landscape</code> and <code>portrait</code>.</li> </ul> <h3 id="configuring-breakpoints"> <a name="configuring-breakpoints" class="anchor" href="#configuring-breakpoints"> 🔗 </a> Configuring Breakpoints </h3>The viewport sizes can be customized by providing attributes on the <code><media-context></code> element: <ul> <li><code>sm</code>: Small screen breakpoint (default: <code>32em</code>).</li> <li><code>md</code>: Medium screen breakpoint (default: <code>48em</code>).</li> <li><code>lg</code>: Large screen breakpoint (default: <code>72em</code>).</li> <li><code>xl</code>: Extra large screen breakpoint (default: <code>108em</code>).</li> </ul> For example, to set a small breakpoint at 40em and a medium breakpoint at 60em, use: <code-block language="html" copy-success="Copied!" copy-error="Error trying to copy to clipboard!"> html <pre class="shiki monokai" style="background-color:#272822;color:#F8F8F2" tabindex="0"><code><media-context sm="40em" md="60em"></media-context> </code></pre> <input-button class="copy"> <button type="button" class="secondary small"> Copy </button> </input-button> </code-block> Source code: <code-block collapsed language="js" copy-success="Copied!" copy-error="Error trying to copy to clipboard!"> js <pre class="shiki monokai" style="background-color:#272822;color:#F8F8F2" tabindex="0"><code>import { UIElement, maybe } from '@zeix/ui-element' const VIEWPORT_XS = 'xs'; const VIEWPORT_SM = 'sm'; const VIEWPORT_MD = 'md'; const VIEWPORT_LG = 'lg'; const VIEWPORT_XL = 'xl'; const ORIENTATION_LANDSCAPE = 'landscape'; const ORIENTATION_PORTRAIT = 'portrait'; class MediaContext extends UIElement { static providedContexts = ['media-motion', 'media-theme', 'media-viewport', 'media-orientation']; connectedCallback() { const getBreakpoints = () => { const parseBreakpoint = (breakpoint) => { const attr = this.getAttribute(breakpoint)?.trim(); if (!attr) return null; const unit = attr.match(/em$/) ? 'em' : 'px'; const value = maybe(parseFloat(attr)).filter(Number.isFinite)[0]; return value ? value + unit : null; }; const sm = parseBreakpoint(VIEWPORT_SM) || '32em'; const md = parseBreakpoint(VIEWPORT_MD) || '48em'; const lg = parseBreakpoint(VIEWPORT_LG) || '72em'; const xl = parseBreakpoint(VIEWPORT_XL) || '108em'; return { sm, md, lg, xl }; }; const breakpoints = getBreakpoints(); const reducedMotion = matchMedia('(prefers-reduced-motion: reduce)'); const darkMode = matchMedia('(prefers-color-scheme: dark)'); const screenSmall = matchMedia(`(min-width: ${breakpoints.sm})`); const screenMedium = matchMedia(`(min-width: ${breakpoints.md})`); const screenLarge = matchMedia(`(min-width: ${breakpoints.lg})`); const screenXLarge = matchMedia(`(min-width: ${breakpoints.xl})`); const screenOrientation = matchMedia('(orientation: landscape)'); const getViewport = () => { if (screenXLarge.matches) return VIEWPORT_XL; if (screenLarge.matches) return VIEWPORT_LG; if (screenMedium.matches) return VIEWPORT_MD; if (screenSmall.matches) return VIEWPORT_SM; return VIEWPORT_XS; }; this.set('media-motion', reducedMotion.matches); this.set('media-theme', darkMode.matches); this.set('media-viewport', getViewport()); this.set('media-orientation', screenOrientation.matches ? ORIENTATION_LANDSCAPE : ORIENTATION_PORTRAIT); reducedMotion.onchange = (e) => this.set('media-motion', e.matches); darkMode.onchange = (e) => this.set('media-theme', e.matches); screenSmall.onchange = () => this.set('media-viewport', getViewport()); screenMedium.onchange = () => this.set('media-viewport', getViewport()); screenLarge.onchange = () => this.set('media-viewport', getViewport()); screenXLarge.onchange = () => this.set('media-viewport', getViewport()); screenOrientation.onchange = (e) => this.set('media-orientation', e.matches ? ORIENTATION_LANDSCAPE : ORIENTATION_PORTRAIT); } } MediaContext.define('media-context'); </code></pre> <input-button class="copy"> <button type="button" class="secondary small"> Copy </button> </input-button> <button type="button" class="overlay">Expand</button> </code-block> </section> <section> <h2 id="themedcomponent-example"> <a name="themedcomponent-example" class="anchor" href="#themedcomponent-example"> 🔗 </a> ThemedComponent Example </h2> <media-context> <themed-component> This component changes its background based on the theme! </themed-component> </media-context>  <details> <summary>Source Code</summary>  <tab-list>  <tab-panel label="HTML"> <h3 id="html"> <a name="html" class="anchor" href="#html"> 🔗 </a> HTML </h3><code-block language="html" copy-success="Copied!" copy-error="Error trying to copy to clipboard!"> html <pre class="shiki monokai" style="background-color:#272822;color:#F8F8F2" tabindex="0"><code><media-context> <themed-component> This component changes its background based on the theme! </themed-component> </media-context> </code></pre> <input-button class="copy"> <button type="button" class="secondary small"> Copy </button> </input-button> </code-block> </tab-panel>  <tab-panel label="CSS"> <h3 id="css"> <a name="css" class="anchor" href="#css"> 🔗 </a> CSS </h3><code-block collapsed language="css" copy-success="Copied!" copy-error="Error trying to copy to clipboard!"> css <pre class="shiki monokai" style="background-color:#272822;color:#F8F8F2" tabindex="0"><code>themed-component { display: block; padding: 20px; color: white; transition: background-color 0.3s ease; &.dark { background-color: black; } &.light { background-color: lightgray; } } </code></pre> <input-button class="copy"> <button type="button" class="secondary small"> Copy </button> </input-button> <button type="button" class="overlay">Expand</button> </code-block> </tab-panel>  <tab-panel label="JavaScript"> <h3 id="javascript"> <a name="javascript" class="anchor" href="#javascript"> 🔗 </a> JavaScript </h3><code-block collapsed language="js" copy-success="Copied!" copy-error="Error trying to copy to clipboard!"> js <pre class="shiki monokai" style="background-color:#272822;color:#F8F8F2" tabindex="0"><code>import { UIElement, toggleClass } from '@zeix/ui-element'; class ThemedComponent extends UIElement { static consumedContexts = ['media-theme']; connectedCallback() { // Toggle the class based on 'media-theme' signal this.self.sync(toggleClass('dark', () => this.get('media-theme'))); this.self.sync(toggleClass('light', () => !this.get('media-theme'))); } } ThemedComponent.define('themed-component'); </code></pre> <input-button class="copy"> <button type="button" class="secondary small"> Copy </button> </input-button> <button type="button" class="overlay">Expand</button> </code-block> </tab-panel> </tab-list> </details> </section> <section> <h2 id="animatedcomponent-example"> <a name="animatedcomponent-example" class="anchor" href="#animatedcomponent-example"> 🔗 </a> AnimatedComponent Example </h2> <media-context> <animated-component> <div class="animated-box">Box 1</div> <div class="animated-box">Box 2</div> <div class="animated-box">Box 3</div> </animated-component> </media-context>  <details> <summary>Source Code</summary>  <tab-list>  <tab-panel label="HTML"> <h3 id="html"> <a name="html" class="anchor" href="#html"> 🔗 </a> HTML </h3><code-block language="html" copy-success="Copied!" copy-error="Error trying to copy to clipboard!"> html <pre class="shiki monokai" style="background-color:#272822;color:#F8F8F2" tabindex="0"><code><media-context> <animated-component> <div class="animated-box">Box 1</div> <div class="animated-box">Box 2</div> <div class="animated-box">Box 3</div> </animated-component> </media-context> </code></pre> <input-button class="copy"> <button type="button" class="secondary small"> Copy </button> </input-button> </code-block> </tab-panel>  <tab-panel label="CSS"> <h3 id="css"> <a name="css" class="anchor" href="#css"> 🔗 </a> CSS </h3><code-block collapsed language="css" copy-success="Copied!" copy-error="Error trying to copy to clipboard!"> css <pre class="shiki monokai" style="background-color:#272822;color:#F8F8F2" tabindex="0"><code>animated-component { display: block; padding: 20px; overflow: hidden; .animated-box { width: 50px; height: 50px; margin: 10px; background-color: lightblue; text-align: center; line-height: 50px; font-weight: bold; color: white; } &.no-motion .animated-box { opacity: 0; transition: opacity 1s ease-in; } &.motion .animated-box { animation: moveAndFlash 2s infinite ease-in-out alternate; }<