hipowered.dev/basecoat
1
0
Fork 0
mirror of https://github.com/hunvreus/basecoat.git synced 2026-11-11 04:38:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixing docs

Browse Source
This commit is contained in:
Ronan Berder
2025-06-18 19:54:15 +08:00
parent be9c6e537d
commit 46bf212f41
2 changed files with 7 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/src/components/sidebar.njk
+6 -15
View File
@@ -83,23 +83,14 @@ toc:
{{ code_block(code_html | prettyHtml, "html") }}
<section class="prose">
<p>To use a sidebar, you will need the sidebar itself and a sibling container for the content of the page (e.g. <code>&lt;main&gt;</code>), with the following structure for the sidebar:</p>
<ul>
<li>A <code>&lt;div class="sidebar"&gt;</code> which wraps around the entire component and holds it state (e.g. open/close). It accepts an optional <code>data-side</code> set to <code>left</code>, or <code>right</code> to specify the side of the sidebar (defaults to <code>left</code>).</li>
<li>A <code>&lt;nav&gt;</code> that contains the actual sidebar with the following children:
<ul>
<li>A <code>&lt;header&gt;</code> and <code>&lt;footer&gt;</code> for the header and footer of the sidebar (fixed position).</li>
<li>A <code>&lt;section&gt;</code> for the main navigation list. To add links, you <b>must</b> wrap them in a <code>&lt;div role="group"&gt;</code> first. These groups can contain <code>&lt;h3"&gt;</code> for group headings and lists (i.e. <code>&lt;ul&gt;</code>) of links or buttons. You can also use <code>&lt;details&gt;</code> to wrap around collapsbile sections.</li>
</ul>
</li>
</ul>
<p>Any elememt on the page can toggle, open or close the sidebar by dispatching the <code>basecoat:sidebar</code>, <code>sidebar:open</code> or <code>sidebar:close</code> events.</p>
<p>You can include the JavaScript code provided below, load it as an individual file or use the CLI. Some Alpine.js properties are also required on certain elements (e.g. <code class="text-xs">x-bind</code>, <code class="text-xs">x-data</code>, <code class="text-xs">@click</code>).</p>
<p>Any element on the page can toggle, open or close the sidebar by dispatching the <code>basecoat:sidebar</code>. By default, the event will toggle the sidebar, but can be used to open or close if you add an <code>action</code> to the detail:</p>
</section>
{% set code_trigger %}<button type="button" onclick="window.dispatchEvent(new CustomEvent('basecoat:sidebar'));">Toggle sidebar</button>
<button type="button" onclick="window.dispatchEvent(new CustomEvent('basecoat:sidebar', { detail: { action: 'open' } }));">Open sidebar</button>
<button type="button" onclick="window.dispatchEvent(new CustomEvent('basecoat:sidebar', { detail: { action: 'close' } }));">Close sidebar</button>{% endset %}
{{ code_block(code_trigger | prettyHtml, "html") }}
<h4 id="usage-html-js-3"><a href="#usage-html-js-3">HTML structure</a></h4>
<section class="prose">
docs/src/components/toast.njk
+1 -1
View File
@@ -95,7 +95,7 @@ toc:
{{ code_block(code_toaster | prettyHtml, "html") }}
<section class="prose">
<p>You can set up the alignment of the toaster using the <code>data-align</code> attribute: <code>start</code>, <code>center</code>, or <code>end</code> (default to <code>end</code>).</p>
<p>You can set up the alignment of the toaster using the <code>data-align</code> attribute: <code>data-align="start"</code>, <code>data-align="center"</code>, or <code>data-align="end"</code> (default to <code>data-align="end"</code>).</p>
</section>
<h4 id="usage-html-js-3"><a href="#usage-html-js-3">Step 3: Add your toasts</a></h4>