ranui / ranuts开源 · MIT 协议
原生 Web 组件。 TypeScript 工具。
40 个跨框架组件，90+ 个类型化工具函数。在 Vue、React 或纯 HTML 中使用，按需引入。
安装组件与工具npm i ranui ranuts直接试用组件
实时操作组件，查看并复制对应的 HTML。
按钮
进度
选择
已选择
查看代码HTML
<r-button type="primary">主要</r-button>
<r-button>默认</r-button>
<r-button type="warning">警告</r-button>
<r-progress percent="66"></r-progress>
<r-checkbox checked>订阅</r-checkbox>40组件
90+工具函数
8语言
MIT协议
ranui
框架无关的 Web Components 组件库。40 个开箱即用的 r- 元素，可放进 Vue、React 或纯 HTML 的任意技术栈。
查看组件ranuts
90+ 个带类型的工具函数，覆盖字符串、对象、颜色、时间、文件与 DOM。支持 Tree-shaking，零依赖。
阅读文档文章
关于渲染引擎、函数式编程、排序算法与 Web 平台的长文。
开始阅读安装与使用
安装两个包，注册一次元素，即可在任意地方使用，无需构建步骤，也不依赖任何框架。
安装并注册
import 'ranui/style' // register the <r-*> elements once import 'ranui' import { debounce } from 'ranuts'
随处使用
<!-- Vue, React, or plain HTML --> <r-button type="primary">Save</r-button> <r-progress percent="66"></r-progress>
探索组件与工具
ranuts 五项，ranui 五项。
没有匹配的内容
ranuts工具函数
- Bridge 通信桥
PostMessageBridge基于 postMessage 的 Promise 化 RPC，跨 iframe、Worker 与标签页通信，结构化克隆传输、通道隔离。 - Visual 渲染引擎
ApplicationPixiJS 风格的场景图，可插拔 WebGPU / WebGL / Canvas 渲染后端。 - 虚拟 DOM
h() · init()snabbdom 风格的 vDOM：hyperscript、patch、可插拔模块与生命周期钩子。 - TOTP 验证码
TOTPRFC-6238 一次性口令，支持 SHA-1 到 SHA3-512，零加密依赖。 - MIME 注册表
getMime()约 1000 条的 MIME ⇄ 文件扩展名双向查询。
ranui组件
- 播放器
<r-player>HLS 自适应码率视频播放器，模块化的控制器内核。 - 取色器
<r-colorpicker>完整 HSV 取色，带色相 + 透明度滑块，实时输出 HEX / RGBA。 - 雷达图
<r-radar>Canvas 绘制的雷达图，支持逐轴标签与逐轴标签样式。 - 数学公式
<r-math>通过懒加载的 Temml，用一个属性把 LaTeX 公式渲染成原生 MathML。 - 刮刮卡
<r-scratch>可交互的 Canvas 刮开揭晓，带完成度阈值。
随处可用
基于标准的自定义元素，在任意框架或无框架下都能运行。
完整类型
全程 TypeScript 编写，附带类型声明。
可安装 · 离线
文档本身就是一个 PWA，带自己的 Service Worker。
八种语言
ranui 与 ranuts 的文档以八种语言维护。