@eqtylab/ 平等

EQTY Lab的设计系统:可访问的React组件和设计符号,以Radix UI和Tailwind CSS v4为主.

文档 • 妇女 构成部分 • 妇女 GitHub 图像

安装

npm install @eqtylab/equality
# or
pnpm add @eqtylab/equality
# or
yarn add @eqtylab/equality

要求数 react 财务报告和审定财务报表 react-dom 18.2或更新鲜.

设置

尾风 CSS v4( 建议)

在您的全局样式表中导入主题配置, 然后导入飞行前:

@import '@eqtylab/equality/theme-config.css';
@import '@eqtylab/equality/preflight.css' layer(base);

theme-config.css 因为它宣布了飞行前所依赖的层序。 它建立在尾风上 所以 tailwindcss v4 必须在您的工程中安装 .

如果将平等植入一个具有自身基础风格的网站,请使用 preflight-scoped.css 因此重置不会影响其他页面.

没有尾风

包装您的应用程序, 或使用平等的部分, 在 ThemeProvider数字 :

import { ThemeProvider } from '@eqtylab/equality';

export function Root() {
  return (
    <ThemeProvider>
      <App />
    </ThemeProvider>
  );
}

见 使用指南 用于嵌入主机站点, 阴影 DOM, 以及传送到的表面.

使用量

import { Button, Card, CardContent } from '@eqtylab/equality';

export function Example() {
  return (
    <Card>
      <CardContent>
        <Button>Save changes</Button>
      </CardContent>
    </Card>
  );
}

每个组件接受a className 本地样式覆盖的道具 。 组件样式被用 CSS 模块进行范围化,因此覆盖不会泄露到其他组件.

主题

平等船舶 light 财务报告和审定财务报表 dark 主题。 将活动主题设置在根元素上 :

<html data-equality-theme="dark"></html>

在第一次油漆之前应用存储或系统偏好,请将 initializeTheme 文档中的脚本 <head>数字 :

import { initializeTheme } from '@eqtylab/equality/scripts';

<head>
  <script>{initializeTheme()}</script>
</head>;

见 主题 选项.

入境点

包船ES模块和CommonJS以TypeScript类型来构建.

无障碍

构件基于 Radix 用户界面 原始并被设计为键盘导航和屏幕阅读器.

许可证

阿帕奇 - 2.0