布局 Layout
一个简单的自适应布局组件
基本使用
12
12
8
8
8
6
6
6
6
4
2
4
6
8
Show Code
vue
<template>
<n-row>
<n-col :span="12"><div class="col-box-2 col-box">12</div></n-col>
<n-col :span="12"><div class="col-box-1 col-box">12</div></n-col>
</n-row>
<n-row>
<n-col :span="8"><div class="col-box-1 col-box">8</div></n-col>
<n-col :span="8"><div class="col-box-2 col-box">8</div></n-col>
<n-col :span="8"><div class="col-box-1 col-box">8</div></n-col>
</n-row>
<n-row>
<n-col :span="6"><div class="col-box-2 col-box">6</div></n-col>
<n-col :span="6"><div class="col-box-1 col-box">6</div></n-col>
<n-col :span="6"><div class="col-box-2 col-box">6</div></n-col>
<n-col :span="6"><div class="col-box-1 col-box">6</div></n-col>
</n-row>
<n-row>
<n-col :span="4"><div class="col-box-1 col-box">4</div></n-col>
<n-col :span="2"><div class="col-box-2 col-box">2</div></n-col>
<n-col :span="4"><div class="col-box-1 col-box">4</div></n-col>
<n-col :span="6"><div class="col-box-2 col-box">6</div></n-col>
<n-col :span="8"><div class="col-box-1 col-box">8</div></n-col>
</n-row>
</template>
<script setup lang="ts"></script>
<style lang="less" scoped>
.col-box {
height: 34px;
margin-bottom: 10px;
text-align: center;
line-height: 34px;
}
.col-box-1 {
background-color: #f4d7ff;
color: #333;
}
.col-box-2 {
background-color: #e59fff;
color: #fff;
}
</style>位置偏移
通过 offset 设置偏移占用指定的列数。
10
12
8
8
2
6
6
4
2
4
6
Show Code
vue
<template>
<n-row>
<n-col :span="10"><div class="col-box-2 col-box">10</div></n-col>
<n-col :span="12" :offset="2"><div class="col-box-1 col-box">12</div></n-col>
</n-row>
<n-row>
<n-col :span="8"><div class="col-box-1 col-box">8</div></n-col>
<n-col :span="8" :offset="8"><div class="col-box-1 col-box">8</div></n-col>
</n-row>
<n-row>
<n-col :span="2"><div class="col-box-2 col-box">2</div></n-col>
<n-col :span="6" :offset="4"><div class="col-box-1 col-box">6</div></n-col>
<n-col :span="6" :offset="6"><div class="col-box-2 col-box">6</div></n-col>
</n-row>
<n-row>
<n-col :span="4"><div class="col-box-1 col-box">4</div></n-col>
<n-col :span="2" :offset="4"><div class="col-box-2 col-box">2</div></n-col>
<n-col :span="4" :offset="2"><div class="col-box-1 col-box">4</div></n-col>
<n-col :span="6" :offset="2"><div class="col-box-2 col-box">6</div></n-col>
</n-row>
</template>
<style lang="less" scoped>
.col-box {
height: 34px;
margin-bottom: 10px;
text-align: center;
line-height: 34px;
}
.col-box-1 {
background-color: #f4d7ff;
color: #333;
}
.col-box-2 {
background-color: #e59fff;
color: #fff;
}
</style>API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| span | 每行占用列数 | number | 24 | —— |
| offset | 偏移指定列数 | number | —— | —— |