像Material UI、Bootstrap和Ant Design这样的前端库，通过简化布局和提高开发速度，使开发者的工作更加轻松。现在有了一个新的库Atomic Layout，它使用完全不同的方法来创建可重用的布局单元。

当使用现有的前端库创建一个特定的布局时，组件和间距都取决于上下文，反之亦然。这种相互依赖使得布局风格变得不灵活，在尝试进行任何改进或修改时，都让开发者感到头痛。

Atomic Layout遵循原子设计原则，使用CSS网格来创建可重用的布局单元。它通过解耦间距和组件来避免相互依赖，从而为创建布局创造无上下文的单元。

安装

Atomic Layout是一个基于React的库，使用样式化组件。首先创建一个React应用并安装所需的包。

安装 Create React App。

$ npx create-react-app atomic-layout

复制代码

安装styled-components。

$ npm i styled-components atomic

复制代码

部署

Atomic Layout是一个由多个子元素组成的实际物理实体。例如，一个标题是由标志、菜单和导航动作组成的。

接下来创建一个有图像、一些文本和一个按钮的响应式卡片元素。

创建一个名为Card.js 的新文件，并在其中粘贴以下代码。

import React from 'react'

export default function Card() {
    return (
        <div>
            <p>Hello</p>
        </div>
    )
}

复制代码

现在React元素已经创建，从Atomic Layout中导入composition 组件，并将其包在我们的React组件中，如下所示：

import React from 'react'
import { Composition } from 'atomic-layout'

export default function Card() {
    return (
        <Composition>
            <p>Hello</p>
        </Composition>
    )
}

复制代码

composition 组件接受一个area 道具，该道具定义了我们布局的蓝图。将该区域定义为一个字符串，并将其传递给composition 组件。

import React from 'react'
import { Composition } from 'atomic-layout'

const areasPhone = `
  image
  text
  button
`
export default function Card() {
    return (
        <Composition areas={areasPhone}>
            <p>Hello</p>
        </Composition>
    )
}

复制代码

area 道具接受该值，使Reactarea 组件可用。它们可以通过children render函数访问，如下所示。

import React from 'react'
import { Composition } from 'atomic-layout'

const areasPhone = `
  Image
  Text
  Button
`
export default function Card() {
    return (
        <Composition areas={areasPhone}>
        {(Areas) => (
      <> 
        <Areas.Image>Image</Areas.Image>
        <Areas.Text>Text</Areas.Text>
        <Areas.Button>Button</Areas.Button>
      </>
    )}       
     </Composition>
    )
}

复制代码

现在，基本卡片组件已经准备好接受内容了。我们已经做了几个有风格的组件，并把它们导入到我们的Card.js 。

现在，可以用下面的脚本运行该项目。

$ npm start
复制代码

我们会得到以下输出：