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

Page demo draft

Browse Source
This commit is contained in:
Lea Verou
2024-12-10 11:53:39 -05:00
parent 21d84332e4
commit 99704faeb4
5 changed files with 154 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
docs/_includes/page-demo.njk Normal file
View File

@@ -0,0 +1,22 @@
<div id="page_slots_demo">
<link rel="stylesheet" href="/assets/examples/page-demo/demo.css">
{% set slots = components.page.slots %}
<fieldset id="page_slots_fieldset">
<legend>Slots</legend>
<div class="options">
{% for slot in slots %}
{% if slot.name != "skip-to-content" %}
<wa-checkbox name="slot" value="{{ slot.name }}" {{ 'checked' if slot.name != "menu" | safe}} class="{{ 'default' if not slot.name }}"
data-description="{{ slot.description | inlineMarkdown }}" title="{{ slot.description | inlineMarkdown | striptags | safe }}">
{{ slot.name or "(default)" }}
</wa-checkbox>
{% endif %}
{% endfor %}
</div>
</fieldset>
<wa-viewport-demo viewport="1000">
<iframe srcdoc="" id="page_slots_iframe"></iframe>
</wa-viewport-demo>
</div>
<script type=module src="/assets/examples/page-demo/demo.js"></script>