mirror of
https://github.com/IT4Change/Ocelot-Social.git
synced 2026-04-06 01:25:31 +00:00
149 lines
23 KiB
JavaScript
149 lines
23 KiB
JavaScript
import{_ as n}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as a,a as e,o as l}from"./app-h9l50wZ_.js";const i={};function p(d,s){return l(),a("div",null,s[0]||(s[0]=[e(`<h2 id="page-layouts" tabindex="-1"><a class="header-anchor" href="#page-layouts"><span>Page layouts</span></a></h2><p>You can layout a page in different ways. These are best described by example.</p><h3 id="sidebar-only" tabindex="-1"><a class="header-anchor" href="#sidebar-only"><span>Sidebar only</span></a></h3><div class="language-iframe line-numbers-mode" data-highlighter="shiki" data-ext="iframe" data-title="iframe" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><template></span></span>
|
|
<span class="line"><span> <ds-page ref="page"></span></span>
|
|
<span class="line"><span> <template slot="brand"></span></span>
|
|
<span class="line"><span> <ds-logo></ds-logo></span></span>
|
|
<span class="line"><span> </template></span></span>
|
|
<span class="line"><span> <ds-menu</span></span>
|
|
<span class="line"><span> @navigate="$refs.page.closeDrawer()"</span></span>
|
|
<span class="line"><span> slot="sidebar"</span></span>
|
|
<span class="line"><span> :routes="routes"></ds-menu></span></span>
|
|
<span class="line"><span> <ds-menu</span></span>
|
|
<span class="line"><span> @navigate="$refs.page.closeDrawer()"</span></span>
|
|
<span class="line"><span> slot="drawer"</span></span>
|
|
<span class="line"><span> :routes="routes"></ds-menu></span></span>
|
|
<span class="line"><span> <ds-page-title heading="Sidebar only"></ds-page-title></span></span>
|
|
<span class="line"><span> <ds-container></span></span>
|
|
<span class="line"><span> <ds-space margin-top="large"></span></span>
|
|
<span class="line"><span> <ds-text></span></span>
|
|
<span class="line"><span> This page uses only a sidebar.</span></span>
|
|
<span class="line"><span> </ds-text></span></span>
|
|
<span class="line"><span> <ds-text></span></span>
|
|
<span class="line"><span> On mobile devices it will hide the sidebar and show a header with a drawer toggle.</span></span>
|
|
<span class="line"><span> </ds-text></span></span>
|
|
<span class="line"><span> </ds-space></span></span>
|
|
<span class="line"><span> </ds-container></span></span>
|
|
<span class="line"><span> </ds-page></span></span>
|
|
<span class="line"><span></template></span></span>
|
|
<span class="line"><span></span></span>
|
|
<span class="line"><span><script></span></span>
|
|
<span class="line"><span> export default {</span></span>
|
|
<span class="line"><span> data() {</span></span>
|
|
<span class="line"><span> return {</span></span>
|
|
<span class="line"><span> routes: [</span></span>
|
|
<span class="line"><span> { name: 'Introduction' },</span></span>
|
|
<span class="line"><span> {</span></span>
|
|
<span class="line"><span> name: 'Layout',</span></span>
|
|
<span class="line"><span> children: [</span></span>
|
|
<span class="line"><span> { name: 'Container' },</span></span>
|
|
<span class="line"><span> { name: 'Page' },</span></span>
|
|
<span class="line"><span> { name: 'Page Title' }</span></span>
|
|
<span class="line"><span> ]</span></span>
|
|
<span class="line"><span> },</span></span>
|
|
<span class="line"><span> { name: 'Typography' },</span></span>
|
|
<span class="line"><span> { name: 'Navigation' }</span></span>
|
|
<span class="line"><span> ]</span></span>
|
|
<span class="line"><span> }</span></span>
|
|
<span class="line"><span> }</span></span>
|
|
<span class="line"><span> }</span></span>
|
|
<span class="line"><span></script></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="navbar-only" tabindex="-1"><a class="header-anchor" href="#navbar-only"><span>Navbar only</span></a></h3><div class="language-iframe line-numbers-mode" data-highlighter="shiki" data-ext="iframe" data-title="iframe" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><template></span></span>
|
|
<span class="line"><span> <ds-page ref="page"></span></span>
|
|
<span class="line"><span> <template slot="brand"></span></span>
|
|
<span class="line"><span> <ds-logo></ds-logo></span></span>
|
|
<span class="line"><span> </template></span></span>
|
|
<span class="line"><span> <ds-menu</span></span>
|
|
<span class="line"><span> @navigate="$refs.page.closeDrawer()"</span></span>
|
|
<span class="line"><span> slot="navbar"</span></span>
|
|
<span class="line"><span> :routes="routes"</span></span>
|
|
<span class="line"><span> navbar></ds-menu></span></span>
|
|
<span class="line"><span> <ds-menu</span></span>
|
|
<span class="line"><span> @navigate="$refs.page.closeDrawer()"</span></span>
|
|
<span class="line"><span> slot="drawer"</span></span>
|
|
<span class="line"><span> :routes="routes"></ds-menu></span></span>
|
|
<span class="line"><span> <ds-page-title heading="Navbar only"></ds-page-title></span></span>
|
|
<span class="line"><span> <ds-container></span></span>
|
|
<span class="line"><span> <ds-space margin-top="large"></span></span>
|
|
<span class="line"><span> <ds-text></span></span>
|
|
<span class="line"><span> This page uses only a navbar.</span></span>
|
|
<span class="line"><span> </ds-text></span></span>
|
|
<span class="line"><span> <ds-text></span></span>
|
|
<span class="line"><span> On mobile devices it will hide the navbar and show a drawer toggle.</span></span>
|
|
<span class="line"><span> </ds-text></span></span>
|
|
<span class="line"><span> </ds-space></span></span>
|
|
<span class="line"><span> </ds-container></span></span>
|
|
<span class="line"><span> </ds-page></span></span>
|
|
<span class="line"><span></template></span></span>
|
|
<span class="line"><span></span></span>
|
|
<span class="line"><span><script></span></span>
|
|
<span class="line"><span> export default {</span></span>
|
|
<span class="line"><span> data() {</span></span>
|
|
<span class="line"><span> return {</span></span>
|
|
<span class="line"><span> routes: [</span></span>
|
|
<span class="line"><span> { name: 'Introduction' },</span></span>
|
|
<span class="line"><span> {</span></span>
|
|
<span class="line"><span> name: 'Layout',</span></span>
|
|
<span class="line"><span> children: [</span></span>
|
|
<span class="line"><span> { name: 'Container' },</span></span>
|
|
<span class="line"><span> { name: 'Page' },</span></span>
|
|
<span class="line"><span> { name: 'Page Title' }</span></span>
|
|
<span class="line"><span> ]</span></span>
|
|
<span class="line"><span> },</span></span>
|
|
<span class="line"><span> { name: 'Typography' },</span></span>
|
|
<span class="line"><span> { name: 'Navigation' }</span></span>
|
|
<span class="line"><span> ]</span></span>
|
|
<span class="line"><span> }</span></span>
|
|
<span class="line"><span> }</span></span>
|
|
<span class="line"><span> }</span></span>
|
|
<span class="line"><span></script></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="sidebar-and-navbar" tabindex="-1"><a class="header-anchor" href="#sidebar-and-navbar"><span>Sidebar and Navbar</span></a></h3><div class="language-iframe line-numbers-mode" data-highlighter="shiki" data-ext="iframe" data-title="iframe" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><template></span></span>
|
|
<span class="line"><span> <ds-page ref="page"></span></span>
|
|
<span class="line"><span> <template slot="brand"></span></span>
|
|
<span class="line"><span> <ds-logo></ds-logo></span></span>
|
|
<span class="line"><span> </template></span></span>
|
|
<span class="line"><span> <ds-menu</span></span>
|
|
<span class="line"><span> @navigate="$refs.page.closeDrawer()"</span></span>
|
|
<span class="line"><span> slot="navbar"</span></span>
|
|
<span class="line"><span> :routes="routes"</span></span>
|
|
<span class="line"><span> navbar></ds-menu></span></span>
|
|
<span class="line"><span> <ds-menu</span></span>
|
|
<span class="line"><span> @navigate="$refs.page.closeDrawer()"</span></span>
|
|
<span class="line"><span> slot="sidebar"</span></span>
|
|
<span class="line"><span> :routes="routes"></ds-menu></span></span>
|
|
<span class="line"><span> <ds-menu</span></span>
|
|
<span class="line"><span> @navigate="$refs.page.closeDrawer()"</span></span>
|
|
<span class="line"><span> slot="drawer"</span></span>
|
|
<span class="line"><span> :routes="routes"></ds-menu></span></span>
|
|
<span class="line"><span> <ds-page-title heading="Sidebar and Navbar"></ds-page-title></span></span>
|
|
<span class="line"><span> <ds-container></span></span>
|
|
<span class="line"><span> <ds-space margin-top="large"></span></span>
|
|
<span class="line"><span> <ds-text></span></span>
|
|
<span class="line"><span> This page uses the best of both worlds.</span></span>
|
|
<span class="line"><span> </ds-text></span></span>
|
|
<span class="line"><span> <ds-text></span></span>
|
|
<span class="line"><span> On mobile devices it will hide the navbar as well as the sidebar and show a drawer toggle.</span></span>
|
|
<span class="line"><span> </ds-text></span></span>
|
|
<span class="line"><span> </ds-space></span></span>
|
|
<span class="line"><span> </ds-container></span></span>
|
|
<span class="line"><span> </ds-page></span></span>
|
|
<span class="line"><span></template></span></span>
|
|
<span class="line"><span></span></span>
|
|
<span class="line"><span><script></span></span>
|
|
<span class="line"><span> export default {</span></span>
|
|
<span class="line"><span> data() {</span></span>
|
|
<span class="line"><span> return {</span></span>
|
|
<span class="line"><span> routes: [</span></span>
|
|
<span class="line"><span> { name: 'Introduction' },</span></span>
|
|
<span class="line"><span> {</span></span>
|
|
<span class="line"><span> name: 'Layout',</span></span>
|
|
<span class="line"><span> children: [</span></span>
|
|
<span class="line"><span> { name: 'Container' },</span></span>
|
|
<span class="line"><span> { name: 'Page' },</span></span>
|
|
<span class="line"><span> { name: 'Page Title' }</span></span>
|
|
<span class="line"><span> ]</span></span>
|
|
<span class="line"><span> },</span></span>
|
|
<span class="line"><span> { name: 'Typography' },</span></span>
|
|
<span class="line"><span> { name: 'Navigation' }</span></span>
|
|
<span class="line"><span> ]</span></span>
|
|
<span class="line"><span> }</span></span>
|
|
<span class="line"><span> }</span></span>
|
|
<span class="line"><span> }</span></span>
|
|
<span class="line"><span></script></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,8)]))}const r=n(i,[["render",p],["__file","demo.html.vue"]]),v=JSON.parse(`{"path":"/styleguide/src/system/components/layout/Page/demo.html","title":"","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"Page layouts","slug":"page-layouts","link":"#page-layouts","children":[{"level":3,"title":"Sidebar only","slug":"sidebar-only","link":"#sidebar-only","children":[]},{"level":3,"title":"Navbar only","slug":"navbar-only","link":"#navbar-only","children":[]},{"level":3,"title":"Sidebar and Navbar","slug":"sidebar-and-navbar","link":"#sidebar-and-navbar","children":[]}]}],"git":{"createdTime":1775351521000,"updatedTime":1775351521000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":1.22,"words":367},"filePathRelative":"styleguide/src/system/components/layout/Page/demo.md","localizedDate":"April 5, 2026","excerpt":"<h2>Page layouts</h2>\\n<p>You can layout a page in different ways. These are best described by example.</p>\\n<h3>Sidebar only</h3>\\n<div class=\\"language-iframe line-numbers-mode\\" data-highlighter=\\"shiki\\" data-ext=\\"iframe\\" data-title=\\"iframe\\" style=\\"--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34\\"><pre class=\\"shiki shiki-themes one-light one-dark-pro vp-code\\"><code><span class=\\"line\\"><span><template></span></span>\\n<span class=\\"line\\"><span> <ds-page ref=\\"page\\"></span></span>\\n<span class=\\"line\\"><span> <template slot=\\"brand\\"></span></span>\\n<span class=\\"line\\"><span> <ds-logo></ds-logo></span></span>\\n<span class=\\"line\\"><span> </template></span></span>\\n<span class=\\"line\\"><span> <ds-menu</span></span>\\n<span class=\\"line\\"><span> @navigate=\\"$refs.page.closeDrawer()\\"</span></span>\\n<span class=\\"line\\"><span> slot=\\"sidebar\\"</span></span>\\n<span class=\\"line\\"><span> :routes=\\"routes\\"></ds-menu></span></span>\\n<span class=\\"line\\"><span> <ds-menu</span></span>\\n<span class=\\"line\\"><span> @navigate=\\"$refs.page.closeDrawer()\\"</span></span>\\n<span class=\\"line\\"><span> slot=\\"drawer\\"</span></span>\\n<span class=\\"line\\"><span> :routes=\\"routes\\"></ds-menu></span></span>\\n<span class=\\"line\\"><span> <ds-page-title heading=\\"Sidebar only\\"></ds-page-title></span></span>\\n<span class=\\"line\\"><span> <ds-container></span></span>\\n<span class=\\"line\\"><span> <ds-space margin-top=\\"large\\"></span></span>\\n<span class=\\"line\\"><span> <ds-text></span></span>\\n<span class=\\"line\\"><span> This page uses only a sidebar.</span></span>\\n<span class=\\"line\\"><span> </ds-text></span></span>\\n<span class=\\"line\\"><span> <ds-text></span></span>\\n<span class=\\"line\\"><span> On mobile devices it will hide the sidebar and show a header with a drawer toggle.</span></span>\\n<span class=\\"line\\"><span> </ds-text></span></span>\\n<span class=\\"line\\"><span> </ds-space></span></span>\\n<span class=\\"line\\"><span> </ds-container></span></span>\\n<span class=\\"line\\"><span> </ds-page></span></span>\\n<span class=\\"line\\"><span></template></span></span>\\n<span class=\\"line\\"><span></span></span>\\n<span class=\\"line\\"><span><script></span></span>\\n<span class=\\"line\\"><span> export default {</span></span>\\n<span class=\\"line\\"><span> data() {</span></span>\\n<span class=\\"line\\"><span> return {</span></span>\\n<span class=\\"line\\"><span> routes: [</span></span>\\n<span class=\\"line\\"><span> { name: 'Introduction' },</span></span>\\n<span class=\\"line\\"><span> {</span></span>\\n<span class=\\"line\\"><span> name: 'Layout',</span></span>\\n<span class=\\"line\\"><span> children: [</span></span>\\n<span class=\\"line\\"><span> { name: 'Container' },</span></span>\\n<span class=\\"line\\"><span> { name: 'Page' },</span></span>\\n<span class=\\"line\\"><span> { name: 'Page Title' }</span></span>\\n<span class=\\"line\\"><span> ]</span></span>\\n<span class=\\"line\\"><span> },</span></span>\\n<span class=\\"line\\"><span> { name: 'Typography' },</span></span>\\n<span class=\\"line\\"><span> { name: 'Navigation' }</span></span>\\n<span class=\\"line\\"><span> ]</span></span>\\n<span class=\\"line\\"><span> }</span></span>\\n<span class=\\"line\\"><span> }</span></span>\\n<span class=\\"line\\"><span> }</span></span>\\n<span class=\\"line\\"><span></script></span></span></code></pre>\\n<div class=\\"line-numbers\\" aria-hidden=\\"true\\" style=\\"counter-reset:line-number 0\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div>"}`);export{r as comp,v as data};
|