문서/개요

예제

코드와 함께 보는 라이브 데모. 보이는 모든 파일이 페이지에서 실제로 실행됩니다. 복사하거나 StackBlitz에서 열어 보세요.

이 페이지 편집

이 페이지는 AI가 번역했으며 부정확한 내용이 있을 수 있습니다. 영어 원문 읽기

각 예제는 작은 Vue 앱입니다. DnDProvider가 들어 있는 index.vue와 필요한 컴포넌트로 이루어져 있습니다. 데모 아래의 코드 탭은 그 데모를 실행하는 바로 그 파일들입니다.

앱

실제로 만들 때와 같은 방식으로 만든 완전한 인터페이스입니다. 여러 리스트, 규칙, 오버레이, 키보드가 함께 동작합니다.

프로젝트 보드

순서를 바꿀 수 있는 컬럼, WIP 제한, Done 전의 확인, 다중 선택, 휴지통.

주간 캘린더

요일과 30분 단위를 넘나들며 드래그하고 그리드에 스냅되는 일정.

파일 관리자

폴더 트리와 파일 그리드: 선택 사각형으로 고르고, 폴더에 놓고, Alt로 복사합니다.

블록 에디터

핸들로 옮기고, 중첩하고, "/" 메뉴나 사이드바에서 끌어오는 Notion 같은 블록.

체스

합법적인 수가 빛나고, 손에 든 기물이 칸이 거부되는 이유를 알려 주며, 폰은 무엇으로 승진할지 묻고, 봇은 실제 드래그로 응수합니다.

폼 빌더

팔레트에서 가져온 Nuxt UI 필드를 행 안에 나란히 놓고, 라이브 미리보기에서 입력하고, Vue 코드로 내보냅니다.

디자인 캔버스

확대·축소되는 캔버스 위의 프레임과 레이어, 스마트 가이드, Alt로 복제, 그리고 디자인의 트리 그 자체인 레이어 패널.

페이지 빌더

페이지 위에서 실제 모습으로 바뀌는 섹션, 컬럼 사이를 오가는 요소, 같은 데이터를 쓰는 레이어 트리, 그 자리에서 하는 편집.

데이터 테이블

작업 2,000개를 담은 Nuxt UI 테이블: 가상화되고, 검색할 수 있고, 행의 그립으로 정렬합니다.