ctrlk

安装指导

Rtdui 包含了多个独立的包:

包说明
@rtdui/tailwind-plugin为Tailwindcss提供的rtdui插件, 方便与你的Tailwindcss项目集成
@rtdui/hooks提供了一组有用的React Hooks, 下面的包都依赖于它
@rtdui/core核心组件库, 包含了大量基础组件. 下面的包都依赖于它
@rtdui/shiki-highlight代码高亮的组件, 基于shiki
@rtdui/datatable全功能的数据表格组件, 以及数据表格下拉选择组件
@rtdui/dates全功能的date,time,datetime 选取组件, 支持多选和范围选择
@rtdui/dialogs对话框系统, 可以使用命令方式打开对话框.
@rtdui/notifications通知系统, 可以使用命令方式展示通知.
@rtdui/editor全功能的富文本编辑器组件
@rtdui/signature-pad平滑流畅的手写签名板
@rtdui/spotlight一个应用搜索中心组件

注意: 为了减少安装包的尺寸. 所有包都将react和react-dom作为配对依赖, 你需要自己提前安装这两个包.

另外: @rtdui/*的相互引用也作为配对依赖. 因此@rtdui/hooks和@rtdui/core对于其它包而言是必须的, 也需要提前安装.

如果你只需使用基础组件, 则需要安装

npm i @rtdui/hooks @rtdui/core

其它的组件根据需要手动安装, 比如需要代码高亮组件, 还需安装

npm i @rtdui/shiki-highlight

当然, 也可以一次性安装:

npm i @rtdui/hooks @rtdui/core @rtdui/shiki-highlight ...

使用指导

Rtdui的组件的样式虽然是基于TailwindCSS的, 但@rtdui/core包中提供了编译好的css文件, 其包含了所有@rtdui/*包的样式.

如果你的项目没有使用TailwindCSS

你可以直接加载Rtdui提供的css样式:

  • 如果你的构建工具支持导入css文件:

    // "@rtdui/core/styles.css"中包含了所有`@rtdui/*`包的样式, 使用其它包无需再导入样式
import "@rtdui/core/styles.css";

  • 如果你的构建工具不支持导入css文件, 可以将rtdui的css文件作为静态资源加载:

    1. 复制rtdui的css文件到你的站点资产目录下

      比如将./node_modules/@rtdui/core/styles.css复制到你的项目的public/assets/rtdui/目录下

    2. 在页面上加载css文件

      <link href="https://xxx/assets/rtdui/styles.css" rel="stylesheet" />

额外的, rtdui还提供了layer版本的css样式: @rtdui/core/styles.layer.css, 该文件使用了CSS的@layer规则, 最大的好处是不会因为CSS优先级问题覆盖掉你的样式. 因为@layer规则将rtdui的样式封装在了低于你样式的优先级范围内. 关于CSS的@layer规则请查看MDN

如果你的项目也使用TailwindCSS

你可以使用Rtdui提供的@rtdui/tailwind-plugin插件, 直接将rtdui的样式集成进你的项目中, 无需加载rtdui的css文件:

Rtdui v5 最低支持的 TailwindCSS 版本是v4.0.0, 因为 Rtdui 组件中使用了很多只在 v4.0.0 版本中存在的功能.

Tip: 如果你使用VSCode, 推荐安装 TailwindCSS IntelliSense 扩展 以获得最佳的开发体验.

  1. 安装@rtdui/tailwind-plugin插件以及相关依赖

    rtdui插件依赖daisyui插件, 如果还没有安装也需要安装

    npm i -D @tailwindcss/typography daisyui @rtdui/tailwind-plugin

  2. 配置TailwindCSS

    TailwindCSS v4 版本使用css作为配置文件, 不再使用tailwind.config.{ts,js}配置文件:

    tailwind.css:

    @import "tailwindcss";
/* 添加rtdui包路径作为额外的源, 相对于当前文件路径 */
@source "./node_modules/@rtdui/";
@plugin "@tailwindcss/typography";
@plugin "daisyui" {
  themes: all; /* 默认只包含light和dark主题 */
  exclude: rootscrollgutter; /* 可选的 */
  logs: false;
}
@plugin "@rtdui/tailwind-plugin";
@custom-variant dark {
  @media (prefers-color-scheme: dark) {
    & {
      @slot;
    }
  }
  &:where([data-theme="dark"], [data-theme="dark"] *) {
    @slot;
  }
}

/*
 The default border color has changed to `currentColor` in Tailwind CSS v4,
 so we've added these compatibility styles to make sure everything still
 looks the same as it did with Tailwind CSS v3.

 If we ever want to remove these styles, we need to add an explicit border
 color utility to any element that depends on these defaults.
 */
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }
}

    tailwind.config.mjs

    import typography from "@tailwindcss/typography";
import daisyui from "daisyui";
import rtdui from "@rtdui/tailwind-plugin";

/** @type {import('tailwindcss').Config} */
export default {
  // 使dark主题与TailwindCSS的dark变体保持一致
  darkMode: [
    "variant",
    [
      "@media (prefers-color-scheme: dark) { & }",
      '&:where([data-theme="dark"], [data-theme="dark"] *)',
    ],
  ],
  content: [
    "./src/**/*.{ts,tsx,jsx,js}", // 这是你的项目源码目录
    "./node_modules/@rtdui/**/*.mjs",
  ],
  theme: {
    extend: {},
  },
  plugins: [typography, daisyui, rtdui], // 顺序很重要
  // daisyUI config (optional)
  daisyui: {
    logs: false, //禁用日志
  },
};
RTD UIv5.1.0