mirror of
https://github.com/IT4Change/Ocelot-Social.git
synced 2026-04-06 01:25:31 +00:00
67 lines
15 KiB
JavaScript
67 lines
15 KiB
JavaScript
import{_ as e}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as l,a as n,o as a}from"./app-h9l50wZ_.js";const i={};function t(d,s){return a(),l("div",null,s[0]||(s[0]=[n(`<h2 id="item-widths" tabindex="-1"><a class="header-anchor" href="#item-widths"><span>Item widths</span></a></h2><p>By default each item has the same width.</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-flex></span></span>
|
|
<span class="line"><span> <ds-flex-item><ds-placeholder>same</ds-placeholder></ds-flex-item></span></span>
|
|
<span class="line"><span> <ds-flex-item><ds-placeholder>same</ds-placeholder></ds-flex-item></span></span>
|
|
<span class="line"><span></ds-flex></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></div><p>You can set widths as parts of the whole.</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-flex></span></span>
|
|
<span class="line"><span> <ds-flex-item><ds-placeholder>1</ds-placeholder></ds-flex-item></span></span>
|
|
<span class="line"><span> <ds-flex-item width="2"><ds-placeholder>2</ds-placeholder></ds-flex-item></span></span>
|
|
<span class="line"><span> <ds-flex-item width="3"><ds-placeholder>3</ds-placeholder></ds-flex-item></span></span>
|
|
<span class="line"><span></ds-flex></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></div><p>You can set widths as fix values.</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-flex></span></span>
|
|
<span class="line"><span> <ds-flex-item width="200px"><ds-placeholder>200px</ds-placeholder></ds-flex-item></span></span>
|
|
<span class="line"><span> <ds-flex-item><ds-placeholder>1</ds-placeholder></ds-flex-item></span></span>
|
|
<span class="line"><span> <ds-flex-item width="30%"><ds-placeholder>30%</ds-placeholder></ds-flex-item></span></span>
|
|
<span class="line"><span></ds-flex></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></div><p>You can set a default width for each item on the flex component.</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-flex width="50%"></span></span>
|
|
<span class="line"><span> <ds-flex-item><ds-placeholder>item</ds-placeholder></ds-flex-item></span></span>
|
|
<span class="line"><span> <ds-flex-item><ds-placeholder>item</ds-placeholder></ds-flex-item></span></span>
|
|
<span class="line"><span> <ds-flex-item width="100%"><ds-placeholder>item</ds-placeholder></ds-flex-item></span></span>
|
|
<span class="line"><span> <ds-flex-item><ds-placeholder>item</ds-placeholder></ds-flex-item></span></span>
|
|
<span class="line"><span> <ds-flex-item><ds-placeholder>item</ds-placeholder></ds-flex-item></span></span>
|
|
<span class="line"><span></ds-flex></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></div><h2 id="column-gutter" tabindex="-1"><a class="header-anchor" href="#column-gutter"><span>Column Gutter</span></a></h2><p>You can set a gutter for each item on the flex component.</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-flex gutter="small"></span></span>
|
|
<span class="line"><span> <ds-flex-item><ds-placeholder>same</ds-placeholder></ds-flex-item></span></span>
|
|
<span class="line"><span> <ds-flex-item><ds-placeholder>same</ds-placeholder></ds-flex-item></span></span>
|
|
<span class="line"><span></ds-flex></span></span>
|
|
<span class="line"><span><ds-flex gutter="base"></span></span>
|
|
<span class="line"><span> <ds-flex-item><ds-placeholder>same</ds-placeholder></ds-flex-item></span></span>
|
|
<span class="line"><span> <ds-flex-item><ds-placeholder>same</ds-placeholder></ds-flex-item></span></span>
|
|
<span class="line"><span></ds-flex></span></span>
|
|
<span class="line"><span><ds-flex gutter="large"></span></span>
|
|
<span class="line"><span> <ds-flex-item><ds-placeholder>same</ds-placeholder></ds-flex-item></span></span>
|
|
<span class="line"><span> <ds-flex-item><ds-placeholder>same</ds-placeholder></ds-flex-item></span></span>
|
|
<span class="line"><span></ds-flex></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></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 width, gutter and direction 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-flex</span></span>
|
|
<span class="line"><span> :gutter="{ base: 'xx-small', md: 'small' }"</span></span>
|
|
<span class="line"><span> :direction="{ md: 'row-reverse' }"></span></span>
|
|
<span class="line"><span> <ds-flex-item :width="{ base: '100%', sm: 1, md: 1 }"></span></span>
|
|
<span class="line"><span> <ds-placeholder>1@md</ds-placeholder></span></span>
|
|
<span class="line"><span> </ds-flex-item></span></span>
|
|
<span class="line"><span> <ds-flex-item :width="{ base: '100%', sm: 1, md: 2 }"></span></span>
|
|
<span class="line"><span> <ds-placeholder>2@md</ds-placeholder></span></span>
|
|
<span class="line"><span> </ds-flex-item></span></span>
|
|
<span class="line"><span></ds-flex></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></div><h2 id="common-patterns" tabindex="-1"><a class="header-anchor" href="#common-patterns"><span>Common Patterns</span></a></h2><p>Fix sidebar flex</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-flex></span></span>
|
|
<span class="line"><span> <ds-flex-item :width="{ base: '60px', md: '200px' }"></span></span>
|
|
<span class="line"><span> <ds-placeholder>sidebar</ds-placeholder></span></span>
|
|
<span class="line"><span> </ds-flex-item></span></span>
|
|
<span class="line"><span> <ds-flex-item></span></span>
|
|
<span class="line"><span> <ds-placeholder>main content</ds-placeholder></span></span>
|
|
<span class="line"><span> </ds-flex-item></span></span>
|
|
<span class="line"><span></ds-flex></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></div><p>Grid list of items</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-flex</span></span>
|
|
<span class="line"><span> :gutter="{ base: 'x-small', md: 'small' }"</span></span>
|
|
<span class="line"><span> :width="{ base: '100%', sm: '50%', lg: '33.333332%' }"></span></span>
|
|
<span class="line"><span> <ds-flex-item></span></span>
|
|
<span class="line"><span> <ds-placeholder>item</ds-placeholder></span></span>
|
|
<span class="line"><span> </ds-flex-item></span></span>
|
|
<span class="line"><span> <ds-flex-item></span></span>
|
|
<span class="line"><span> <ds-placeholder>item</ds-placeholder></span></span>
|
|
<span class="line"><span> </ds-flex-item></span></span>
|
|
<span class="line"><span> <ds-flex-item></span></span>
|
|
<span class="line"><span> <ds-placeholder>item</ds-placeholder></span></span>
|
|
<span class="line"><span> </ds-flex-item></span></span>
|
|
<span class="line"><span> <ds-flex-item></span></span>
|
|
<span class="line"><span> <ds-placeholder>item</ds-placeholder></span></span>
|
|
<span class="line"><span> </ds-flex-item></span></span>
|
|
<span class="line"><span> <ds-flex-item></span></span>
|
|
<span class="line"><span> <ds-placeholder>item</ds-placeholder></span></span>
|
|
<span class="line"><span> </ds-flex-item></span></span>
|
|
<span class="line"><span> <ds-flex-item></span></span>
|
|
<span class="line"><span> <ds-placeholder>item</ds-placeholder></span></span>
|
|
<span class="line"><span> </ds-flex-item></span></span>
|
|
<span class="line"><span></ds-flex></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></div>`,20)]))}const c=e(i,[["render",t],["__file","demo.html.vue"]]),m=JSON.parse('{"path":"/styleguide/src/system/components/layout/Flex/demo.html","title":"","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"Item widths","slug":"item-widths","link":"#item-widths","children":[]},{"level":2,"title":"Column Gutter","slug":"column-gutter","link":"#column-gutter","children":[]},{"level":2,"title":"Responsive Breakpoints","slug":"responsive-breakpoints","link":"#responsive-breakpoints","children":[]},{"level":2,"title":"Common Patterns","slug":"common-patterns","link":"#common-patterns","children":[]}],"git":{"createdTime":1775351521000,"updatedTime":1775351521000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":1.71,"words":514},"filePathRelative":"styleguide/src/system/components/layout/Flex/demo.md","localizedDate":"April 5, 2026","excerpt":"<h2>Item widths</h2>\\n<p>By default each item has the same width.</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-flex></span></span>\\n<span class=\\"line\\"><span> <ds-flex-item><ds-placeholder>same</ds-placeholder></ds-flex-item></span></span>\\n<span class=\\"line\\"><span> <ds-flex-item><ds-placeholder>same</ds-placeholder></ds-flex-item></span></span>\\n<span class=\\"line\\"><span></ds-flex></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></div>"}');export{c as comp,m as data};
|