@risklab / ui

@risklab/ui 是独立的香草RiskLab UI包。

当你需要的时候使用它：

• 与框架无关的Web组件
• 零运行时依赖项
• 一个可以放入静态站点、指示板、信息亭或混合堆栈的包
• 与其他RiskLab UI包使用的CSS令牌系统相同

如果您正在构建React应用程序，请选择 @risklab/ui-react.

安装

npm install @risklab/ui

快速启动

import "@risklab/ui/auto";
import "@risklab/ui/css";

document.body.innerHTML = `
  <div class="ui-root">
    <ui-button variant="filled" color="primary">Run report</ui-button>
    <ui-text-field label="Search" placeholder="Find assets"></ui-text-field>
  </div>
`;

使用 @risklab/ui/auto 当您希望注册所有内置自定义元素时。 如果需要更多的控制，请从 @risklab/ui/inputs， @risklab/ui/layout， @risklab/ui/data-display，和 其他类别入口点。

样式和标记

import "@risklab/ui/css";

RiskLab UI使用CSS自定义属性，因此它可以存在于现有的设计中 系统没有强制一个视觉识别。

:root {
  --ui-color-primary: #0057d9;
  --ui-color-surface: #ffffff;
  --ui-color-text: #111827;
  --ui-font-family: "Segoe UI", sans-serif;
  --ui-radius-md: 6px;
}

暗模式是通过选择加入的 [data-ui-theme="dark"] 或者 .ui-dark.

包笔记

• @risklab/ui 是默认的香草包。
• @risklab/ui-vanilla 为喜欢显式的团队提供相同的模型 包命名对称 @risklab/ui-react， @risklab/ui-vue，和 其他框架包。
• 发布的包表面没有安装时依赖项。