mirror of
https://github.com/IT4Change/Ocelot-Social.git
synced 2026-04-06 01:25:31 +00:00
32 lines
7.7 KiB
JavaScript
32 lines
7.7 KiB
JavaScript
import{_ as a}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as e,a as n,o as l}from"./app-YeL2FPh5.js";const i={};function t(p,s){return l(),e("div",null,s[0]||(s[0]=[n(`<h2 id="default-margins" tabindex="-1"><a class="header-anchor" href="#default-margins"><span>Default margins</span></a></h2><p>By default the top margin is 0 and the bottom margin is <code>large</code>.</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" 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><ds-space></span></span>
|
|
<span class="line"><span> <ds-placeholder>I have my own space</ds-placeholder></span></span>
|
|
<span class="line"><span></ds-space></span></span>
|
|
<span class="line"><span><ds-space></span></span>
|
|
<span class="line"><span> <ds-placeholder>I have my own space</ds-placeholder></span></span>
|
|
<span class="line"><span></ds-space></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></div><h2 id="custom-margins" tabindex="-1"><a class="header-anchor" href="#custom-margins"><span>Custom margins</span></a></h2><p>Margins can be <code>xxx-small, xx-small, x-small, small, base, large, x-large, xx-large and xxx-large</code></p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" 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><ds-space margin-bottom="xxx-small"></span></span>
|
|
<span class="line"><span> <ds-placeholder>I have my own space (xxx-small)</ds-placeholder></span></span>
|
|
<span class="line"><span></ds-space></span></span>
|
|
<span class="line"><span><ds-space margin-bottom="xx-small"></span></span>
|
|
<span class="line"><span> <ds-placeholder>I have my own space (xx-small)</ds-placeholder></span></span>
|
|
<span class="line"><span></ds-space></span></span>
|
|
<span class="line"><span><ds-space margin-bottom="small"></span></span>
|
|
<span class="line"><span> <ds-placeholder>I have my own space (small)</ds-placeholder></span></span>
|
|
<span class="line"><span></ds-space></span></span>
|
|
<span class="line"><span><ds-space margin-bottom="base"></span></span>
|
|
<span class="line"><span> <ds-placeholder>I have my own space (base)</ds-placeholder></span></span>
|
|
<span class="line"><span></ds-space></span></span>
|
|
<span class="line"><span><ds-space margin-bottom="large"></span></span>
|
|
<span class="line"><span> <ds-placeholder>I have my own space (large)</ds-placeholder></span></span>
|
|
<span class="line"><span></ds-space></span></span>
|
|
<span class="line"><span><ds-space margin-bottom="xx-large"></span></span>
|
|
<span class="line"><span> <ds-placeholder>I have my own space (xx-large)</ds-placeholder></span></span>
|
|
<span class="line"><span></ds-space></span></span>
|
|
<span class="line"><span><ds-space></span></span>
|
|
<span class="line"><span> <ds-placeholder>I have my own space</ds-placeholder></span></span>
|
|
<span class="line"><span></ds-space></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></div><h2 id="responsive-breakpoints" tabindex="-1"><a class="header-anchor" href="#responsive-breakpoints"><span>Responsive Breakpoints</span></a></h2><p>Sometimes we need to adjust the layout for different screen sizes. Therefore margin can be set as an object of breakpoints <code>base, xs, sm, md, lg, xl</code></p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" 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><ds-space :margin-bottom="{ base: 'small', md: 'base', lg: 'large' }"></span></span>
|
|
<span class="line"><span> <ds-placeholder>I have my own space</ds-placeholder></span></span>
|
|
<span class="line"><span></ds-space></span></span>
|
|
<span class="line"><span><ds-space></span></span>
|
|
<span class="line"><span> <ds-placeholder>I have my own space</ds-placeholder></span></span>
|
|
<span class="line"><span></ds-space></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></div>`,9)]))}const r=a(i,[["render",t],["__file","demo.html.vue"]]),o=JSON.parse('{"path":"/styleguide/src/system/components/layout/Space/demo.html","title":"","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"Default margins","slug":"default-margins","link":"#default-margins","children":[]},{"level":2,"title":"Custom margins","slug":"custom-margins","link":"#custom-margins","children":[]},{"level":2,"title":"Responsive Breakpoints","slug":"responsive-breakpoints","link":"#responsive-breakpoints","children":[]}],"git":{"createdTime":1775388691000,"updatedTime":1775388691000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":0.82,"words":247},"filePathRelative":"styleguide/src/system/components/layout/Space/demo.md","localizedDate":"April 5, 2026","excerpt":"<h2>Default margins</h2>\\n<p>By default the top margin is 0 and the bottom margin is <code>large</code>.</p>\\n<div class=\\"language- line-numbers-mode\\" data-highlighter=\\"shiki\\" data-ext=\\"\\" data-title=\\"\\" 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><ds-space></span></span>\\n<span class=\\"line\\"><span> <ds-placeholder>I have my own space</ds-placeholder></span></span>\\n<span class=\\"line\\"><span></ds-space></span></span>\\n<span class=\\"line\\"><span><ds-space></span></span>\\n<span class=\\"line\\"><span> <ds-placeholder>I have my own space</ds-placeholder></span></span>\\n<span class=\\"line\\"><span></ds-space></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></div>"}');export{r as comp,o as data};
|