디자인 방법, 컴포넌트와 도구
Ran Design, ranui, ranuts로 제품을 만드세요. 개발자와 에이전트를 위한 지침과 함께 각각 독립적으로 사용할 수 있습니다.
예제
팀원 초대
실제 ranui 컴포넌트입니다. 이메일을 비워 두거나 실패를 재현하면 각 상태를 볼 수 있습니다.
- 컴포넌트
- 41
- 유틸리티
- 90+
- 언어
- 8
- 라이선스
- MIT
ranui로 만든 실제 상태
quarterly-report.pdf64%
파일 4개 읽기 테스트 실행 풀 리퀘스트 열기
<r-glass>시작할 곳 고르기
ranui
프레임워크 비종속 Web Components 라이브러리. 스타일이 갖춰진 r- 엘리먼트 41개를 Vue, React, 순수 HTML 어디에나 넣을 수 있습니다.
컴포넌트 보기ranuts
문자열, 객체, 색상, 시간, 파일, DOM을 다루는 타입 유틸리티 90여 개. 트리 셰이킹을 지원하고 의존성이 없습니다.
문서 읽기Ran Design
특정 라이브러리에 종속되지 않는 레이아웃, 상호작용, 모션 및 실제 검증 방법입니다.
디자인 살펴보기대부분의 라이브러리가 빼놓는 것
ranui컴포넌트
- 플레이어
<r-player>모듈화된 컨트롤러 코어를 갖춘 HLS 적응형 스트리밍 비디오 플레이어. - 컬러 피커
<r-colorpicker>색상과 알파 슬라이더를 갖춘 완전한 HSV 피커. HEX / RGBA를 실시간으로 출력합니다. - 레이더 차트
<r-radar>canvas로 그리는 레이더 차트. 축별 레이블과 축별 레이블 스타일을 지원합니다. - 수식
<r-math>지연 로딩되는 Temml로, 속성 하나만으로 LaTeX을 네이티브 MathML로 렌더링합니다. - 스크래치 카드
<r-scratch>완료 임계값이 있는, 긁어서 드러내는 canvas 인터랙션.
ranuts유틸리티
- Bridge
PostMessageBridgepostMessage 위에서 동작하는 프로미스 기반 RPC. iframe, 워커, 탭을 넘나들며 구조화 복제 전송과 채널 격리를 지원합니다. - Visual
ApplicationPixiJS 스타일의 씬 그래프. WebGPU / WebGL / Canvas 렌더러를 갈아 끼울 수 있습니다. - 가상 DOM
h() · init()snabbdom 스타일의 가상 DOM: 하이퍼스크립트, patch, 교체 가능한 모듈과 생명주기 훅. - TOTP
TOTPRFC-6238 일회용 비밀번호. SHA-1부터 SHA3-512까지, 암호 라이브러리 의존성은 없습니다. - MIME 레지스트리
getMime()약 1000개 항목의 MIME ⇄ 확장자 양방향 조회.
설치하고 사용하기
두 패키지를 설치하고 엘리먼트를 한 번만 등록하면 어디서든 씁니다. 빌드 단계도 프레임워크도 필요 없습니다.
npm i ranui ranuts설치와 등록
$ npm i ranui ranuts // 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>