Docs · @astro-dx/elements

@astro-dx/elements

dx-if, dx-show, dx-for as custom elements — self-documenting, no attribute pollution.

Setup

 "code-keyword">import { register } "code-keyword">from '@astro-dx/elements';
"code-keyword">import '@astro-dx/elements'; 

"code-keyword">import { signal } "code-keyword">from '@astro-dx/core';

"code-keyword">const isOpen = "code-function">signal("code-type">false);
"code-keyword">const items  = signal<{ name: "code-type">string; price: "code-type">number }[]>([]);

"code-function">register({ isOpen, items }); 

dx-show

 <dx-show signal="isOpen">
  <p>Visible when isOpen is truthy. Stays in DOM.</p>
</dx-show> 

dx-if

 <dx-"code-keyword">if signal="isOpen">
  <div>Created when truthy, destroyed when falsy.</div>
</dx-"code-keyword">if> 

dx-for

 <ul>
  <dx-"code-keyword">for signal="items">
    <li>
      <span dx-text="name"></span>
      <span dx-text="price"></span>
    </li>
  </dx-"code-keyword">for>
</ul> 

Use @astro-dx/attributes if you prefer decorating existing elements rather than wrapping with custom element tags.