Grid

nly-rownly-col 是一个移动端优先的 flex-box 布局,是 adminlte3 的响应式布局

<nly-row>
  <nly-col xs="6" md="6" lg="3" col-class="bg-info">1</nly-col>
  <nly-col xs="6" md="2" lg="3" col-class="col bg-warning">2</nly-col>
  <nly-col xs="6" md="1" lg="3" col-class="col bg-danger">3</nly-col>
  <nly-col xs="6" md="3" lg="3" col-class="col bg-primary">4</nly-col>
</nly-row>

<!-- grid.name -->
<!-- nly-grid.vue -->

栅格布局原理

  • 在栅格布局中,每列最多可设置 1 到 12 个宽度单位,且每行在视觉上,最多只能允许所有列加起来有 12 个单位的宽度,超出的会自动换行排列
  • 栅格布局中共有 5 个断点,分别是 xs, sm, md, lg, xl
  • 断点是基于媒体查询的 min-width 写法,即每个断点是代表当前断点及以上。 比如 md 代表最小宽度在 md 以及以上宽度,如果不另外设置,这条规则将在 md, lg, xl 都会生效
  • nly-col 在理论上必须嵌套在 nly-row 中,且 nly-row 不能直接嵌套在 nly-row 中,但 nly-row 可以嵌套在 nly-col
  • 每个 nly-col 都有一个水平的 padding 属性,用来控制列的距离,防止内容超出列范围,且可以在视觉上使得每列都是对齐的
  • 在没有设置宽度的情况下,每列会以等宽布局,即每列的宽度都是相等的。由于水平的 padding 属性,会导致每列之间会有间隔,可以使用 nly-row 的 prop no-gutters 来消除列之间的间隔
  • 可以通过设置 <nly-col xs="auto"> 来设置每列为最小宽度,即自适应内容宽度。此列代表在 xs 及以上断点,此列都是最小宽度
  • nly-rowcols-xs, cols-sm, cols-md, cols-lg, cols-xl prop 可让其在不同断点上具有不同的宽度, 通常可选 1, 2, 3, 4, 5, 6
  • nly-colxs, sm, md, lg, xl prop 代表在不同断点上的宽度,最小 1 个单位的宽度,最多 12 个单位的宽度。当一个 nly-col 的宽度为 12 时,在视觉上宽度会填充满整个 nly-row
  • nly-col 是用百分比来设置的宽度,所以能够适用父元素的宽度

请注意 flexbox 的局限性和 有些 html 元素是无法使用 flexbox

总览

NlyAdminlteVueGrid 栅格布局跟 bootstrap 的栅格布局所支持的断点都是一样的。

<nly-row>

nly-row 是栅格布局的行, 是 nly-col 的容器。 nly-col 在理论上必须嵌套在 nly-row 中,且 nly-row 不能直接嵌套在 nly-row 中,但 nly-row 可以嵌套在 nly-col 中。 由于水平的 padding 属性,会导致每列之间会有间隔,可以使用 nly-row 的 prop no-gutters 来消除列之间的间隔

nly-col

nly-col 是栅格布局的列, 理论上 nly-col 必须嵌套在 nly-row

断点

NlyAdminlteVue 中的断点是是基于媒体查询的 min-width 写法,即每个断点是代表当前断点及以上。 比如 md 代表最小宽度在 md 以及以上宽度,如果不另外设置,这条规则将在 md, lg, xl 都会生效。 共有 5 个断点,分别是 xs, sm, md, lg, xl

Extra small (xs)
<576px
Small (sm)
≥576px
Medium (md)
≥768px
Large (lg)
≥992px
Extra large (xl)
≥1200px
Max container width None (auto) 540px 720px 960px 1140px
Prop xs="*" sm="*" md="*" lg="*" xl="*"
# of columns 12
Gutter width 30px (15px on each side of a column)
Nestable Yes
Offset offset="*" offset-sm="*" offset-md="*" offset-lg="*" offset-xl="*"
Order order="*" order-sm="*" order-md="*" order-lg="*" order-xl="*"

<nly-col> 自动布局

可以利用媒体查询的断点来自动设置列的宽度,不需要使用 nly-col 的其他任何 prop

