基于 Web Components
组件方案
中文 | English
- 跨框架兼容: 与 React, Vue, Preact, SolidJS, Svelte 等兼容。可以和遵循 W3C 标准的任何 JavaScript 项目集成。
- 原生体验: 易于入门,像使用本地 div 标签,简化项目大小和减少学习成本。
- 模块化设计: 可选导入和全量导入,以增强可维护性和可伸缩性。
- 交互式丰富文档: 提供详细的交互式文档,并附有有效的示例子。
- 支持类型校验: 基于 TypeScript 构建,具有类型支持,确保代码的健壮性和可维护性。
- 持久和稳定: 与框架 (React/vue) 无关,避免破坏性的更新,并确保持续的项目运行。
使用 npm:
npm install ranui --save
See components and use examples
支持按需导入,以显著减少包体积大小
import 'ranui/button';
如果遇到样式问题,可以选择手动导入样式文件
import 'ranui/style';
如果遇到类型问题,可以选择手动导入类型文件
import 'ranui/typings';
// 或者
import 'ranui/dist/index.d.ts';
// 或者
import 'ranui/type';
// 或者
import 'ranui/dist/typings';
并不是都要,选一个能生效的就行
也支持全量导入
import 'ranui';
- ES module
import 'ranui';
或者
import 'ranui/button';
- UMD, IIFE, CJS
<script src="./ranui/dist/umd/index.umd.cjs"></script>
它是基于Web Components
的组件,你可以不用关注框架就可以使用它。
在大多数情况下,您可以像使用本地 div
标签一样使用它
下面是一些例子:
- html
- js
- jsx
- vue
- tsx
<script src="./ranui/dist/umd/index.umd.cjs"></script>
<body>
<r-button>Button</r-button>
</body>
import 'ranui';
const Button = document.createElement('r-button');
Button.appendChild('this is button text');
document.body.appendChild(Button);
import 'ranui';
const App = () => {
return (
<>
<r-button>Button</r-button>
</>
);
};
<template>
<r-button></r-button>
</template>
<script>
import 'ranui';
</script>
// react 18
import type { SyntheticEvent } from 'react';
import React, { useRef } from 'react';
import 'ranui';
const FilePreview = () => {
const ref = useRef<HTMLDivElement | null>(null);
const uploadFile = (e: SyntheticEvent<HTMLDivElement>) => {
if (ref.current) {
const uploadFile = document.createElement('input');
uploadFile.setAttribute('type', 'file');
uploadFile.click();
uploadFile.onchange = (e) => {
const { files = [] } = uploadFile;
if (files && files?.length > 0 && ref.current) {
ref.current.setAttribute('src', '');
const file = files[0];
const url = URL.createObjectURL(file);
ref.current.setAttribute('src', url);
}
};
}
};
return (
<div>
<r-preview ref={ref}></r-preview>
<r-button type="primary" onClick={uploadFile}>
choose file to preview
</r-button>
</div>
);
};