组件

Grid 栅格

最基础的列表展示,可承载文字、列表、图片、段落。常用语后台数据展示页面。 API文档 组件问题反馈和讨论

使用方法

栅格使用时候必须建立在行(row)与列(col)基础上,这样就能正常使用栅格系统
  • 栅格通过row建立一组布局
  • 内容放置在col内,并且其父层就是row
  • 栅格数值按照1—24,一行数量总和为24,超出则另起一行

设计思路 #

经过实践,Nv重新设计栅格,在原来的12个栅格拓展到24个栅格,更能适应更多应用场景。
建议横向排列的栅格单位最多4个,最少一个。栅格布局如上图所示。
<code>
nv-col-24(100%)
nv-col-12 (50%)
nv-col-12 (50%)
nv-col-16 (66.66%)
nv-col-8 (33.33%)
nv-col-6 (25%)
nv-col-6 (25%)
nv-col-6 (25%)
nv-col-6 (25%)
nv-col-8 (33.33%)
nv-col-8 (33.33%)
nv-col-8 (33.33%)
显示代码

基础栅格 #

使用单一的一组row与col栅格,列(col)必须在行中(row)
nv-col-12
nv-col-12
nv-col-6
nv-col-6
nv-col-6
nv-col-6
nv-col-8
nv-col-8
nv-col-8
显示代码

间隔布局#

间隔布局需要在在nv-row的样式上添加nv-row-space
nv-col-6
nv-col-6
nv-col-6
nv-col-6
显示代码

栅格偏移 #

栅格中需要间隔布局,在 nv-col 中增加 nv-col-offset-x 即可
nv-col-offset-3
nv-col-offset-6
显示代码

Flex布局 #

其实用flex布局就是直接替换掉样式 nv-rownv-row-flex 即可。如果有其他布局需求就可以使用以下附带属性

居左

nv-col-4
nv-col-4
nv-col-4
nv-col-4

居中

nv-col-4
nv-col-4
nv-col-4
nv-col-4

居右

nv-col-4
nv-col-4
nv-col-4
nv-col-4

两边对齐

nv-col-4
nv-col-4
nv-col-4
nv-col-4

左右均等对齐

nv-col-4
nv-col-4
nv-col-4
nv-col-4
显示代码

Flex对齐 #

垂直布局同横向布局,在flex基础上增加额外样式即可, nv-row-flex-topnv-row-flex-middlenv-row-flex-end

垂直顶部

nv-col-4
nv-col-4
nv-col-4
nv-col-4

垂直居中

nv-col-4
nv-col-4
nv-col-4
nv-col-4

垂直底部

nv-col-4
nv-col-4
nv-col-4
nv-col-4
显示代码

Flex单元格垂直位置 #

垂直布局可以单独控制一个单元格的位置,非常好用,分别为: nv-col-flex-topnv-col-flex-middlenv-col-flex-bottom ,与行内撑满高度样式: nv-col-flex-stretch

居上 (nv-col-flex-top)

nv-col-4
nv-col-4
nv-col-4
nv-col-4

居中 (nv-col-flex-middle)

nv-col-4
nv-col-4
nv-col-4
nv-col-4

底部 (nv-col-flex-bottom)

nv-col-4
nv-col-4
nv-col-4
nv-col-4

垂直占满 (nv-col-flex-stretch)

nv-col-4
nv-col-4
nv-col-4
nv-col-4
显示代码

Flex排序: #

flex排序是根据1—24序号顺序进行排序, nv-col-flex-order-1nv-col-flex-order-24

排序前

元素第1个
元素第2个
元素第3个
元素第4个

排序后

元素第1个
元素第2个
元素第3个
元素第4个

排序前

元素第1个
元素第2个
元素第3个
元素第4个

排序后

元素第1个
元素第2个
元素第3个
元素第4个
显示代码

响应式布局: #

参照了BootStrap的响应式设计,Nv预设了五个相应尺寸:

手机尺寸: nv-col-xs-?

平板尺寸: nv-col-sm-?

桌面显示器尺寸: nv-col-md-?

大桌面显示器尺寸: nv-col-lg-?

大屏慕显示器尺寸: nv-col-xl-?
1
2
3
显示代码