等宽布局

可以给 nly-col 设置 prop col=true 来使得每列宽度都一样

<nly-container class="nly-example-row">
    <nly-row>
        <nly-col col col-class="bg-info">1 of 2</nly-col>
        <nly-col col-class="bg-warning">2 of 2</nly-col>
    </nly-row>

    <nly-row>
        <nly-col col-class="bg-primary">1 of 3</nly-col>
        <nly-col col-class="bg-dark">2 of 3</nly-col>
        <nly-col col-class="bg-danger">3 of 3</nly-col>
    </nly-row>
</nly-container>

<!-- 等宽.name -->
<!-- nly-grid.vue -->

多行等宽

可以通过插入一个 class="w-100 的元素来使得列换行

<nly-container class="nly-example-row">
  <nly-row>
    <nly-col col-class="bg-primary">Column</nly-col>
    <nly-col col-class="bg-info">Column</nly-col>
    <div class="w-100"></div>
    <nly-col col-class="bg-danger">Column</nly-col>
    <nly-col col-class="bg-warning">Column</nly-col>
  </nly-row>
</nly-container>

<!-- 多行等宽.name -->
<!-- nly-grid-equal-width-multiple-lines.vue -->

单列宽度

Grid 是自动布局,您可以在设置其中一列的宽度,其他列会自动调整其宽度,以达到所有列填满 12 个宽度单位。

<nly-container class="nly-example-row">
  <nly-row class="text-center">
    <nly-col col-class="bg-info">1 of 3</nly-col>
    <nly-col xs="8" col-class="bg-warning">2 of 3 (wider)</nly-col>
    <nly-col col-class="bg-primary">3 of 3</nly-col>
  </nly-row>

  <nly-row class="text-center">
    <nly-col col-class="bg-info">1 of 3</nly-col>
    <nly-col xs="5" col-class="bg-warning">2 of 3 (wider)</nly-col>
    <nly-col col-class="bg-primary">3 of 3</nly-col>
  </nly-row>
</nly-container>

<!-- 单列宽度.name -->
<!-- nly-one-columns.vue -->

内容宽度

在栅格布局中, 可以设置 xs, sm, md, lg, xlauto 来使宽度跟随每列的内容,从而达到适应内容的宽度。

<nly-container class="nly-example-row">
  <nly-row row-class="justify-content-md-center">
    <nly-col col lg="2" col-class="bg-info">1 of 3</nly-col>
    <nly-col xs="12" md="auto" col-class="bg-danger">内容宽度</nly-col>
    <nly-col col lg="2" col-class="bg-primary">3 of 3</nly-col>
  </nly-row>

  <nly-row>
    <nly-col col-class="bg-info">1 of 3</nly-col>
    <nly-col xs="12" md="auto" col-class="bg-danger">内容宽度</nly-col>
    <nly-col col lg="2" col-class="bg-primary">3 of 3</nly-col>
  </nly-row>
</nly-container>

<!-- 内容宽度.name -->
<!-- nly-grid-variable-width.vue -->

响应式

NlyAdminlteVue 响应式布局分为 5 个类别, 分别是 xs, sm, md, lg, xl 。可以通过相互搭配来调整在小屏,中屏,大屏,超大屏的显示,达到适应屏幕的效果

在所有断点下宽度不变

如果需要不同大小的设备,宽度都不变(这里指百分比),可以设置 col 或者 xs=* 。 col 在不同断点下,所有列宽度百分比都是一样的,即等宽。 还可以用 xs=* 来指定一列宽度。

<nly-container class="nly-example-row">
  <nly-row>
    <nly-col col-class="bg-info">col</nly-col>
    <nly-col col-class="bg-warning">col</nly-col>
    <nly-col col-class="bg-danger">col</nly-col>
    <nly-col col-class="bg-dark">col</nly-col>
  </nly-row>

  <nly-row>
    <nly-col xs="8" col-class="bg-info">col-8</nly-col>
    <nly-col xs="4" col-class="bg-warning">col-4</nly-col>
  </nly-row>
</nly-container>

<!-- 所有断点宽度不变.name -->
<!-- nly-grid-all-breakpoint.vue -->

