阅读 58

构建一个React组件库 | 第三部分

译者:miaoYu

原文链接

引言

该系列文章将通过创建一个组件库来引导你学习如何构建自己的组件库。

这是第三部分,如果你还没有读 第一部分 第二部分,我建议你先读。

我们将讨论:

  • 创建一个Label元素

  • 让我们的按钮元素有更强的可扩展性

  • 元素尺寸的一致性

添加一个Label元素

$ touch lib/elements/Label.js

复制代码
import PropTypes from 'prop-types';
import styled from 'styled-components';

复制代码
import * as colors from '../styles/colors';

复制代码

const Label = styled.label`
  color: ${({ color }) => colors[color]};
  display: inline-block;
  font-size: 14px;
  font-weight: ${({ fontWeight }) => fontWeight};
  margin: 8px 0;
  text-transform: ${({ textTransform }) => textTransform};
  transition: all 300ms ease;
`;

复制代码
Label.propTypes = {
  color: PropTypes.string,
  fontWeight: PropTypes.number,
  textTransform: PropTypes.string,
};

复制代码
Label.defaultProps = {
  color: 'silver',
  fontWeight: 400,
  textTransform: 'uppercase',
};

复制代码
export default Label;

复制代码

看起来有写了很多代码,但是大部分和Button元素差不多。用户可以通过props传入 color, font-weight,和 text-transform参数。 如果没传设定默认值。现在我们在lib/index.js中创建路径。

import Button from './elements/Button';
import Label from './elements/Label';

复制代码
module.exports = {
  Button,
  Label,
};

复制代码

很棒,现在我们可以在component-lib-playground应用中体验了。

注意: 确保 npm run build:watch npm run lint:watch 在你组件库中运行,以及 _npm run dev_ 在应用中运行。

...
import { Button, Label } from 'component-lib'
...

复制代码
const App = ({ name }) => {
  return (
    <div>
      <Label>Hello, {name}!</Label>
      <Button bgColor=""orange"">
        Click Me!
      </Button>
    </div>
  );
};
...

复制代码

如果一切顺利,你将在浏览器中看到:

看起来我们设置的默认值起作用了,你也可以传不同的参数试试。 ?

到这里,你可能会有一些疑惑,为什么把font-size, line-height,和 padding设置成了静态参数,很显然你是对的,这些参数应该设置成动态添加的。但是我们应该定一个好的尺寸规范给使用者,而不是让他们输入任意的font-size值到组件中。我们将划分出合理的尺寸,以Labels为例,我们将设定small, medium,和large三个尺寸, 用户通过props传入这三个尺寸。我了这样实现,我们在Label加如下代码:

...
const labelSizes = {
  small: {
    'font-size': '12px',
    'line-height': '12px',
  },
  medium: {
    'font-size': '14px',
    'line-height': '16px',
  },
  large: {
    'font-size': '16px',
    'line-height': '16px',
  },
};

