| 1 |
- import{c as t,o as n,C as l}from"./vendor.26d316d2.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 'vue';\n// vue\nimport { Layout } from '@nutui/nutui';\n// taro\nimport { Layout } from '@nutui/nutui-taro';\n\nconst app = createApp();\napp.use(Layout);\n</code></pre><h2>代码演示</h2><h3>基础用法</h3><pre><code class="language-html"><nut-row>\n <nut-col :span="24">\n <div class="flex-content">span:24</div>\n </nut-col>\n</nut-row>\n<nut-row>\n <nut-col :span="12">\n <div class="flex-content">span:12</div>\n </nut-col>\n <nut-col :span="12">\n <div class="flex-content flex-content-light">span:12</div>\n </nut-col>\n</nut-row>\n<nut-row>\n <nut-col :span="8">\n <div class="flex-content">span:8</div>\n </nut-col>\n <nut-col :span="8">\n <div class="flex-content flex-content-light">span:8</div>\n </nut-col>\n <nut-col :span="8">\n <div class="flex-content">span:8</div>\n </nut-col>\n</nut-row>\n<nut-row>\n <nut-col :span="6">\n <div class="flex-content">span:6</div>\n </nut-col>\n <nut-col :span="6">\n <div class="flex-content flex-content-light">span:6</div>\n </nut-col>\n <nut-col :span="6">\n <div class="flex-content">span:6</div>\n </nut-col>\n <nut-col :span="6">\n <div class="flex-content">span:6</div>\n </nut-col>\n</nut-row>\n</code></pre><h3>设置元素间距</h3><pre><code class="language-html"><nut-row :gutter="10">\n <nut-col :span="8">\n <div class="flex-content">span:8</div>\n </nut-col>\n <nut-col :span="8">\n <div class="flex-content flex-content-light">span:8</div>\n </nut-col>\n <nut-col :span="8">\n <div class="flex-content">span:8</div>\n </nut-col>\n</nut-row> \n</code></pre><h3>Flex布局</h3><pre><code class="language-html"><nut-row type="flex" wrap="nowrap">\n <nut-col :span="6">\n <div class="flex-content">span:6</div>\n </nut-col>\n <nut-col :span="6">\n <div class="flex-content flex-content-light">span:6</div>\n </nut-col>\n <nut-col :span="6">\n <div class="flex-content">span:6</div>\n </nut-col>\n</nut-row>\n<nut-row type="flex" justify="center">\n <nut-col :span="6">\n <div class="flex-content">span:6</div>\n </nut-col>\n <nut-col :span="6">\n <div class="flex-content flex-content-light">span:6</div>\n </nut-col>\n <nut-col :span="6">\n <div class="flex-content">span:6</div>\n </nut-col>\n</nut-row>\n<nut-row type="flex" justify="end">\n <nut-col :span="6">\n <div class="flex-content">span:6</div>\n </nut-col>\n <nut-col :span="6">\n <div class="flex-content flex-content-light">span:6</div>\n </nut-col>\n <nut-col :span="6">\n <div class="flex-content">span:6</div>\n </nut-col>\n</nut-row>\n<nut-row type="flex" justify="space-between">\n <nut-col :span="6">\n <div class="flex-content">span:6</div>\n </nut-col>\n <nut-col :span="6">\n <div class="flex-content flex-content-light">span:6</div>\n </nut-col>\n <nut-col :span="6">\n <div class="flex-content">span:6</div>\n </nut-col>\n</nut-row>\n<nut-row type="flex" justify="space-around">\n <nut-col :span="6">\n <div class="flex-content">span:6</div>\n </nut-col>\n <nut-col :span="6">\n <div class="flex-content flex-content-light">span:6</div>\n </nut-col>\n <nut-col :span="6">\n <div class="flex-content">span:6</div>\n </nut-col>\n</nut-row>\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),e={setup:l=>(l,e)=>(n(),t("div",o,[u]))};export{e as default};
|
