ran
Português

Métodos de design, componentes e ferramentas

Crie produtos com Ran Design, ranui e ranuts. Use cada um de forma independente, com orientação para desenvolvedores e agentes.

Criar com agentesDar uma estrela no GitHub
Exemplo

Convidar alguém para a equipe

LeitorEditorAdministrador
Simular uma falha na requisiçãoEnviar convite

Seções do guia que este exemplo segueInteractionWords

Componentes ranui reais. Deixe o e-mail vazio ou simule uma falha para ver cada estado.

Componentes
41
Utilitários
90+
Idiomas
8
Licença
MIT

Estados reais feitos com ranui

Enviando
quarterly-report.pdf64%
Cancelar
Execução do agente
  1. Ler 4 arquivos
  2. Executar os testes
  3. Abrir um pull request
Carregando
Vidro
<r-glass>

Escolha por onde começar

ranui

Uma biblioteca de Web Components independente de framework. Coloque 41 elementos r- já estilizados no Vue, no React ou em HTML puro.

Explorar componentes

ranuts

Mais de 90 utilitários tipados para strings, objetos, cor, tempo, arquivos e o DOM. Compatíveis com tree-shaking e sem dependências.

Ler a documentação

Ran Design

Métodos de composição, interação, movimento e revisão com evidências, independentes de bibliotecas.

Explorar design

O que a maioria das bibliotecas deixa de fora

ranuicomponentes
  • Reprodutor <r-player>Um reprodutor de vídeo HLS com taxa de bits adaptativa e núcleo de controle modular.
  • Seletor de cor <r-colorpicker>Um seletor HSV completo, com controles de matiz e alfa e saída HEX / RGBA em tempo real.
  • Gráfico de radar <r-radar>Um gráfico de radar desenhado em canvas, com rótulos e estilos de rótulo por eixo.
  • Fórmulas <r-math>Converte LaTeX em MathML nativo com o Temml carregado sob demanda, a partir de um único atributo.
  • Cartão raspadinha <r-scratch>Uma raspagem interativa em canvas, com limiar de conclusão.
ranutsutilitários
  • Bridge PostMessageBridgeRPC baseado em promessas sobre postMessage entre iframes, workers e abas, com transporte por clonagem estruturada e canais isolados.
  • Visual ApplicationUm grafo de cena no estilo do PixiJS, com backend de renderização intercambiável: WebGPU, WebGL ou Canvas.
  • DOM virtual h() · init()Um DOM virtual no estilo do snabbdom: hyperscript, patch, módulos intercambiáveis e hooks de ciclo de vida.
  • TOTP TOTPSenhas de uso único conforme a RFC-6238, de SHA-1 a SHA3-512, sem nenhuma dependência de criptografia.
  • Registro MIME getMime()Uma busca bidirecional MIME ⇄ extensão com cerca de 1000 entradas.

Instalar e usar

Instale os dois pacotes, registre os elementos uma vez e use-os em qualquer lugar. Sem etapa de build nem framework.

npm i ranui ranuts
Instalar e registrar
$ npm i ranui ranuts

// register the <r-*> elements once
import 'ranui'
import { debounce } from 'ranuts'
Usar em qualquer lugar
<!-- Vue, React, or plain HTML -->
<r-button type="primary">Save</r-button>
<r-progress percent="66"></r-progress>