UI 개요
@univerjs-pro/boards-ui는 라이선스가 필요한 Univer Boards 브라우저 캔버스를 제공합니다. 장면, 선택 및 뷰포트 상호 작용, 도구 모음, 컨텍스트 메뉴, 텍스트, 도형, 커넥터와 지원되는 Board 요소의 편집 UI를 렌더링합니다.
Board UI 등록
Board 플러그인보다 먼저 UniverLicensePlugin을 구성합니다. Docs, Drawing, Ink, Shape Editor는 기술적 렌더링 및 편집 종속성이므로 해당 제품을 미리 알 필요가 없습니다.
TypeScript
univer.registerPlugin(UniverLicensePlugin, { license: process.env.CLIENT_LICENSE_TEXT,})univer.registerPlugin(UniverBoardsPlugin)univer.registerPlugin(UniverBoardsUIPlugin, { workbench: { content: true, header: false, headerMenu: false, toolbar: false, footer: false, }, interaction: { minZoomRatio: 0.1, maxZoomRatio: 4, wheelZoomWithModifier: true, trackpadPanEnabled: true, },})전체 종속성, 스타일, 로케일 등록 순서는 설치 및 기본 사용법을 참고하세요.
캔버스 옵션
IUniverBoardsUIConfig는 그리드, 삽입 기본값, 도형과 스티커 메모 색상, 도구, 뷰포트 바, 렌더 어댑터, 빠른 추가, 정밀 선택, 치수 표시, 공동 작업 커서도 제어합니다.
메뉴 설정과 캔버스 도구 모음
컨텍스트 메뉴 재정의에는 menu와 updateMenuConfig()를 사용합니다. Boards의 독립적인 캔버스 도구 모음은 toolbar.tools로 설정하며 Ribbon의 gridLayout으로 제어하지 않습니다.
이 가이드는 어떠셨나요?