@zeix/ui-element
Version:
UIElement - a HTML-first library for reactive Web Components
198 lines (186 loc) • 6.06 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>read – UIElement Docs</title>
<meta name="description" content="" />
<link rel="stylesheet" href="../../assets/main.css" />
<script type="module" src="../../assets/main.js"></script>
</head>
<body class="api">
<context-router>
<header class="content-grid">
<h1 class="content">
UIElement Docs <small>Version 0.13.3</small>
</h1>
<section-menu>
<nav>
<h2 class="visually-hidden">Main Menu</h2>
<ol>
<li>
<a href="../../index.html">
<span class="icon">📖</span>
<strong>Introduction</strong>
<small>Overview and key benefits of UIElement</small>
</a>
</li>
<li>
<a href="../../getting-started.html">
<span class="icon">🚀</span>
<strong>Getting Started</strong>
<small>Installation, setup, and first steps</small>
</a>
</li>
<li>
<a href="../../components.html">
<span class="icon">🏗️</span>
<strong>Components</strong>
<small>Anatomy, lifecycle, signals, effects</small>
</a>
</li>
<li>
<a href="../../styling.html">
<span class="icon">🎨</span>
<strong>Styling</strong>
<small>Scoped styles, CSS custom properties</small>
</a>
</li>
<li>
<a href="../../data-flow.html">
<span class="icon">🔄</span>
<strong>Data Flow</strong>
<small>Passing state, events, context</small>
</a>
</li>
<li>
<a href="../../examples.html">
<span class="icon">🍽️</span>
<strong>Examples</strong>
<small>Common use cases and demos</small>
</a>
</li>
<li>
<a href="../../blog.html">
<span class="icon">📜</span>
<strong>Blog</strong>
<small>Latest articles and updates</small>
</a>
</li>
<li>
<a href="../../api.html">
<span class="icon">📚</span>
<strong>API Reference</strong>
<small>Functions, types, and constants</small>
</a>
</li>
<li>
<a href="../../about.html">
<span class="icon">🤝</span>
<strong>About</strong>
<small>License, versioning, getting involved</small>
</a>
</li>
</ol>
</nav>
</section-menu>
<card-callout class="content danger" hidden>
<p class="error" role="alert" aria-live="polite"></p>
</card-callout>
</header>
<main class="content-grid"><section class="api-content">
<h1 id="function-read">
<a name="function-read" class="anchor" href="#function-read">
<span class="permalink">🔗</span>
</a>
Function: read()
</h1>
<blockquote>
<p><strong>read</strong><<code>Q</code>, <code>K</code>>(<code>target</code>, <code>prop</code>, <code>fallback</code>): () => <code>Q</code>[<code>K</code>]</p>
</blockquote>
<p>Defined in: <a href="https://github.com/zeixcom/ui-element/blob/297c0e8e040b3880ad85a2bc873523a8086f09a3/src/core/dom.ts#L343">src/core/dom.ts:343</a></p>
<p>Read a signal property from a custom element safely after it's defined</p>
<h2 id="type-parameters">
<a name="type-parameters" class="anchor" href="#type-parameters">
<span class="permalink">🔗</span>
</a>
Type Parameters
</h2>
<h3 id="q">
<a name="q" class="anchor" href="#q">
<span class="permalink">🔗</span>
</a>
Q
</h3>
<p><code>Q</code> <em>extends</em> <a href="../type-aliases/ComponentProps.html"><code>ComponentProps</code></a></p>
<h3 id="k">
<a name="k" class="anchor" href="#k">
<span class="permalink">🔗</span>
</a>
K
</h3>
<p><code>K</code> <em>extends</em> <code>string</code></p>
<h2 id="parameters">
<a name="parameters" class="anchor" href="#parameters">
<span class="permalink">🔗</span>
</a>
Parameters
</h2>
<h3 id="target">
<a name="target" class="anchor" href="#target">
<span class="permalink">🔗</span>
</a>
target
</h3>
<p>Taget descendant element</p>
<p><code>null</code> | <a href="../type-aliases/Component.html"><code>Component</code></a><<code>Q</code>></p>
<h3 id="prop">
<a name="prop" class="anchor" href="#prop">
<span class="permalink">🔗</span>
</a>
prop
</h3>
<p><code>K</code></p>
<p>Property name to get signal for</p>
<h3 id="fallback">
<a name="fallback" class="anchor" href="#fallback">
<span class="permalink">🔗</span>
</a>
fallback
</h3>
<p><code>Q</code>[<code>K</code>]</p>
<p>Fallback value to use until component is ready</p>
<h2 id="returns">
<a name="returns" class="anchor" href="#returns">
<span class="permalink">🔗</span>
</a>
Returns
</h2>
<p>Function that returns signal value or fallback</p>
<blockquote>
<p>(): <code>Q</code>[<code>K</code>]</p>
</blockquote>
<h3 id="returns">
<a name="returns" class="anchor" href="#returns">
<span class="permalink">🔗</span>
</a>
Returns
</h3>
<p><code>Q</code>[<code>K</code>]</p>
<h2 id="since">
<a name="since" class="anchor" href="#since">
<span class="permalink">🔗</span>
</a>
Since
</h2>
<p>0.13.1</p>
</section></main>
<footer class="content-grid">
<div class="content">
<h2 class="visually-hidden">Footer</h2>
<p>© 2024 – 2025 Zeix AG</p>
</div>
</footer>
</context-router>
</body>
</html>