Skip to content

Latest commit

 

History

History
192 lines (142 loc) · 4.12 KB

README.zh-CN.md

File metadata and controls

192 lines (142 loc) · 4.12 KB
Raw

ranui

基于 Web Components 组件方案

Build Status npm-v npm-d brotli module formats: umd, esm

中文 | English

特点

  1. 跨框架兼容： 与 React, Vue, Preact, SolidJS, Svelte 等兼容。可以和遵循 W3C 标准的任何 JavaScript 项目集成。
  2. 原生体验： 易于入门，像使用本地 div 标签，简化项目大小和减少学习成本。
  3. 模块化设计： 可选导入和全量导入，以增强可维护性和可伸缩性。
  4. 交互式丰富文档： 提供详细的交互式文档，并附有有效的示例子。
  5. 支持类型校验： 基于 TypeScript 构建，具有类型支持，确保代码的健壮性和可维护性。
  6. 持久和稳定： 与框架 (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

html

<script src="./ranui/dist/umd/index.umd.cjs"></script>

<body>
  <r-button>Button</r-button>
</body>

js

import 'ranui';

const Button = document.createElement('r-button');
Button.appendChild('this is button text');
document.body.appendChild(Button);

jsx

import 'ranui';

const App = () => {
  return (
    <>
      <r-button>Button</r-button>
    </>
  );
};

vue

<template>
  <r-button></r-button>
</template>
<script>
import 'ranui';
</script>

tsx

// 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>
  );
};

贡献者

Meta

LICENSE (MIT)