React의 드래그 앤 드롭 혁명: Puck 8 소개

Puck 0.18: 차세대 React 비주얼 편집기 출시!

대규모 업그레이드를 준비하세요! React용 오픈 소스 비주얼 편집기인 Puck은 CSS Grid 및 Flexbox를 완벽하게 지원하는 혁신적인 드래그 앤 드롭 엔진을 갖춘 버전 0.18을 출시했습니다. 이를 통해 페이지 빌더 및 코드 없는 애플리케이션을 위한 전례 없는 디자인 유연성을 얻을 수 있습니다.

Puck에게 GitHub에서 별점을 주세요! ⭐

이 업데이트에서는 이전 제한 사항이 제거되어 사용자가 캔버스의 어느 위치에나 구성 요소를 끌어다 놓을 수 있습니다. 가능성을 상상해보세요:

이제 사용자는 코드를 작성하지 않고도 상상할 수 있는 거의 모든 디자인을 만들 수 있습니다. 더 이상 타협하지 마세요. 순수한 창작의 자유가 기다립니다!

퍽 0.18은 단순한 개선이 아닙니다. 이는 궁극적인 브라우저 내 디자인 도구로의 변화입니다. 단순한 페이지 수준 블록부터 원자 구성 요소를 위한 매우 세분화된 시각적 레이아웃 빌더에 이르기까지 특정 요구 사항에 맞게 적응성이 확장됩니다. 웹사이트, 문서 편집자, 인포그래픽 디자이너를 구축하세요. React 구성요소로 구축했다면 Puck이 이를 처리할 수 있습니다.

주요 기능을 살펴보겠습니다.

(자세한 내용은 공식 릴리스 노트 및 변경 로그를 참조하세요.)

퍽 0.18로 업데이트

업데이트는 쉽습니다! 새 프로젝트의 경우:

npm install @measured/puck --save

기존 프로젝트의 경우:

npm update @measured/puck

급격한 변경이 없다는 것은 원활한 전환을 의미합니다! ?

자유 형식 드래그 앤 드롭

새로운 드래그 앤 드롭 엔진은 획기적인 변화를 가져왔습니다. 이전 버전에는 주로 끌어서 놓기를 수직 축으로 제한하는 제한이 있었습니다. DropZoneAPI는 다중 열 레이아웃을 허용했지만 수동 구성 요소 배치는 번거로웠습니다.

이제 구성요소를 원하는 방향으로 자유롭게 드래그 앤 드롭하세요. Puck은 즉각적인 시각적 피드백을 제공합니다.

설정은 간단합니다. Puck 구성에서 래퍼 DropZone을 그리드 또는 Flexbox로 스타일 지정하세요.

  Grid: {
    //... fields configuration
    render: ({ columns }) => (
     <dropzone zone="my-grid"><p>This transforms the DropZone's div into a CSS grid, ensuring automatic alignment.  The same applies to flex containers.</p>

<h3 id="Advanced-CSS-Layouts">Advanced CSS Layouts</h3>

Previously, all Puck components were wrapped in a div, hindering direct descendant treatment within CSS grid or flex layouts.  The new `inline` parameter removes this wrapper, enabling expected behavior for rules like `flex-grow` or `grid-column`.

For example, create a customizable card grid using `grid-column` and `grid-row`:

```javascript
Card: {
  //... fields configuration
  inline: true, // Remove default wrapper
  render: ({ spanRow, spanCol, puck }) => {
    return (
      <div>
      </div>
    );
  },
};

사용자는 편집기 필드를 조정하여 정교한 레이아웃을 구축할 수 있습니다.

이는 Flex 컨테이너에서도 작동하여 반응형 레이아웃을 생성합니다.

이를 통해 더욱 야심찬 레이아웃과 대화형 경험이 가능해졌습니다.

DropZone 간 드래그

모든 DropZone 컨테이너 간에 구성 요소를 드래그하세요! 이전에는 드래그가 동일한 상위를 공유하는 영역으로 제한되었습니다. 이제 추가 설정 없이 형제, 중첩된 하위 항목 또는 상위 항목 간에 구성요소를 원활하게 이동할 수 있습니다.

(구성요소 제한을 위해 DropZone의 allow prop을 사용하세요.)

동적 DropZone 높이

DropZone은 이제 자녀에 맞게 높이를 동적으로 조정하여 정확한 렌더링 미리 보기를 제공합니다. 일관된 레이아웃을 유지하려면 빈 DropZone의 자리 표시자 높이(minEmptyHeight)를 구성하세요.

npm install @measured/puck --save

그리드를 사용하여 구성요소 서랍 확장

이제 새로운 드래그 앤 드롭 엔진 덕분에 구성 요소 서랍(사이드바)을 그리드로 표시할 수 있습니다.

0.18에서 더 많은 내용을 만나보세요!

• 구성요소 상호작용을 전환하는 대화형 단축키(cmd/ctrl i).
• 작업 표시줄의 "상위 선택" 작업.
• 더 쉬운 앱 삽입을 위해 기본 레이아웃에서 position: fixed을 제거했습니다.
• 액션바 구성을 위한 새로운 <actionbar.label></actionbar.label> 구성요소.

더 자세히 알아보려면 업데이트된 문서를 살펴보세요!

마무리 생각

퍽 0.18은 커뮤니티의 노력입니다. 여러분의 피드백과 기여에 감사드립니다! 여러분의 창작물을 공유하고 Discord, Bluesky 및 X에서 우리와 연결하세요. 그리고 우리에게 ? GitHub에서! 다음에 무엇을 빌드하는지 봅시다! ?

위 내용은 React의 드래그 앤 드롭 혁명: Puck 8 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!