UIElement Docs Version 0.13.1

🔗 🍽️ Examples & Recipes

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.

🔗 Counter

Source Code

Loading...

Slides

🔗 Slide 1

Hello, World!

🔗 Slide 2

🔗 Slide 3

🔗 Slide 4

🔗 Slide 5

Source Code

Loading...

🔗 Combobox

Tell us where you live so we can set your timezone for our calendar and notification features.

Source Code

Loading...

🔗 Todo App

    Well done, all done!

    task tasks remaining

    Filter
    ModuleTodo Source Code

    Loading...

    InputTextbox Source Code

    Loading...

    InputButton Source Code

    Loading...

    InputCheckbox Source Code

    Loading...

    InputRadiogroup Source Code

    Loading...

    🔗 Lazy Loading

    This example shows how to handle asynchronous data loading and error states.

    Features:

    • Lazy loading with intersection observer
    • Loading states and error handling
    • Content replacement patterns

    js

    component(
      'module-lazy',
      {
        src: asString(),
        loaded: asBoolean(),
        loading: asBoolean(),
        error: asString(),
      },
      (el, { first }) => {
        let observer
    
        const loadContent = async () => {
          if (el.loaded || el.loading || !el.src) return
    
          el.loading = true
          el.error = ''
    
          try {
            const response = await fetch(el.src)
            if (!response.ok) throw new Error(`HTTP ${response.status}`)
    
            const content = await response.text()
            el.querySelector('.content').innerHTML = content
            el.loaded = true
          } catch (err) {
            el.error = err.message
          } finally {
            el.loading = false
          }
        }
    
        return [
          // Loading state
          first(
            '.loading',
            setStyle('display', () => (el.loading ? 'block' : 'none')),
          ),
    
          // Error state
          first(
            '.error',
            setText('error'),
            setStyle('display', () => (el.error ? 'block' : 'none')),
          ),
    
          // Content container
          first(
            '.content',
            setStyle('display', () => (el.loaded ? 'block' : 'none')),
          ),
    
          // Setup intersection observer
          () => {
            observer = new IntersectionObserver(entries => {
              if (entries[0].isIntersecting) {
                loadContent()
                observer.disconnect()
              }
            })
    
            observer.observe(el)
    
            return () => observer?.disconnect()
          },
        ]
      },
    )
    

    html

    <module-lazy src="/api/user-profile">
      <div class="loading">Loading user profile...</div>
      <div class="error"></div>
      <div class="content"></div>
    </module-lazy>