堆叠水平排列

使用 sm="*" or sm (此时每列都是等宽的) 可以创建一个在 sm 断点即以上屏幕的栅格布局,当屏幕在 sm 断点以下,所有列都会堆叠到水平排列,即视觉上,每一行只有一列。

<nly-container class="nly-example-row">
  <nly-row>
    <nly-col sm="8">col-sm-8</nly-col>
    <nly-col sm="4">col-sm-4</nly-col>
  </nly-row>

  <nly-row>
    <nly-col sm>col-sm</nly-col>
    <nly-col sm>col-sm</nly-col>
    <nly-col sm>col-sm</nly-col>
  </nly-row>
</nly-container>

<!-- nly-grid-horizontal-stacked.vue -->

混合使用

不同的断点可以混合使用, 不同的断点在对应的屏幕大小范围会生效。但是需要注意大屏覆盖小屏的地方。

<nly-container class="nly-example-row">
  <nly-row>
    <nly-col xs="12" md="8" col-class="bg-info">xs="12" md="8"</nly-col>
    <nly-col xs="6" md="4" col-class="bg-warning">xs="6" md="4"</nly-col>
  </nly-row>

  <nly-row>
    <nly-col xs="6" md="4" col-class="bg-info">xs="6" md="4"</nly-col>
    <nly-col xs="6" md="4" col-class="bg-warning">xs="6" md="4"</nly-col>
    <nly-col xs="6" md="4" col-class="bg-primary">xs="6" md="4"</nly-col>
  </nly-row>

  <nly-row>
    <nly-col xs="6" col-class="bg-info">xs="6"</nly-col>
    <nly-col xs="6" col-class="bg-danger">xs="6"</nly-col>
  </nly-row>
</nly-container>

<!-- 混合使用.name -->
<!-- nly-grid-mix-and-match.vue -->

对齐方式

使用 flex-box 的对齐 class 可以使得 nly-rownly-col 实现盒子布局

整行行垂直对齐

可以设置 nly-row 的 prop align-v 来使得整行调整垂直对齐方式,可选 start , baseline , end , stretch , center

<nly-container class="nly-example-row nly-example-row-flex-cols">
  <nly-row align-v="start">
    <nly-col>One of three columns</nly-col>
    <nly-col>One of three columns</nly-col>
    <nly-col>One of three columns</nly-col>
  </nly-row>
  <nly-row align-v="center">
    <nly-col>One of three columns</nly-col>
    <nly-col>One of three columns</nly-col>
    <nly-col>One of three columns</nly-col>
  </nly-row>

  <nly-row align-v="end">
    <nly-col>One of three columns</nly-col>
    <nly-col>One of three columns</nly-col>
    <nly-col>One of three columns</nly-col>
  </nly-row>

  <nly-row align-v="baseline">
    <nly-col style="font-size: 0.75rem;">One of three columns</nly-col>
    <nly-col>One of three columns</nly-col>
    <nly-col style="font-size: 1.25rem;">One of three columns</nly-col>
  </nly-row>

  <nly-row align-v="stretch">
    <nly-col>One of three columns</nly-col>
    <nly-col>One of three columns</nly-col>
    <nly-col>One of three columns</nly-col>
  </nly-row>
</nly-container>

<!-- 行垂直对齐.name -->
<!-- nly-grid-align-v.vue -->

可以设置 nly-col 的 prop align-self 来设置每列在 nly-row 组件中的垂直位置。可选 start , center , end , baseline , stretch

<nly-container class="nly-example-row nly-example-row-flex-cols">
  <nly-row>
    <nly-col align-self="start">One of three columns</nly-col>
    <nly-col align-self="center">One of three columns</nly-col>
    <nly-col align-self="end">One of three columns</nly-col>
  </nly-row>
  <nly-row>
    <nly-col align-self="baseline">One of two columns</nly-col>
    <nly-col align-self="stretch">One of two columns</nly-col>
  </nly-row>
</nly-container>

<!-- 行垂直对齐.name -->
<!-- nly-grid-align-self.vue -->

整行水平对齐

可以设置 nly-row 的 prop align-h 来设置正好水平对齐,可选 start , center , end , around , between

