Skip to content

Commit

Permalink
Fix formatter
Browse files Browse the repository at this point in the history
  • Loading branch information
edoardocavazza committed Nov 6, 2023
1 parent bed8ecd commit cfacfb7
Show file tree
Hide file tree
Showing 2 changed files with 28 additions and 9 deletions.
26 changes: 22 additions & 4 deletions docs/.vitepress/theme/components/HomeFeatures.vue
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,37 @@
<div class="features">
<article>
<h3>Customized built-in elements</h3>
<p>DNA simplifies and promotes the usage of customized built-in elements. Customized built-in elements inherit methods and properties from standard HTML, preserving usability and accessibility features.</p>
<p
>DNA simplifies and promotes the usage of customized built-in elements. Customized built-in
elements inherit methods and properties from standard HTML, preserving usability and
accessibility features.</p
>
</article>
<article>
<h3>Properties, states and attributes</h3>
<p>DNA provides <strong>@property</strong> and <strong>@state</strong> decorators to add reactivity to component's class fields. Every change is reflected to the component's template. Properties and states can be watched, synced with attributes and dispatch changes as events.</p>
<p
>DNA provides <strong>@property</strong> and <strong>@state</strong> decorators to add
reactivity to component's class fields. Every change is reflected to the component's template.
Properties and states can be watched, synced with attributes and dispatch changes as events.</p
>
</article>
<article>
<h3>Listeners and async events</h3>
<p>DNA uses event delegation to listen events from component's elements or slotted contents. It also provides a <strong>@listen</strong> decorator to simplify the event delegation process. Events can be async and can be dispatched from the component's class.</p>
<p
>DNA uses event delegation to listen events from component's elements or slotted contents. It
also provides a <strong>@listen</strong> decorator to simplify the event delegation process.
Events can be async and can be dispatched from the component's class.</p
>
</article>
<article>
<h3>Slots</h3>
<p>DNA does not use ShadowDOM to render slotted children, but a custom implementation named <strong>Quantum</strong>. This simplifies the usage of custom elements inside forms and provides a more flexible management of slotted contents. In fact, you can iterate, wrap, map or alter slotted elements. And differently from ShadowDOM, it also works for builtin elements, so you can use <strong>&lt;slot&gt;</strong> even inside buttons.</p>
<p
>DNA does not use ShadowDOM to render slotted children, but a custom implementation named
<strong>Quantum</strong>. This simplifies the usage of custom elements inside forms and provides
a more flexible management of slotted contents. In fact, you can iterate, wrap, map or alter
slotted elements. And differently from ShadowDOM, it also works for builtin elements, so you can
use <strong>&lt;slot&gt;</strong> even inside buttons.</p
>
</article>
</div>
</div>
Expand Down
11 changes: 6 additions & 5 deletions docs/.vitepress/theme/components/HomeFrame.vue
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,10 @@
<span class="minimise"></span>
<span class="maximise"></span>
</div>
<span class="window-filename">HelloWorld.tsx</span>
<span class="window-filename">BestCodingAppEver</span>
</div>
<iframe src="https://stackblitz.com/edit/dna-sandbox?embed=1&file=HelloWorld.tsx&hideExplorer=1&hideNavigation=1"></iframe>
<iframe
src="https://stackblitz.com/edit/dna-sandbox?embed=1&file=HelloWorld.tsx&hideExplorer=1&hideNavigation=1"></iframe>
</div>
</div>
</div>
Expand Down Expand Up @@ -60,15 +61,15 @@
}
.window-buttons span.close {
background: #FF8585;
background: #ff8585;
}
.window-buttons span.minimise {
background: #FFD071;
background: #ffd071;
}
.window-buttons span.maximise {
background: #74ED94;
background: #74ed94;
}
.window-filename {
Expand Down

0 comments on commit cfacfb7

Please sign in to comment.