System.register(["./vendor-legacy.f9cfd4bf.js"],(function(t){"use strict";var n,l,o;return{setters:[function(t){n=t.c,l=t.o,o=t.C}],execute:function(){const u={class:"markdown-body"},e=o('Layout 布局
介绍
用于快速进行布局
安装
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
代码演示
基础用法
<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
设置元素间距
<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
Flex布局
<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
Prop
row
| 字段 | 说明 | 类型 | 默认值 |
|---|
| type | 布局方式，可选值为flex | String | - |
| gutter | 列元素之间的间距（单位为px） | String、Number | - |
| justify | Flex 主轴对齐方式，可选值为 start end center space-around space-between | String | start |
| align | Flex 交叉轴对齐方式，可选值为 flex-start center flex-end | String | flex-start |
| flex-wrap | Flex是否换行，可选值为 nowrap wrap reverse | String | nowrap |
col
| 字段 | 说明 | 类型 | 默认值 |
|---|
| span | 列元素宽度（共分为24份，例如设置一行3个，那么span值为8） | String、Number | 24 |
| offset | 列元素偏移距离 | String、Number | 0 |
',17);t("default",{expose:[],setup:t=>(t,o)=>(l(),n("div",u,[e]))})}}}));