颗粒

一个用于构建dscout用户界面的CSS框架和React组件库. 访问 文档网站 学习更多.

使用量

使用 线条 或者说 无数字 :

$ yarn add @dscout/particle
$ npm install --save @dscout/particle

反应版本支持

粒子支持反应18.x和反应19.x两种应用. 在React版本之间升级时不需要更改代码. 注意颗粒是使用Resact 18.x构建的,因此使用Resact 19.x时应当铭记这一点,开发者应当如预期的那样验证组件.

# React 18 applications
yarn add @dscout/particle react@^18.0.0 react-dom@^18.0.0

# React 19 applications
yarn add @dscout/particle react@^19.0.0 react-dom@^19.0.0

同伴依赖关系

粒子要求执行应用程序安装 React(react, (中文(简体) ), react-dom)和反应路由器(react-router-dom) (中文(简体) ). @floating-ui/dom ——赋予工具提示和下放组件以权力——是粒子和自动安装的常规依赖;执行应用程序不需要添加.

导入

Everything is a named导出在命名空间"@dscout/project"上,例如:

import React from 'react';
import { Container, Heading } from '@dscout/particle';

export default function Announcement() {
  return (
    <Container>
      <Heading level="2">Important!</Heading>
      <p>Make sure to eat your vegetables.</p>
    </Container>
  );
}

样式表

样式表包含两种格式: css 财务报告和审定财务报表 scss。 。 。 .

预编译样式表位于 lib 构建输出的目录. 要导入纯 CSS 文件 :

@import 'node_modules/@dscout/particle/lib/stylesheets/particle.css';
@import 'node_modules/@dscout/particle/lib/stylesheets/particle.min.css';

来源 scss 文件位于 styles 目录. 你可以把它导入你自己 scss 类似文件 :

@import '@dscout/particle/styles/particle.scss';

与故事书一起发展

故事书为粒子组件提供了孤立的开发环境,以及作为游乐场和文献的已出版的静态站点.

安装依赖关系

粒子使用灰尘来管理节点依赖. 先在当地开发 安装 asdf 时:

brew install asdf

然后安装节点。 如果您还没有在您的机器上设置节点, 您可能首先需要安装它的依赖和 OpenPGP 密钥 :

brew install coreutils
brew install gpg
bash ~/.asdf/plugins/nodejs/bin/import-release-team-keyring

安装asdf 依赖性

asdf install

安装国家预防机制的依赖性 线条数字 :

yarn install

开始故事本

本地运行故事书 :

yarn start

脚本

为运行共同任务提供各种脚本.

使用 ESLint 并运行打字器的 Lint :

yarn lint

以监视模式启动 Vitest 测试跑取器 :

注:在测试前,您需要运行 yarn playwright install 确保本地测试跑道能够正确旋转必要的浏览器环境.

yarn test

捐款

见维基文库 详细介绍如何为粒子作出贡献.

发布新版本

可以找到关于编写新版本并将其提交 npm 的说明 这里。 。 。 .