DriveNets 设计系统

React中用于应用开发的官方DriveNets设计系统.

安装

首先,通过您首选的软件包管理器安装软件包:

npm install @drivenets/design-system
# or
pnpm install @drivenets/design-system
# or
yarn add @drivenets/design-system

然后,导入应用程序根中的 Css 样式(例如, main.tsx 或者说 App.tsx:

import '@drivenets/design-system/index.min.css';

您还需要导入您的字体 index.html 文档.

我们建议使用我们提供的 Vite 插件自动包含必要的字体链接 。 您可以在 虚拟插件读取器。 。 。 .

或者你可以手动将以下行添加到 <head> 区域 index.html 文件 :

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;0,900;1,100;1,300;1,400;1,500;1,600;1,700;1,900&display=swap" />

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fira+Mono:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap" />

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20,400,0..1,0&display=block" />

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20,400,0..1,0&display=block" />

使用量

您现在可以在您的 React 应用程序中使用 DriveNets 设计系统组件 。 这里有一个简单的例子:

import { DsButton } from '@drivenets/design-system';

export const App = () => {
  return (
      <DsButton onClick={() => alert('Button clicked!')}>Click Me</DsButton>
  );
};