js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 12:09:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

move states

Browse Source
This commit is contained in:
Cory LaViska
2024-12-17 11:10:04 -05:00
parent 2b0acca219
commit 37a1680a85
1 changed files with 25 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
docs/_layouts/component.njk
View File

@@ -143,31 +143,6 @@
</div>
{% endif %}
{# States #}
{% if component.states.length %}
<h2>States</h2>
<div class="table-scroll">
<table class="component-table">
<thead>
<tr>
<th class="table-name">Name</th>
<th class="table-description">Description</th>
<th class="table-selector">CSS selector</th>
</tr>
</thead>
<tbody>
{% for state in component.states %}
<tr>
<td class="table-name"><code>{{ state.name }}</code></td>
<td class="table-description">{{ state.description | inlineMarkdown | safe }}</td>
<td class="table-selector"><code>[data-state-{{ state.name }}]</code></td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endif %}
{# Events #}
{% if component.events.length %}
<h2>Events</h2>
@@ -225,6 +200,31 @@
</div>
{% endif %}
{# Custom States #}
{% if component.cssStates.length %}
<h2>Custom States</h2>
<div class="table-scroll">
<table class="component-table">
<thead>
<tr>
<th class="table-name">Name</th>
<th class="table-description">Description</th>
<th class="table-selector">CSS selector</th>
</tr>
</thead>
<tbody>
{% for state in component.cssStates %}
<tr>
<td class="table-name"><code>{{ state.name }}</code></td>
<td class="table-description">{{ state.description | inlineMarkdown | safe }}</td>
<td class="table-selector"><code>[data-state-{{ state.name }}]</code></td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endif %}
{# CSS Parts #}
{% if component.cssParts.length %}
<h2>CSS parts</h2>