npm 包 @nuclei-components/grid 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

在前端开发过程中，我们经常需要使用各种第三方的 UI 组件库，而 Grid System 是其中常用的组件之一。在这里，我们介绍一个基于 Bootstrap 格栅化布局基础上二次封装的 Grid System 组件——@nuclei-components/grid。

介绍

@nuclei-components/grid 是一个基于 React 的 Grid System 组件库。它可以很好地帮助我们搭建网页的布局，并且有各种灵活的配置选项。

安装

要使用 @nuclei-components/grid，你需要选择使用 npm 或 yarn 进行安装。在你的项目根目录下，运行以下命令：

npm install @nuclei-components/grid

或

yarn add @nuclei-components/grid

使用

引入

使用 @nuclei-components/grid，你需要在代码中引入它。

import Grid from '@nuclei-components/grid';

基本用法

@nuclei-components/grid 提供了一种比较简单的方式来使用，首先你需要使用 <Grid.Container> 来包含你的布局元素，然后在其中使用 <Grid.Row> 和 <Grid.Col> 来定义网页的行列布局。例如：

<Grid.Container>
  <Grid.Row>
    <Grid.Col>1</Grid.Col>
    <Grid.Col>2</Grid.Col>
    <Grid.Col>3</Grid.Col>
  </Grid.Row>
</Grid.Container>

你可以看到，我们在 <Grid.Row> 中使用了三个 <Grid.Col> 来定义了三列网格。

高级用法

你可以通过配置 props 来对 @nuclei-components/grid 进行更精细的调整，以下是一些常用的 props。

`<Grid.Container>`

Props	类型	默认值	描述
fluid	bool	false	如果为 true，容器将占据整个屏幕宽度。
className	string	-	容器元素的额外类名。
style	object	-	容器元素的样式。

`<Grid.Row>`

Props	类型	默认值	描述
noGutters	bool	false	如果为 true，则行内 col 元素将无外间距。
className	string	-	行元素的额外类名。
style	object	-	行元素的样式。

`<Grid.Col>`

Props	类型	默认值	描述
col	number	-	定义此元素应在多少列宽上具有响应级别。例如，`<Grid.Col col={6}>` 在压缩屏幕上将设置元素宽为一半。
offset	number	-	定义此元素应在多少列宽上具有左偏移。例如，`<Grid.Col offset={3}>` 将向右偏移三列宽。
className	string	-	元素的额外类名。
style	object	-	元素的样式。
xs	number	-	定义此元素应在多少列宽上具有响应级别（移动设备上）。
sm	number	-	定义此元素应在多少列宽上具有响应级别（平板电脑上）。
md	number	-	定义此元素应在多少列宽上具有响应级别（桌面电脑上）。
lg	number	-	定义此元素应在多少列宽上具有响应级别（大桌面电脑上）。
xl	number	-	定义此元素应在多少列宽上具有响应级别（超大桌面电脑上）。
xsOffset	number	-	定义此元素应在多少列宽上具有左偏移（移动设备上）。
smOffset	number	-	定义此元素应在多少列宽上具有左偏移（平板电脑上）。
mdOffset	number	-	定义此元素应在多少列宽上具有左偏移（桌面电脑上）。
lgOffset	number	-	定义此元素应在多少列宽上具有左偏移（大桌面电脑上）。
xlOffset	number	-	定义此元素应在多少列宽上具有左偏移（超大桌面电脑上）。
xsOrder	number	-	定义此元素应在多少列宽上具有顺序级别（移动设备上）。
smOrder	number	-	定义此元素应在多少列宽上具有顺序级别（平板电脑上）。
mdOrder	number	-	定义此元素应在多少列宽上具有顺序级别（桌面电脑上）。
lgOrder	number	-	定义此元素应在多少列宽上具有顺序级别（大桌面电脑上）。
xlOrder	number	-	定义此元素应在多少列宽上具有顺序级别（超大桌面电脑上）。
first	bool	false	将元素推到左侧。
last	bool	false	将元素推到右侧。
middle	bool	false	将元素推到中间。
center	bool	false	将元素垂直居中。
top	bool	false	将元素推到顶部。
bottom	bool	false	将元素推到底部。
around	bool	false	将元素分别分布于 justify 分布方向上的所有空间之间。
between	bool	false	将元素分别分布于当中所有空间之间。
card	bool	false	将元素设置为卡片样式。
cardBody	bool	false	将元素设置为卡片身体样式。
cardHeader	bool	false	将元素设置为卡片头部样式。
cardFooter	bool	false	将元素设置为卡片底部样式。
cardTitle	bool	false	将元素设置为卡片标题样式。
cardSubTitle	bool	false	将元素设置为卡片副标题样式。
cardImage	bool	false	在 CardBody 内，将元素设置为卡片图片容器。
cardLink	bool	false	将元素设置为卡片链接。
cardText	bool	false	将元素设置为卡片文本样式。
cardTitleText	bool	false	将元素设置为卡片标题文本样式。
cardSubTitleText	bool	false	将元素设置为卡片副标题文本样式。

示例

示例 1

下面的示例演示了如何使用最基本的 props，一个完整的 Grid System 由一个容器 <Grid.Container> 和至少一个行 <Grid.Row>，一个行又由至少一个列 <Grid.Col> 组成。

-- -------------------- ---- -------
------ ---- ---- --------------------------

-------- ----- -
  ------ -
    ----------------
      ----------
        ----------------------
        ----------------------
        ----------------------
      -----------
    -----------------
  --
-

示例 2

下面的示例演示了如何使用 offset props 来定义偏移量。

-- -------------------- ---- -------
------ ---- ---- --------------------------

-------- ----- -
  ------ -
    ----------------
      ----------
        --------- --------------------
        --------- ------- ------------ ------- -------------
      -----------
    -----------------
  --
-

示例 3

下面的示例演示如何使用 noGutters props，来去掉列之间的间距。

-- -------------------- ---- -------
------ ---- ---- --------------------------

-------- ----- -
  ------ -
    ----------------
      --------- ----------
        --------- --------------------
        --------- --------------------
        --------- --------------------
      -----------
    -----------------
  --
-

总结

@nuclei-components/grid 是一个非常好用的基于 React 的 Grid System 组件库，它提供了许多强大的 props 可供自定义调整，可以很大程度上减轻前端工程师的布局工作量。使用起来也很简单，建议大家在将来的项目中尝试使用。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60066bcf967216659e244d3e