复制代码
const Label = styled.label`
  color: ${({ color }) => colors[color]};
  display: inline-block;
  font-size: ${({ size }) => labelSizes[size]['font-size']};
  line-height: ${({ size }) => labelSizes[size]['line-height']};
  ...

复制代码
Label.defaultProps = {
  color: 'silver',
  fontWeight: 400,
  size: 'medium',
  textTransform: 'uppercase',
};
...

复制代码

等等,font-sizes的值是怎么得出来的?随意定吗?

好问题。当然不是随意定出来的。有眼力的人应该注意到了,我们大多数时候在使用“八点网格系统”规则。因为在创建我们的组件库时,很难保持间距的一致性。一个很好的解决方法就是用选一个“网格系统”。我们现在用“八点网格系统”,那么就意味着所有的间距和尺寸都是8px的倍数。你选择8,10或者12作为倍数,没有关系。最重要的目的是避免生成不懂尺寸的组件。根据“八点网格系统”,那意味着我们将“font-sizes”和“line-height”的尺寸保持在8的倍数。所以我们“medium”的字体大小应该是16px。

注意: 如果你想了解更多关于“八点网格系统” 这有一篇很牛逼的文章如果你想了解更多关于创建一致性的网格系统 看这篇牛逼的文章.

明白了. 但是medium的label尺寸是14px,而不是16px?

又是一个好问题。label标签展示一些指标和标签,它不应该分配我们的注意力。实际上,最好的label标签是我们看过就忘记。综上所述,如果我们整体的中号字体设置为16px,那么我们的label标签就应该略小一点,比如小2px,达到视觉上的降级。我也可以使用银色来达到相同的效果。注意我们也要修改“line-height”来达到一致性。

ok,Label标签设置完了,让我们也给Button加一些动态尺寸吧。

为Button添加尺寸

按钮有很多种类,所以它的尺寸有些混乱。我们想满足用户的需求,但我们也需要创建一致性的尺寸。因此在Button中加了如下代码:

...
const buttonSizes = {
  small: {
    'font-size': '14px',
    'line-height': '30px',
    padding: '0 8px',
  },
  medium: {
    'font-size': '16px',
    'line-height': '40px',
    padding: '0 12px',
  },
  large: {
    'font-size': '18px',
    'line-height': '50px',
    padding: '0 16px',
  },
  wide: {
    'font-size': '16px',
    'line-height': '40px',
    padding: '0 36px',
  },
  extraWide: {
    'font-size': '16px',
    'line-height': '40px',
    padding: '0 72px',
  },
  fullWidth: {
    'font-size': '16px',
    'line-height': '40px',
    padding: '0 8px',
  },
};

复制代码
function setDisplay({ size }) {
  return size === 'fullWidth' ? 'block' : 'inline-block';
}

复制代码
function setWidth({ size }) {
  return size === 'fullWidth' ? '100%' : 'initial';
}

复制代码
const Button = styled.button`
  ...
  display: ${setDisplay};
  font-size: ${({ size }) => buttonSizes[size]['font-size']};
  line-height: ${({ size }) => buttonSizes[size]['line-height']};
  ...
  padding: ${({ size }) => buttonSizes[size]['padding']};
  ...
  width: ${setWidth};
  ...
`;

复制代码
Button.defaultProps = {
  bgColor: 'blue',
  fontColor: 'white',
  size: 'medium',
};

复制代码
...

复制代码

我们增加了几个尺寸: small, medium, large, wide, extraWide, 和 fullWidth,我们也增加了两个方法,setDisplaysetWidth 来处理属性. 抽离这些方法,让代码可读性更好。

计算padding

我来简单介绍下 font-size, line-height, 和 padding 的关系. 还记得我之前说,我们大多时候是遵循“八点网格系统”原则。对,这次我要打破它.。Padding应该在每条边保持一致性,遵循如下模式:

line-height = font-size + 2(padding)

复制代码

计算后,如下:

// small
line-height = 14 + 8(2) // (30px)

复制代码
// medium
line-height = 16 + 12(2) // (40px)

复制代码
// large
line-height = 16 + 18(2) // (50px)

复制代码

测试按钮尺寸

Okay, now that you understand some of the method behind the sizing, let’s test this out in the playground app. We’ll add the different button sizes so you can see the variations. We’re wrapping the buttons in divs to put each one on a new line.

好的,我们在component-lib-playground应用中测试。添加不同种类的尺寸按钮,这样你就可以看到变化。

...
const App = ({ name }) => {
  return (
    <div>
      <Label size=""small"">Hello, {name}!</Label>
      <div>
        <Button
          bgColor=""green""
          size=""small""
        >
          small
        </Button>
      </div>
      <div>
        <Button
          bgColor=""yellow""
          size=""medium""
        >
          medium
        </Button>
      </div>
      <div>
        <Button
          bgColor=""orange""
          size=""large""
        >
          large
        </Button>
      </div>
      <div>
        <Button
          size=""wide""
        >
          wide
        </Button>
      </div>
      <div>
        <Button
          bgColor=""pink""
          size=""extraWide""
        >
          extra wide
        </Button>
      </div>
      <div>
        <Button
          bgColor=""purple""
          size=""fullWidth""
        >
          full width
        </Button>
      </div>
    </div>
  );
};
...

复制代码

一切顺利的话,你可以看到如下画面:

不同尺寸和颜色的按钮。

最后

很棒!我们的按钮有一致性的尺寸,更加易用。以及我们有一个简单的API给我们用户。他们可以快速的创建一个按钮,而不用考虑它是怎么实现的。我们还添加了一个标签元素,它将在我们最终构建组件时非常有用。在第四部分,我们将增加我的第三个也是最后一个元素:多行文本输入框!

注意: 保存提交你的代码。

$ git status
$ git add -A
$ git commit -m 'Adds Label element and Button sizes'

复制代码

第四部分正在写,尽请期待!:)

文章分类
前端
文章标签