<nly-container class="nly-example-row">
  <nly-row align-h="start">
    <nly-col xs="4">One of two columns</nly-col>
    <nly-col xs="4">One of two columns</nly-col>
  </nly-row>

  <nly-row align-h="center">
    <nly-col xs="4">One of two columns</nly-col>
    <nly-col xs="4">One of two columns</nly-col>
  </nly-row>

  <nly-row align-h="end">
    <nly-col xs="4">One of two columns</nly-col>
    <nly-col xs="4">One of two columns</nly-col>
  </nly-row>

  <nly-row align-h="around">
    <nly-col xs="4">One of two columns</nly-col>
    <nly-col xs="4">One of two columns</nly-col>
  </nly-row>

  <nly-row align-h="between">
    <nly-col cols="4">One of two columns</nly-col>
    <nly-col cols="4">One of two columns</nly-col>
  </nly-row>
</nly-container>

<!-- 整行水平对齐.name -->
<!-- nly-grid-align-h.vue -->

排序

重新排序

nly-col 可以设置 prop order-* 来重新排序。 order-xs , order-sm , order-md , order-lg , order-xl 分别代表 5 个断点下的排列循序。

<nly-row style="padding-bottom:10px">
  <nly-col order-xs="1" order-sm="2" order-md="3" order-lg="4" style="background-color: #28a745;"> order-xs="1" order-sm="2" order-md="3" order-lg="4"</nly-col>

  <nly-col order-xs="2" order-sm="3" order-md="4" order-lg="1" style="background-color: #17a2b8;"> order-xs="2" order-sm="3" order-md="4" order-lg="1"</nly-col>

  <nly-col order-xs="3" order-sm="4" order-md="1" order-lg="2" style="background-color: #ffc107;"> order-xs="3" order-sm="4" order-md="1" order-lg="2"</nly-col>

  <nly-col order-xs="4" order-sm="1" order-md="2" order-lg="3" style="background-color: #dc3545;"> order-xs="4" order-sm="1" order-md="2" order-lg="3"</nly-col>
</nly-row>

<!-- 排序.name -->
<!-- nly-grid-order.vue -->

位置偏移

nly-col 可以设置 prop offset-* 来设置偏移量。 offset-xs , offset-sm , offset-md , offset-lg , offset-xl 分别代表 5 个断点下的偏移量。

<nly-container fluid class="nly-example-row">
  <nly-row>
    <nly-col md="4">md="4"</nly-col>
    <nly-col md="4" offset-md="4">md="4" offset-md="4"</nly-col>
  </nly-row>

  <nly-row>
    <nly-col md="3" offset-md="3">md="3" offset-md="3"</nly-col>
    <nly-col md="3" offset-md="3">md="3" offset-md="3"</nly-col>
  </nly-row>

  <nly-row>
    <nly-col md="6" offset-md="3">md="6" offset-md="3"</nly-col>
  </nly-row>
</nly-container>

<!-- 偏移量.name -->
<!-- nly-grid-offset.vue -->

如果您需要重置偏移量,您可以设置 offset-* = 0

<nly-container fluid class="nly-example-row">
  <nly-row>
    <nly-col sm="5" md="6">sm="5" md="6"</nly-col>
    <nly-col sm="5" offset-sm="2" md="6" offset-md="0">sm="5" offset-sm="2" md="6" offset-md="0"</nly-col>
  </nly-row>

  <nly-row>
    <nly-col sm="6" md="5" lg="6">sm="6" md="5" lg="6"</nly-col>
    <nly-col sm="6" md="5" offset-md="2" lg="6" offset-lg="0">sm="6" md="5" offset-md="2" col-lg="6" offset-lg="0"</nly-col>
  </nly-row>
</nly-container>

<!-- 偏移量.name -->
<!-- nly-grid-offset.vue -->

组件参数

props 参数

