| 1 |
- import{e as s,o as a,G as n}from"./vendor.92dabd7f.js";const l={class:"markdown-body"},t=[n('<h1>Layout 布局</h1><h3>介绍</h3><p>用于快速进行布局</p><h3>安装</h3><pre><code class="language-javascript"><span class="hljs-keyword">import</span> { createApp } <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>;\n<span class="hljs-comment">// vue</span>\n<span class="hljs-keyword">import</span> { Layout,Row,Col } <span class="hljs-keyword">from</span> <span class="hljs-string">'@nutui/nutui'</span>;\n<span class="hljs-comment">// taro</span>\n<span class="hljs-keyword">import</span> { Layout,Row,Col } <span class="hljs-keyword">from</span> <span class="hljs-string">'@nutui/nutui-taro'</span>;\n\n<span class="hljs-keyword">const</span> app = createApp();\napp.use(Layout);\napp.use(Row);\napp.use(Col);\n</code></pre><h2>代码演示</h2><h3>基础用法</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">nut-row</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-col</span> <span class="hljs-attr">:span</span>=<span class="hljs-string">"24"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex-content"</span>></span>span:24<span class="hljs-tag"></<span class="hljs-name">div</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-col</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">nut-row</span>></span>\n<span class="hljs-tag"><<span class="hljs-name">nut-row</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-col</span> <span class="hljs-attr">:span</span>=<span class="hljs-string">"12"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex-content"</span>></span>span:12<span class="hljs-tag"></<span class="hljs-name">div</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-col</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-col</span> <span class="hljs-attr">:span</span>=<span class="hljs-string">"12"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex-content flex-content-light"</span>></span>span:12<span class="hljs-tag"></<span class="hljs-name">div</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-col</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">nut-row</span>></span>\n<span class="hljs-tag"><<span class="hljs-name">nut-row</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-col</span> <span class="hljs-attr">:span</span>=<span class="hljs-string">"8"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex-content"</span>></span>span:8<span class="hljs-tag"></<span class="hljs-name">div</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-col</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-col</span> <span class="hljs-attr">:span</span>=<span class="hljs-string">"8"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex-content flex-content-light"</span>></span>span:8<span class="hljs-tag"></<span class="hljs-name">div</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-col</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-col</span> <span class="hljs-attr">:span</span>=<span class="hljs-string">"8"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex-content"</span>></span>span:8<span class="hljs-tag"></<span class="hljs-name">div</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-col</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">nut-row</span>></span>\n<span class="hljs-tag"><<span class="hljs-name">nut-row</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-col</span> <span class="hljs-attr">:span</span>=<span class="hljs-string">"6"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex-content"</span>></span>span:6<span class="hljs-tag"></<span class="hljs-name">div</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-col</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-col</span> <span class="hljs-attr">:span</span>=<span class="hljs-string">"6"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex-content flex-content-light"</span>></span>span:6<span class="hljs-tag"></<span class="hljs-name">div</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-col</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-col</span> <span class="hljs-attr">:span</span>=<span class="hljs-string">"6"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex-content"</span>></span>span:6<span class="hljs-tag"></<span class="hljs-name">div</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-col</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-col</span> <span class="hljs-attr">:span</span>=<span class="hljs-string">"6"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex-content"</span>></span>span:6<span class="hljs-tag"></<span class="hljs-name">div</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-col</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">nut-row</span>></span>\n</code></pre><h3>设置元素间距</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">nut-row</span> <span class="hljs-attr">:gutter</span>=<span class="hljs-string">"10"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-col</span> <span class="hljs-attr">:span</span>=<span class="hljs-string">"8"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex-content"</span>></span>span:8<span class="hljs-tag"></<span class="hljs-name">div</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-col</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-col</span> <span class="hljs-attr">:span</span>=<span class="hljs-string">"8"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex-content flex-content-light"</span>></span>span:8<span class="hljs-tag"></<span class="hljs-name">div</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-col</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-col</span> <span class="hljs-attr">:span</span>=<span class="hljs-string">"8"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex-content"</span>></span>span:8<span class="hljs-tag"></<span class="hljs-name">div</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-col</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">nut-row</span>></span> \n</code></pre><h3>Flex布局</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">nut-row</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"flex"</span> <span class="hljs-attr">wrap</span>=<span class="hljs-string">"nowrap"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-col</span> <span class="hljs-attr">:span</span>=<span class="hljs-string">"6"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex-content"</span>></span>span:6<span class="hljs-tag"></<span class="hljs-name">div</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-col</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-col</span> <span class="hljs-attr">:span</span>=<span class="hljs-string">"6"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex-content flex-content-light"</span>></span>span:6<span class="hljs-tag"></<span class="hljs-name">div</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-col</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-col</span> <span class="hljs-attr">:span</span>=<span class="hljs-string">"6"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex-content"</span>></span>span:6<span class="hljs-tag"></<span class="hljs-name">div</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-col</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">nut-row</span>></span>\n<span class="hljs-tag"><<span class="hljs-name">nut-row</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"flex"</span> <span class="hljs-attr">justify</span>=<span class="hljs-string">"center"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-col</span> <span class="hljs-attr">:span</span>=<span class="hljs-string">"6"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex-content"</span>></span>span:6<span class="hljs-tag"></<span class="hljs-name">div</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-col</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-col</span> <span class="hljs-attr">:span</span>=<span class="hljs-string">"6"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex-content flex-content-light"</span>></span>span:6<span class="hljs-tag"></<span class="hljs-name">div</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-col</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-col</span> <span class="hljs-attr">:span</span>=<span class="hljs-string">"6"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex-content"</span>></span>span:6<span class="hljs-tag"></<span class="hljs-name">div</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-col</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">nut-row</span>></span>\n<span class="hljs-tag"><<span class="hljs-name">nut-row</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"flex"</span> <span class="hljs-attr">justify</span>=<span class="hljs-string">"end"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-col</span> <span class="hljs-attr">:span</span>=<span class="hljs-string">"6"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex-content"</span>></span>span:6<span class="hljs-tag"></<span class="hljs-name">div</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-col</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-col</span> <span class="hljs-attr">:span</span>=<span class="hljs-string">"6"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex-content flex-content-light"</span>></span>span:6<span class="hljs-tag"></<span class="hljs-name">div</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-col</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-col</span> <span class="hljs-attr">:span</span>=<span class="hljs-string">"6"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex-content"</span>></span>span:6<span class="hljs-tag"></<span class="hljs-name">div</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-col</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">nut-row</span>></span>\n<span class="hljs-tag"><<span class="hljs-name">nut-row</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"flex"</span> <span class="hljs-attr">justify</span>=<span class="hljs-string">"space-between"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-col</span> <span class="hljs-attr">:span</span>=<span class="hljs-string">"6"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex-content"</span>></span>span:6<span class="hljs-tag"></<span class="hljs-name">div</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-col</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-col</span> <span class="hljs-attr">:span</span>=<span class="hljs-string">"6"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex-content flex-content-light"</span>></span>span:6<span class="hljs-tag"></<span class="hljs-name">div</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-col</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-col</span> <span class="hljs-attr">:span</span>=<span class="hljs-string">"6"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex-content"</span>></span>span:6<span class="hljs-tag"></<span class="hljs-name">div</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-col</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">nut-row</span>></span>\n<span class="hljs-tag"><<span class="hljs-name">nut-row</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"flex"</span> <span class="hljs-attr">justify</span>=<span class="hljs-string">"space-around"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-col</span> <span class="hljs-attr">:span</span>=<span class="hljs-string">"6"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex-content"</span>></span>span:6<span class="hljs-tag"></<span class="hljs-name">div</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-col</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-col</span> <span class="hljs-attr">:span</span>=<span class="hljs-string">"6"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex-content flex-content-light"</span>></span>span:6<span class="hljs-tag"></<span class="hljs-name">div</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-col</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-col</span> <span class="hljs-attr">:span</span>=<span class="hljs-string">"6"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex-content"</span>></span>span:6<span class="hljs-tag"></<span class="hljs-name">div</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-col</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">nut-row</span>></span>\n</code></pre><h2>Prop</h2><h3>row</h3><table><thead><tr><th>字段</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>type</td><td>布局方式，可选值为flex</td><td>String</td><td>-</td></tr><tr><td>gutter</td><td>列元素之间的间距（单位为px）</td><td>String、Number</td><td>-</td></tr><tr><td>justify</td><td>Flex 主轴对齐方式，可选值为 start end center space-around space-between</td><td>String</td><td>start</td></tr><tr><td>align</td><td>Flex 交叉轴对齐方式，可选值为 flex-start center flex-end</td><td>String</td><td>flex-start</td></tr><tr><td>flex-wrap</td><td>Flex是否换行，可选值为 nowrap wrap reverse</td><td>String</td><td>nowrap</td></tr></tbody></table><h3>col</h3><table><thead><tr><th>字段</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>span</td><td>列元素宽度（共分为24份，例如设置一行3个，那么span值为8）</td><td>String、Number</td><td>24</td></tr><tr><td>offset</td><td>列元素偏移距离</td><td>String、Number</td><td>0</td></tr></tbody></table>',17)],p={setup:(n,{expose:p})=>(p({frontmatter:{}}),(n,p)=>(a(),s("div",l,t)))};export{p as default};
|
