@acronis-平台/ui-反应
Acronis 反应组件库—— a 基础UI 执行,主题
@acronis-platform/tokens-pd (从
@acronis-platform/design-tokens) (中文(简体) ).
此套件正在积极开发中, 面向 v1 , 并扩展组件 : 组件。 见
AGENTS.md公约.
安装
pnpm add @acronis-platform/ui-react react react-dom
使用量
import '@acronis-platform/ui-react/styles';
import { Button, Switch } from '@acronis-platform/ui-react';
export function Example() {
return (
<div>
<Button variant="default">Save</Button>
<Switch defaultChecked />
</div>
);
}
@acronis-platform/ui-react/styles 装入 acronis 符号基. 切换
运行时的主题 :
/* base brand */
@import '@acronis-platform/ui-react/styles';
/* optional: layer another brand override on top */
@import '@acronis-platform/tokens-pd/css/deep_sky_itkontoret.css';
<!-- light/dark mode -->
<html data-theme="dark"></html>
光/暗由驱动 light-dark() + 键 color-scheme· ; dark: 水电费
接通 [data-theme='dark']。 。 。 .
字体
设计符号使用 间 作为默认家族,以及生成的 CSS
发出优雅的倒叠font-family: Inter, system-ui, sans-serif) (中文(简体) ).
图书馆故意的 不捆绑字体 - 装上它就是
消费者的选择,所以你控制主机,子集和权重.
在Inter中提供,自收自支(建议——无第三方CDN,GDPR安全).
@fontsource/inter (SIL 打开字体)
许可)是最简单的路线:
pnpm add @fontsource/inter
// Load only the weights you use (the typography scale uses 400/500/600/700).
import '@fontsource/inter/400.css';
import '@fontsource/inter/500.css';
import '@fontsource/inter/600.css';
import '@fontsource/inter/700.css';
import '@acronis-platform/ui-react/styles';
静态
@fontsource/inter将家庭登记为Inter,该匹配 符号输出 。 可变软件包@fontsource-variable/inter登记册Inter Variable相反,它不会匹配font-family: Inter无 额外别名 —— 偏好静态包,除非您自己添加该映射.
如果您跳过此步骤, 文本会回到 system-ui /平台 sans-serif. [永久失效連結] (中文(简体) ).
开发
pnpm --filter @acronis-platform/ui-react storybook # explore components
pnpm --filter @acronis-platform/ui-react test # Vitest + RTL
pnpm --filter @acronis-platform/ui-react build # library bundle + types