props (Click to sort Ascending)类型默认值描述
tag
String'div'标签
no-gutters
Booleanfalse去除栅格间距
align-h
Stringnull设置整行水平对齐方式,可选 start, center, end, around, between
align-v
Stringnull设置整行垂直对齐方式,可选 start, baseline, end, stretch,center
cols-xs
String or Number宽度xs及以上断点一行列数,可选1,2,3,4,5,6
cols-sm
String or Number宽度sm及以上断点一行列数,可选1,2,3,4,5,6
cols-md
String or Number宽度md及以上断点一行列数,可选1,2,3,4,5,6
cols-lg
String or Number宽度lg及以上断点一行列数,可选1,2,3,4,5,6
cols-xl
String or Number宽度xl及以上断点一行列数,可选1,2,3,4,5,6
row-class
String自定义css式样,可自定义实现需要,也可以使用align-items-start所有行顶部对齐,row align-items-center所有行锤子居中对齐,align-items-end所有行底部对齐,justify-content-start所有行水平左对齐,justify-content-center所有行水平居中对齐,justify-content-end所有行右对齐,justify-content-around所有行非起始中间对齐,justify-content-between所有行左右对齐

props 参数

props (Click to sort Ascending)类型默认值描述
tag
String'div'标签
col
Booleanfalse在没有其他props的情况下,所有列等宽
xs
String or Number宽度在xs及以上断点列宽,可选1,2,3,4,5,6,7,8,9,10,11,12,auto,auto为根据断点自动宽度
sm
String or Boolean or Numberfalse宽度在sm及以上断点列宽,可选1,2,3,4,5,6,7,8,9,10,11,12,auto,auto为根据断点自动宽度
md
String or Boolean or Numberfalse宽度在md及以上断点列宽,可选1,2,3,4,5,6,7,8,9,10,11,12,auto,auto为根据断点自动宽度
lg
String or Boolean or Numberfalse宽度在lg及以上断点列宽,可选1,2,3,4,5,6,7,8,9,10,11,12,auto,auto为根据断点自动宽度
xl
String or Boolean or Numberfalse宽度在xl及以上断点列宽,可选1,2,3,4,5,6,7,8,9,10,11,12,auto,auto为根据断点自动宽度
align-self
Stringnull水平對齊方式, 可选 start, center, end, baseline , stretch
offset-xs
String or Number宽度在xs及以上断点右移列数,可选0,2,3,4,5,6,7,8,9,10,11
offset-sm
String or Number宽度在sm及以上断点右移列数,可选0,2,3,4,5,6,7,8,9,10,11
offset-md
String or Number宽度在md及以上断点右移列数,可选0,2,3,4,5,6,7,8,9,10,11
offset-lg
String or Number宽度在Lg及以上断点右移列数,可选0,2,3,4,5,6,7,8,9,10,11
offset-xl
String or Number宽度在xl及以上断点右移列数,可选0,2,3,4,5,6,7,8,9,10,11
order-xs
String or Number宽度在xs及以上断点排列顺序,可选0,1,2,3,4,5,6,7,8,9,10,11,12
order-sm
String or Number宽度在sm及以上断点排列顺序,可选0,1,2,3,4,5,6,7,8,9,10,11,12
order-md
String or Number宽度在md及以上断点排列顺序,可选0,1,2,3,4,5,6,7,8,9,10,11,12
order-lg
String or Number宽度在lg及以上断点排列顺序,可选0,1,2,3,4,5,6,7,8,9,10,11,12
order-xl
String or Number宽度在xl及以上断点排列顺序,可选0,1,2,3,4,5,6,7,8,9,10,11,12
col-class
String自定义css式样,可以用自定义css式样或者adminlte自定义式样让col实现对齐等其他功能align-self-start顶部对齐,align-self-center中间对齐,align-self-end底部对齐

单个组件导入

你可以从下表给出的导出路径和导出名称导入单个组件包

组件导出名称导出路径
<nly-row>NlyRownly-adminlte-vue
<nly-col>NlyColnly-adminlte-vue

例子

import { NlyRow } from 'nly-adminlte-vue'
Vue.component('nly-row', NlyRow)

导出作为插件

导出的插件包括上表中列出的组件. 插件同样包含上表中所有组件的简称.

导出名称导出路径
GridPluginnly-adminlte-vue

例子

import { GridPlugin } from 'nly-adminlte-vue'
Vue.use(GridPlugin)