Home Explore Help
Sign In
githab
/
nutui
3
0
Fork 0
Files
Tree: 636094fae8
Branches Tags
nutui
/
assets
/
doc.ef9c78b5.js

doc.ef9c78b5.js 13 KB
History Raw

1 
  1. import{c as t,o as n,A as l}from"./vendor.80bf15c7.js";const o={class:"markdown-body"},u=l('<h1>Layout 布局</h1><h3>介绍</h3><p>用于快速进行布局</p><h3>安装</h3><pre><code class="language-javascript">import { createApp } from &#39;vue&#39;;\nimport { Row, Col } from &#39;@nutui/nutui&#39;;\n\nconst app = createApp();\napp.use(Row);\napp.use(Col);\n</code></pre><h2>代码演示</h2><h3>基本用法</h3><pre><code class="language-html">&lt;nut-row&gt;\n    &lt;nut-col :span=&quot;12&quot;&gt;\n        &lt;div class=&quot;flex-content&quot;&gt;span:12&lt;/div&gt;\n    &lt;/nut-col&gt;\n    &lt;nut-col :span=&quot;12&quot;&gt;\n        &lt;div class=&quot;flex-content flex-content-light&quot;&gt;span:12&lt;/div&gt;\n    &lt;/nut-col&gt;\n&lt;/nut-row&gt;\n&lt;nut-row&gt;\n    &lt;nut-col :span=&quot;8&quot;&gt;\n        &lt;div class=&quot;flex-content&quot;&gt;span:8&lt;/div&gt;\n    &lt;/nut-col&gt;\n    &lt;nut-col :span=&quot;8&quot;&gt;\n        &lt;div class=&quot;flex-content flex-content-light&quot;&gt;span:8&lt;/div&gt;\n    &lt;/nut-col&gt;\n    &lt;nut-col :span=&quot;8&quot;&gt;\n        &lt;div class=&quot;flex-content&quot;&gt;span:8&lt;/div&gt;\n    &lt;/nut-col&gt;\n&lt;/nut-row&gt;\n&lt;nut-row&gt;\n    &lt;nut-col :span=&quot;6&quot;&gt;\n        &lt;div class=&quot;flex-content&quot;&gt;span:6&lt;/div&gt;\n    &lt;/nut-col&gt;\n    &lt;nut-col :span=&quot;6&quot;&gt;\n        &lt;div class=&quot;flex-content flex-content-light&quot;&gt;span:6&lt;/div&gt;\n    &lt;/nut-col&gt;\n    &lt;nut-col :span=&quot;6&quot;&gt;\n        &lt;div class=&quot;flex-content&quot;&gt;span:6&lt;/div&gt;\n        &lt;/nut-col&gt;\n    &lt;nut-col :span=&quot;6&quot;&gt;\n        &lt;div class=&quot;flex-content flex-content-light&quot;&gt;span:6&lt;/div&gt;\n    &lt;/nut-col&gt;\n&lt;/nut-row&gt;\n&lt;nut-row&gt;\n    &lt;nut-col :span=&quot;4&quot;&gt;\n        &lt;div class=&quot;flex-content&quot;&gt;span:4&lt;/div&gt;\n    &lt;/nut-col&gt;\n    &lt;nut-col :span=&quot;4&quot;&gt;\n        &lt;div class=&quot;flex-content flex-content-light&quot;&gt;span:4&lt;/div&gt;\n    &lt;/nut-col&gt;\n    &lt;nut-col :span=&quot;4&quot;&gt;\n        &lt;div class=&quot;flex-content&quot;&gt;span:4&lt;/div&gt;\n    &lt;/nut-col&gt;\n    &lt;nut-col :span=&quot;4&quot;&gt;\n        &lt;div class=&quot;flex-content flex-content-light&quot;&gt;span:4&lt;/div&gt;\n    &lt;/nut-col&gt;\n    &lt;nut-col :span=&quot;4&quot;&gt;\n        &lt;div class=&quot;flex-content&quot;&gt;span:4&lt;/div&gt;\n    &lt;/nut-col&gt;\n    &lt;nut-col :span=&quot;4&quot;&gt;\n        &lt;div class=&quot;flex-content flex-content-light&quot;&gt;span:4&lt;/div&gt;\n    &lt;/nut-col&gt;\n&lt;/nut-row&gt;\n\n</code></pre><h3>设置元素间距</h3><pre><code class="language-html">&lt;nut-row :gutter=&quot;10&quot;&gt;\n    &lt;nut-col :span=&quot;6&quot;&gt;\n        &lt;div class=&quot;flex-content&quot;&gt;span:6&lt;/div&gt;\n    &lt;/nut-col&gt;\n    &lt;nut-col :span=&quot;6&quot;&gt;\n        &lt;div class=&quot;flex-content flex-content-light&quot;&gt;span:6&lt;/div&gt;\n    &lt;/nut-col&gt;\n    &lt;nut-col :span=&quot;6&quot;&gt;\n        &lt;div class=&quot;flex-content&quot;&gt;span:6&lt;/div&gt;\n    &lt;/nut-col&gt;\n    &lt;nut-col :span=&quot;6&quot;&gt;\n        &lt;div class=&quot;flex-content flex-content-light&quot;&gt;span:6&lt;/div&gt;\n    &lt;/nut-col&gt;\n&lt;/nut-row&gt;\n            \n</code></pre><h3>Flex布局</h3><h4>wrap（是否换行）</h4><pre><code class="language-html">&lt;nut-row type=&quot;flex&quot; flexWrap=&quot;nowrap&quot; :gutter=&quot;10&quot;&gt;\n    &lt;nut-col :span=&quot;6&quot;&gt;\n        &lt;div class=&quot;flex-content&quot;&gt;1&lt;/div&gt;\n    &lt;/nut-col&gt;\n    &lt;nut-col :span=&quot;6&quot;&gt;\n        &lt;div class=&quot;flex-content flex-content-light&quot;&gt;2&lt;/div&gt;\n    &lt;/nut-col&gt;\n    &lt;nut-col :span=&quot;6&quot;&gt;\n        &lt;div class=&quot;flex-content&quot;&gt;3&lt;/div&gt;\n    &lt;/nut-col&gt;\n    &lt;nut-col :span=&quot;6&quot;&gt;\n        &lt;div class=&quot;flex-content flex-content-light&quot;&gt;4&lt;/div&gt;\n    &lt;/nut-col&gt;\n    &lt;nut-col :span=&quot;6&quot;&gt;\n        &lt;div class=&quot;flex-content&quot;&gt;5&lt;/div&gt;\n    &lt;/nut-col&gt;\n    &lt;nut-col :span=&quot;6&quot;&gt;\n        &lt;div class=&quot;flex-content flex-content-light&quot;&gt;6&lt;/div&gt;\n    &lt;/nut-col&gt;\n    &lt;nut-col :span=&quot;6&quot;&gt;\n        &lt;div class=&quot;flex-content&quot;&gt;7&lt;/div&gt;\n    &lt;/nut-col&gt;\n&lt;/nut-row&gt;\n&lt;nut-row type=&quot;flex&quot; flexWrap=&quot;wrap&quot; :gutter=&quot;10&quot;&gt;\n    &lt;nut-col :span=&quot;6&quot;&gt;\n        &lt;div class=&quot;flex-content&quot;&gt;1&lt;/div&gt;\n    &lt;/nut-col&gt;\n    &lt;nut-col :span=&quot;6&quot;&gt;\n        &lt;div class=&quot;flex-content flex-content-light&quot;&gt;2&lt;/div&gt;\n    &lt;/nut-col&gt;\n    &lt;nut-col :span=&quot;6&quot;&gt;\n        &lt;div class=&quot;flex-content&quot;&gt;3&lt;/div&gt;\n    &lt;/nut-col&gt;\n    &lt;nut-col :span=&quot;6&quot;&gt;\n        &lt;div class=&quot;flex-content flex-content-light&quot;&gt;4&lt;/div&gt;\n    &lt;/nut-col&gt;\n    &lt;nut-col :span=&quot;6&quot;&gt;\n        &lt;div class=&quot;flex-content&quot;&gt;5&lt;/div&gt;\n    &lt;/nut-col&gt;\n    &lt;nut-col :span=&quot;6&quot;&gt;\n        &lt;div class=&quot;flex-content flex-content-light&quot;&gt;6&lt;/div&gt;\n    &lt;/nut-col&gt;\n    &lt;nut-col :span=&quot;6&quot;&gt;\n        &lt;div class=&quot;flex-content&quot;&gt;7&lt;/div&gt;\n    &lt;/nut-col&gt;\n&lt;/nut-row&gt;\n&lt;nut-row type=&quot;flex&quot; flexWrap=&quot;reverse&quot; :gutter=&quot;10&quot;&gt;\n    &lt;nut-col :span=&quot;6&quot;&gt;\n        &lt;div class=&quot;flex-content&quot;&gt;1&lt;/div&gt;\n    &lt;/nut-col&gt;\n    &lt;nut-col :span=&quot;6&quot;&gt;\n        &lt;div class=&quot;flex-content flex-content-light&quot;&gt;2&lt;/div&gt;\n    &lt;/nut-col&gt;\n    &lt;nut-col :span=&quot;6&quot;&gt;\n        &lt;div class=&quot;flex-content&quot;&gt;3&lt;/div&gt;\n    &lt;/nut-col&gt;\n    &lt;nut-col :span=&quot;6&quot;&gt;\n        &lt;div class=&quot;flex-content flex-content-light&quot;&gt;4&lt;/div&gt;\n    &lt;/nut-col&gt;\n    &lt;nut-col :span=&quot;6&quot;&gt;\n        &lt;div class=&quot;flex-content&quot;&gt;5&lt;/div&gt;\n    &lt;/nut-col&gt;\n    &lt;nut-col :span=&quot;6&quot;&gt;\n        &lt;div class=&quot;flex-content flex-content-light&quot;&gt;6&lt;/div&gt;\n    &lt;/nut-col&gt;\n    &lt;nut-col :span=&quot;6&quot;&gt;\n        &lt;div class=&quot;flex-content&quot;&gt;7&lt;/div&gt;\n    &lt;/nut-col&gt;\n&lt;/nut-row&gt;\n\n</code></pre><h4>justify（主轴方向）</h4><pre><code class="language-html">&lt;nut-row type=&quot;flex&quot;&gt;\n    &lt;nut-col :span=&quot;6&quot;&gt;\n        &lt;div class=&quot;flex-content&quot;&gt;start&lt;/div&gt;\n    &lt;/nut-col&gt;\n    &lt;nut-col :span=&quot;6&quot;&gt;\n        &lt;div class=&quot;flex-content flex-content-light&quot;&gt;start&lt;/div&gt;\n    &lt;/nut-col&gt;\n    &lt;nut-col :span=&quot;6&quot;&gt;\n        &lt;div class=&quot;flex-content&quot;&gt;start&lt;/div&gt;\n    &lt;/nut-col&gt;\n&lt;/nut-row&gt;\n&lt;nut-row type=&quot;flex&quot; justify=&quot;center&quot;&gt;\n    &lt;nut-col :span=&quot;6&quot;&gt;\n        &lt;div class=&quot;flex-content&quot;&gt;center&lt;/div&gt;\n    &lt;/nut-col&gt;\n    &lt;nut-col :span=&quot;6&quot;&gt;\n        &lt;div class=&quot;flex-content flex-content-light&quot;&gt;center&lt;/div&gt;\n    &lt;/nut-col&gt;\n    &lt;nut-col :span=&quot;6&quot;&gt;\n        &lt;div class=&quot;flex-content&quot;&gt;center&lt;/div&gt;\n    &lt;/nut-col&gt;\n&lt;/nut-row&gt;\n&lt;nut-row type=&quot;flex&quot; justify=&quot;end&quot;&gt;\n    &lt;nut-col :span=&quot;6&quot;&gt;\n        &lt;div class=&quot;flex-content&quot;&gt;end&lt;/div&gt;\n    &lt;/nut-col&gt;\n    &lt;nut-col :span=&quot;6&quot;&gt;\n        &lt;div class=&quot;flex-content flex-content-light&quot;&gt;end&lt;/div&gt;\n    &lt;/nut-col&gt;\n    &lt;nut-col :span=&quot;6&quot;&gt;\n        &lt;div class=&quot;flex-content&quot;&gt;end&lt;/div&gt;\n    &lt;/nut-col&gt;\n&lt;/nut-row&gt;\n&lt;nut-row type=&quot;flex&quot; justify=&quot;space-between&quot;&gt;\n    &lt;nut-col :span=&quot;6&quot;&gt;\n        &lt;div class=&quot;flex-content&quot;&gt;between&lt;/div&gt;\n    &lt;/nut-col&gt;\n    &lt;nut-col :span=&quot;6&quot;&gt;\n        &lt;div class=&quot;flex-content flex-content-light&quot;&gt;between&lt;/div&gt;\n    &lt;/nut-col&gt;\n    &lt;nut-col :span=&quot;6&quot;&gt;\n        &lt;div class=&quot;flex-content&quot;&gt;between&lt;/div&gt;\n    &lt;/nut-col&gt;\n&lt;/nut-row&gt;\n&lt;nut-row type=&quot;flex&quot; justify=&quot;space-around&quot;&gt;\n    &lt;nut-col :span=&quot;6&quot;&gt;\n        &lt;div class=&quot;flex-content&quot;&gt;around&lt;/div&gt;\n    &lt;/nut-col&gt;\n    &lt;nut-col :span=&quot;6&quot;&gt;\n        &lt;div class=&quot;flex-content flex-content-light&quot;&gt;around&lt;/div&gt;\n    &lt;/nut-col&gt;\n    &lt;nut-col :span=&quot;6&quot;&gt;\n        &lt;div class=&quot;flex-content&quot;&gt;around&lt;/div&gt;\n    &lt;/nut-col&gt;\n&lt;/nut-row&gt;\n\n</code></pre><h4>align（侧轴方向）</h4><pre><code class="language-html">&lt;nut-row type=&quot;flex&quot; gutter=&quot;10&quot; align=&quot;flex-start&quot;&gt;\n    &lt;nut-col :span=&quot;6&quot;&gt;\n        &lt;div class=&quot;flex-content flex-content-height&quot;&gt;1&lt;/div&gt;\n    &lt;/nut-col&gt;\n    &lt;nut-col :span=&quot;12&quot;&gt;\n        &lt;div class=&quot;flex-content flex-content-light&quot;&gt;顶部对齐 - flex-start&lt;/div&gt;\n    &lt;/nut-col&gt;\n    &lt;nut-col :span=&quot;6&quot;&gt;\n        &lt;div class=&quot;flex-content flex-content-height&quot;&gt;3&lt;/div&gt;\n    &lt;/nut-col&gt;\n&lt;/nut-row&gt;\n&lt;nut-row type=&quot;flex&quot; gutter=&quot;10&quot; align=&quot;center&quot;&gt;\n    &lt;nut-col :span=&quot;6&quot;&gt;\n        &lt;div class=&quot;flex-content flex-content-height&quot;&gt;1&lt;/div&gt;\n    &lt;/nut-col&gt;\n    &lt;nut-col :span=&quot;12&quot;&gt;\n        &lt;div class=&quot;flex-content flex-content-light&quot;&gt;居中对齐 - center&lt;/div&gt;\n    &lt;/nut-col&gt;\n    &lt;nut-col :span=&quot;6&quot;&gt;\n        &lt;div class=&quot;flex-content flex-content-height&quot;&gt;3&lt;/div&gt;\n    &lt;/nut-col&gt;\n&lt;/nut-row&gt;\n&lt;nut-row type=&quot;flex&quot; gutter=&quot;10&quot; align=&quot;flex-end&quot;&gt;\n    &lt;nut-col :span=&quot;6&quot;&gt;\n        &lt;div class=&quot;flex-content flex-content-height&quot;&gt;1&lt;/div&gt;\n    &lt;/nut-col&gt;\n    &lt;nut-col :span=&quot;12&quot;&gt;\n        &lt;div class=&quot;flex-content flex-content-light&quot;&gt;底部对齐 - flex-end&lt;/div&gt;\n    &lt;/nut-col&gt;\n    &lt;nut-col :span=&quot;6&quot;&gt;\n        &lt;div class=&quot;flex-content flex-content-height&quot;&gt;3&lt;/div&gt;\n    &lt;/nut-col&gt;\n&lt;/nut-row&gt;\n\n</code></pre><h3>分栏偏移</h3><pre><code class="language-html">&lt;nut-row type=&quot;flex&quot;&gt;\n    &lt;nut-col :offset=&quot;6&quot; span=&quot;6&quot;&gt;\n        &lt;div class=&quot;flex-content&quot;&gt;offset:6&lt;/div&gt;\n    &lt;/nut-col&gt;\n    &lt;nut-col :span=&quot;6&quot;&gt;\n        &lt;div class=&quot;flex-content flex-content-light&quot;&gt;span:6&lt;/div&gt;\n    &lt;/nut-col&gt;\n    &lt;nut-col :span=&quot;6&quot;&gt;\n        &lt;div class=&quot;flex-content&quot;&gt;span:6&lt;/div&gt;\n    &lt;/nut-col&gt;\n&lt;/nut-row&gt;\n&lt;nut-row type=&quot;flex&quot;&gt;\n    &lt;nut-col span=&quot;6&quot;&gt;\n        &lt;div class=&quot;flex-content&quot;&gt;span:6&lt;/div&gt;\n    &lt;/nut-col&gt;\n    &lt;nut-col :offset=&quot;8&quot; :span=&quot;6&quot;&gt;\n        &lt;div class=&quot;flex-content flex-content-light&quot;&gt;offset:8&lt;/div&gt;\n    &lt;/nut-col&gt;\n    &lt;nut-col :span=&quot;6&quot;&gt;\n        &lt;div class=&quot;flex-content&quot;&gt;span:6&lt;/div&gt;\n    &lt;/nut-col&gt;\n&lt;/nut-row&gt;\n&lt;nut-row type=&quot;flex&quot;&gt;\n    &lt;nut-col span=&quot;6&quot; :offset=&quot;6&quot;&gt;\n        &lt;div class=&quot;flex-content&quot;&gt;offset:6&lt;/div&gt;\n    &lt;/nut-col&gt;\n    &lt;nut-col :span=&quot;6&quot; :offset=&quot;6&quot;&gt;\n        &lt;div class=&quot;flex-content&quot;&gt;offset:6&lt;/div&gt;\n    &lt;/nut-col&gt;\n&lt;/nut-row&gt;\n\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>',24),g={expose:[],setup:l=>(l,g)=>(n(),t("div",o,[u]))};export default g;
    2.