mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
55 lines
13 KiB
JavaScript
55 lines
13 KiB
JavaScript
import{o as a,a as n,y as t}from"./vue-libs.b44bc779.js";const l={class:"van-doc-markdown-body"},p=t(`<h1>Layout \u5E03\u5C40</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>Layout \u63D0\u4F9B\u4E86 <code>van-row</code> \u548C <code>van-col</code> \u4E24\u4E2A\u7EC4\u4EF6\u6765\u8FDB\u884C\u884C\u5217\u5E03\u5C40\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003<a href="#/zh-CN/advanced-usage#zu-jian-zhu-ce" target="_blank">\u7EC4\u4EF6\u6CE8\u518C</a>\u3002</p><pre><code class="language-js"><span class="hljs-keyword">import</span> { createApp } <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>;
|
|
<span class="hljs-keyword">import</span> { <span class="hljs-title class_">Col</span>, <span class="hljs-title class_">Row</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">'vant'</span>;
|
|
|
|
<span class="hljs-keyword">const</span> app = <span class="hljs-title function_">createApp</span>();
|
|
app.<span class="hljs-title function_">use</span>(<span class="hljs-title class_">Col</span>);
|
|
app.<span class="hljs-title function_">use</span>(<span class="hljs-title class_">Row</span>);
|
|
</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><p>Layout \u7EC4\u4EF6\u63D0\u4F9B\u4E86 <code>24\u5217\u6805\u683C</code>\uFF0C\u901A\u8FC7\u5728 <code>Col</code> \u4E0A\u6DFB\u52A0 <code>span</code> \u5C5E\u6027\u8BBE\u7F6E\u5217\u6240\u5360\u7684\u5BBD\u5EA6\u767E\u5206\u6BD4\u3002\u6B64\u5916\uFF0C\u6DFB\u52A0 <code>offset</code> \u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u5217\u7684\u504F\u79FB\u5BBD\u5EA6\uFF0C\u8BA1\u7B97\u65B9\u5F0F\u4E0E span \u76F8\u540C\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-row</span>></span>
|
|
<span class="hljs-tag"><<span class="hljs-name">van-col</span> <span class="hljs-attr">span</span>=<span class="hljs-string">"8"</span>></span>span: 8<span class="hljs-tag"></<span class="hljs-name">van-col</span>></span>
|
|
<span class="hljs-tag"><<span class="hljs-name">van-col</span> <span class="hljs-attr">span</span>=<span class="hljs-string">"8"</span>></span>span: 8<span class="hljs-tag"></<span class="hljs-name">van-col</span>></span>
|
|
<span class="hljs-tag"><<span class="hljs-name">van-col</span> <span class="hljs-attr">span</span>=<span class="hljs-string">"8"</span>></span>span: 8<span class="hljs-tag"></<span class="hljs-name">van-col</span>></span>
|
|
<span class="hljs-tag"></<span class="hljs-name">van-row</span>></span>
|
|
|
|
<span class="hljs-tag"><<span class="hljs-name">van-row</span>></span>
|
|
<span class="hljs-tag"><<span class="hljs-name">van-col</span> <span class="hljs-attr">span</span>=<span class="hljs-string">"4"</span>></span>span: 4<span class="hljs-tag"></<span class="hljs-name">van-col</span>></span>
|
|
<span class="hljs-tag"><<span class="hljs-name">van-col</span> <span class="hljs-attr">span</span>=<span class="hljs-string">"10"</span> <span class="hljs-attr">offset</span>=<span class="hljs-string">"4"</span>></span>offset: 4, span: 10<span class="hljs-tag"></<span class="hljs-name">van-col</span>></span>
|
|
<span class="hljs-tag"></<span class="hljs-name">van-row</span>></span>
|
|
|
|
<span class="hljs-tag"><<span class="hljs-name">van-row</span>></span>
|
|
<span class="hljs-tag"><<span class="hljs-name">van-col</span> <span class="hljs-attr">offset</span>=<span class="hljs-string">"12"</span> <span class="hljs-attr">span</span>=<span class="hljs-string">"12"</span>></span>offset: 12, span: 12<span class="hljs-tag"></<span class="hljs-name">van-col</span>></span>
|
|
<span class="hljs-tag"></<span class="hljs-name">van-row</span>></span>
|
|
</code></pre></div><div class="van-doc-card"><h3 id="she-zhi-lie-yuan-su-jian-ju" tabindex="-1">\u8BBE\u7F6E\u5217\u5143\u7D20\u95F4\u8DDD</h3><p>\u901A\u8FC7 <code>gutter</code> \u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u5217\u5143\u7D20\u4E4B\u95F4\u7684\u95F4\u8DDD\uFF0C\u9ED8\u8BA4\u95F4\u8DDD\u4E3A 0\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-row</span> <span class="hljs-attr">gutter</span>=<span class="hljs-string">"20"</span>></span>
|
|
<span class="hljs-tag"><<span class="hljs-name">van-col</span> <span class="hljs-attr">span</span>=<span class="hljs-string">"8"</span>></span>span: 8<span class="hljs-tag"></<span class="hljs-name">van-col</span>></span>
|
|
<span class="hljs-tag"><<span class="hljs-name">van-col</span> <span class="hljs-attr">span</span>=<span class="hljs-string">"8"</span>></span>span: 8<span class="hljs-tag"></<span class="hljs-name">van-col</span>></span>
|
|
<span class="hljs-tag"><<span class="hljs-name">van-col</span> <span class="hljs-attr">span</span>=<span class="hljs-string">"8"</span>></span>span: 8<span class="hljs-tag"></<span class="hljs-name">van-col</span>></span>
|
|
<span class="hljs-tag"></<span class="hljs-name">van-row</span>></span>
|
|
</code></pre></div><div class="van-doc-card"><h3 id="dui-qi-fang-shi" tabindex="-1">\u5BF9\u9F50\u65B9\u5F0F</h3><p>\u901A\u8FC7 <code>justify</code> \u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u4E3B\u8F74\u4E0A\u5185\u5BB9\u7684\u5BF9\u9F50\u65B9\u5F0F\uFF0C\u7B49\u4EF7\u4E8E flex \u5E03\u5C40\u4E2D\u7684 <code>justify-content</code> \u5C5E\u6027\u3002</p><pre><code class="language-html"><span class="hljs-comment"><!-- \u5C45\u4E2D --></span>
|
|
<span class="hljs-tag"><<span class="hljs-name">van-row</span> <span class="hljs-attr">justify</span>=<span class="hljs-string">"center"</span>></span>
|
|
<span class="hljs-tag"><<span class="hljs-name">van-col</span> <span class="hljs-attr">span</span>=<span class="hljs-string">"6"</span>></span>span: 6<span class="hljs-tag"></<span class="hljs-name">van-col</span>></span>
|
|
<span class="hljs-tag"><<span class="hljs-name">van-col</span> <span class="hljs-attr">span</span>=<span class="hljs-string">"6"</span>></span>span: 6<span class="hljs-tag"></<span class="hljs-name">van-col</span>></span>
|
|
<span class="hljs-tag"><<span class="hljs-name">van-col</span> <span class="hljs-attr">span</span>=<span class="hljs-string">"6"</span>></span>span: 6<span class="hljs-tag"></<span class="hljs-name">van-col</span>></span>
|
|
<span class="hljs-tag"></<span class="hljs-name">van-row</span>></span>
|
|
|
|
<span class="hljs-comment"><!-- \u53F3\u5BF9\u9F50 --></span>
|
|
<span class="hljs-tag"><<span class="hljs-name">van-row</span> <span class="hljs-attr">justify</span>=<span class="hljs-string">"end"</span>></span>
|
|
<span class="hljs-tag"><<span class="hljs-name">van-col</span> <span class="hljs-attr">span</span>=<span class="hljs-string">"6"</span>></span>span: 6<span class="hljs-tag"></<span class="hljs-name">van-col</span>></span>
|
|
<span class="hljs-tag"><<span class="hljs-name">van-col</span> <span class="hljs-attr">span</span>=<span class="hljs-string">"6"</span>></span>span: 6<span class="hljs-tag"></<span class="hljs-name">van-col</span>></span>
|
|
<span class="hljs-tag"><<span class="hljs-name">van-col</span> <span class="hljs-attr">span</span>=<span class="hljs-string">"6"</span>></span>span: 6<span class="hljs-tag"></<span class="hljs-name">van-col</span>></span>
|
|
<span class="hljs-tag"></<span class="hljs-name">van-row</span>></span>
|
|
|
|
<span class="hljs-comment"><!-- \u4E24\u7AEF\u5BF9\u9F50 --></span>
|
|
<span class="hljs-tag"><<span class="hljs-name">van-row</span> <span class="hljs-attr">justify</span>=<span class="hljs-string">"space-between"</span>></span>
|
|
<span class="hljs-tag"><<span class="hljs-name">van-col</span> <span class="hljs-attr">span</span>=<span class="hljs-string">"6"</span>></span>span: 6<span class="hljs-tag"></<span class="hljs-name">van-col</span>></span>
|
|
<span class="hljs-tag"><<span class="hljs-name">van-col</span> <span class="hljs-attr">span</span>=<span class="hljs-string">"6"</span>></span>span: 6<span class="hljs-tag"></<span class="hljs-name">van-col</span>></span>
|
|
<span class="hljs-tag"><<span class="hljs-name">van-col</span> <span class="hljs-attr">span</span>=<span class="hljs-string">"6"</span>></span>span: 6<span class="hljs-tag"></<span class="hljs-name">van-col</span>></span>
|
|
<span class="hljs-tag"></<span class="hljs-name">van-row</span>></span>
|
|
|
|
<span class="hljs-comment"><!-- \u6BCF\u4E2A\u5143\u7D20\u7684\u4E24\u4FA7\u95F4\u9694\u76F8\u7B49 --></span>
|
|
<span class="hljs-tag"><<span class="hljs-name">van-row</span> <span class="hljs-attr">justify</span>=<span class="hljs-string">"space-around"</span>></span>
|
|
<span class="hljs-tag"><<span class="hljs-name">van-col</span> <span class="hljs-attr">span</span>=<span class="hljs-string">"6"</span>></span>span: 6<span class="hljs-tag"></<span class="hljs-name">van-col</span>></span>
|
|
<span class="hljs-tag"><<span class="hljs-name">van-col</span> <span class="hljs-attr">span</span>=<span class="hljs-string">"6"</span>></span>span: 6<span class="hljs-tag"></<span class="hljs-name">van-col</span>></span>
|
|
<span class="hljs-tag"><<span class="hljs-name">van-col</span> <span class="hljs-attr">span</span>=<span class="hljs-string">"6"</span>></span>span: 6<span class="hljs-tag"></<span class="hljs-name">van-col</span>></span>
|
|
<span class="hljs-tag"></<span class="hljs-name">van-row</span>></span>
|
|
</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="row-props" tabindex="-1">Row Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>gutter</td><td>\u5217\u5143\u7D20\u4E4B\u95F4\u7684\u95F4\u8DDD\uFF08\u5355\u4F4D\u4E3A px\uFF09</td><td><em>number | string</em></td><td>-</td></tr><tr><td>tag</td><td>\u81EA\u5B9A\u4E49\u5143\u7D20\u6807\u7B7E</td><td><em>string</em></td><td><code>div</code></td></tr><tr><td>justify</td><td>\u4E3B\u8F74\u5BF9\u9F50\u65B9\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3A <code>end</code> <code>center</code> <br> <code>space-around</code> <code>space-between</code></td><td><em>string</em></td><td><code>start</code></td></tr><tr><td>align</td><td>\u4EA4\u53C9\u8F74\u5BF9\u9F50\u65B9\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3A <code>center</code> <code>bottom</code></td><td><em>string</em></td><td><code>top</code></td></tr><tr><td>wrap <code>v3.0.11</code></td><td>\u662F\u5426\u81EA\u52A8\u6362\u884C</td><td><em>boolean</em></td><td><code>true</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="col-props" tabindex="-1">Col Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>span</td><td>\u5217\u5143\u7D20\u5BBD\u5EA6</td><td><em>number | string</em></td><td>-</td></tr><tr><td>offset</td><td>\u5217\u5143\u7D20\u504F\u79FB\u8DDD\u79BB</td><td><em>number | string</em></td><td>-</td></tr><tr><td>tag</td><td>\u81EA\u5B9A\u4E49\u5143\u7D20\u6807\u7B7E</td><td><em>string</em></td><td><code>div</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="row-events" tabindex="-1">Row Events</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u56DE\u8C03\u53C2\u6570</th></tr></thead><tbody><tr><td>click</td><td>\u70B9\u51FB\u65F6\u89E6\u53D1</td><td><em>event: MouseEvent</em></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="col-events" tabindex="-1">Col Events</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u56DE\u8C03\u53C2\u6570</th></tr></thead><tbody><tr><td>click</td><td>\u70B9\u51FB\u65F6\u89E6\u53D1</td><td><em>event: MouseEvent</em></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="lei-xing-ding-yi" tabindex="-1">\u7C7B\u578B\u5B9A\u4E49</h3><p>\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A</p><pre><code class="language-ts"><span class="hljs-keyword">import</span> <span class="hljs-keyword">type</span> { <span class="hljs-title class_">ColProps</span>, <span class="hljs-title class_">RowProps</span>, <span class="hljs-title class_">RowAlign</span>, <span class="hljs-title class_">RowJustify</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">'vant'</span>;
|
|
</code></pre></div>`,13),c=[p],r={__name:"README.zh-CN",setup(e,{expose:s}){return s({frontmatter:{}}),(o,d)=>(a(),n("div",l,c))}};export{r as default};
|