mirror of
https://codeberg.org/vegvisir/website.git
synced 2025-09-14 17:03:42 +02:00
vlw
7a8fc36ec0
Brand new design for the website following the new design language I used for [version 2.0 of my personal website](https://codeberg.org/vlw/vlw.se/releases/tag/2.0.0). Reviewed-on: https://codeberg.org/vegvisir/website/pulls/2 Co-authored-by: vlw <victor@vlw.se> Co-committed-by: vlw <victor@vlw.se>
42 lines
No EOL
2.6 KiB
PHP
42 lines
No EOL
2.6 KiB
PHP
<?= VV::include("public/docs/v3.1.4/Reference/layout") ?>
|
|
<main>
|
|
<section>
|
|
<h1>Navigation attributes</h1>
|
|
<p>Vegvisir has a few attributes that can be added to elements that can be used to bind navigations and change navigation behavior without JavaScript.</p>
|
|
</section>
|
|
<section class="md param">
|
|
<h3><code class="mtk6">string</code></h3>
|
|
<h2><code class="mtk10">vv</code></h2>
|
|
<p>This attribute can be added to <strong>any</strong> clickable HTML element to bind it like an anchor tag.</p>
|
|
<p>The value of this attribute should be a string with a pathname to the page that should be loaded.</p>
|
|
<p>An element with this attribute will be treated just like an anchor tag, which means (by default) the <code>vv-shell</code> will be navigated.</p>
|
|
<p>Note: If added to an anchor tag, the anchor <code>href</code> will be prefered - and the <code>vv</code> will be ignored.</p>
|
|
</section>
|
|
<section class="md param">
|
|
<h3><code class="mtk6">string</code></h3>
|
|
<h2><code class="mtk10">vv-position</code></h2>
|
|
<p>A <a href="/docs/v3.1.4/Reference/JavaScript/POSITION"><code>Navigation.POSITION</code></a> string that determines where the contents of <code>vv</code> (or <code>href</code> on an anchor tag) should be injected relative to the element with this attribute.</p>
|
|
</section>
|
|
<section class="md param">
|
|
<h3><code class="mtk6">string</code></h3>
|
|
<h2><code class="mtk10">vv-mode</code></h2>
|
|
<p>A <a href="/docs/v3.1.4/Reference/JavaScript/MODE"><code>Navigation.MODE</code></a> string that determines how the contents of <code>vv</code> (or <code>href</code> on an anchor tag) should be injected relative to the element with this attribute.</p>
|
|
</section>
|
|
<hr>
|
|
<section>
|
|
<h1>Wrapper attributes</h1>
|
|
<p>Vegvisir sets a few attributes on elements that wrap soft-navigated content. These attributes are created automatically when it's the first time an element is used as a wrapper.</p>
|
|
</section>
|
|
<section class="md param">
|
|
<h3><code class="mtk6">string</code></h3>
|
|
<h2><code class="mtk10">vv-page</code></h2>
|
|
<p>This attribute's value will be updated with the pathname of the page that was soft-navigated to.</p>
|
|
<p>The attribute is set when a navigation is <strong>initiated</strong>.</p>
|
|
</section>
|
|
<section class="md param">
|
|
<h3><code class="mtk6">bool</code></h3>
|
|
<h2><code class="mtk10">vv-loading</code></h2>
|
|
<p>The value of this attribute will be a string-boolean with a value of "true" or "false".</p>
|
|
<p>this attribute will be "true" when a navigation is initiated, and set to "false" when the contents of the target page has been fully loaded (DOM ready).</p>
|
|
</section>
|
|
</main>
|