npm 包 @design-systems/clean 使用教程

前言

在前端开发中，管理样式是一个比较繁琐的工作。尤其在团队协作中，不同成员所编写的代码风格也有所不同，导致样式风格不统一。这时，我们可以使用设计系统，将整个团队的样式规范化，提高开发效率以及代码可读性。@design-systems/clean 就是这样一个设计系统。它可以帮助团队规范化样式，同时提供了一系列 UI 组件，从而提高开发效率。

安装

@design-systems/clean 可以通过 npm 包管理工具安装。

npm install @design-systems/clean

使用

在项目中使用 @design-systems/clean，需要将包中的样式文件和组件导入到项目中。

导入样式

@design-systems/clean 中的样式文件有两个：clean.css 和 clean.min.css。我们可以根据项目需要自行选择一个。

<link rel="stylesheet" href="node_modules/@design-systems/clean/dist/clean.min.css" />

或者

import 'node_modules/@design-systems/clean/dist/clean.min.css';

导入组件

@design-systems/clean 组件是基于 React 的。因此我们需要安装 React 和 React DOM。

npm install react react-dom

接着可以使用组件了。例如：

import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from '@design-systems/clean/dist/react';

ReactDOM.render(<Button>Hello, World!</Button>, document.getElementById('root'));

以上代码将渲染一个 Clean 的按钮。

组件列表

@design-systems/clean 提供了一系列 UI 组件。它们的样式都基于 Clean 设计系统，因此可以保证风格的统一。

Button

按钮组件，支持五种主题：primary、secondary、success、warning、danger。

import React from 'react';
import { Button } from '@design-systems/clean/dist/react';

const MyButton = () => {
  return (
    <Button theme="primary">点击我</Button>
  );
};

Icon

图标组件，支持多种图标类型。可以通过修改属性 type 来改变图标。

import React from 'react';
import { Icon } from '@design-systems/clean/dist/react';

const MyIcon = () => {
  return (
    <Icon type="search" />
  );
};

Input

输入框组件，支持多种类型：text、password、email、tel、search。

import React from 'react';
import { Input } from '@design-systems/clean/dist/react';

const MyInput = () => {
  return (
    <Input type="text" />
  );
};

Checkbox

多选框组件。

import React from 'react';
import { Checkbox } from '@design-systems/clean/dist/react';

const MyCheckbox = () => {
  return (
    <Checkbox />
  );
};

Radio

单选框组件。

import React from 'react';
import { Radio } from '@design-systems/clean/dist/react';

const MyRadio = () => {
  return (
    <Radio />
  );
};

Select

下拉选择框组件。

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

----- -------- - -- -- -
  ------ -
    --------
      ------- ----------------------
      ------- ----------------------
      ------- ----------------------
    ---------
  --
--
展开代码

相关工具

@design-systems/clean 还提供了一些工具，可以帮助我们更好地使用这个设计系统。

Clean Sketch Template

Sketch 是一款非常流行的设计工具。@design-systems/clean 也提供了 Sketch 模板，可以让设计师更方便地使用 Clean 的 UI 元素。

Clean CLI

Clean CLI 是一个命令行工具，可以快速生成 Clean 的项目模板。

# 全局安装
npm install -g @design-systems/clean-cli

# 使用命令生成项目
clean-cli init my-project

结语

@design-systems/clean 是一个非常优秀的设计系统。它可以帮助我们更好地管理样式，提高开发效率。同时提供的组件也非常实用，可以使我们快速搭建出美观的 Web 界面。希望本篇文章能够对你学习和使用 @design-systems/clean 有所帮助。

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