폴리머 요소와 함께 패 커리를 어떻게 사용할 수 있습니까?

Kingflurkel

폴리머 요소와 함께 포장재를 사용하는 방법에 대해 몇 시간 동안 찾고 있습니다. 내가 달성하고 싶은 것은 콘텐츠 목록 인 요소와 그 안에 콘텐츠 항목 인 요소입니다. 콘텐츠 항목을 "포장"하고 싶습니다.

명확히하기 위해 :

<packery-element>
<template repeat="{{item in items}}">
<content-item class="item"></content-item>
</template>
</packery-element>
토말 렉

우리는 bin-packing 알고리즘을 사용하는 자체 사용자 정의 요소를 만들었습니다. <juicy-tile-list>: http://juicy.github.io/juicy-tile-list/

그런 다음 필요한 것은 다음과 같습니다.

<link rel="import" href="../juicy-tile-list/dist/juicy-tile-list.html">
...
<juicy-tile-list>
  <div>Some</div>
  <div>tiles</div>
  <section>here</section>
</juicy-tile-list>

우리는 이것의 개발에 꽤 집중하고 있으므로 문제가 발생하면 GH 문제를 채우십시오 . 모든 피드백에 감사드립니다.

다음과 같은 몇 가지 추가 기능으로 확장했습니다 .

  • 우선 순위 항목,
  • 가상의 중첩 컨테이너로 그룹화,
  • 다른 방향 / 방향으로 정렬,
  • 동적으로 크기 변경,
  • 컨테이너 크기 자동 조정,
  • 타일 ​​사이의 간격 / 거터 / 셀 간격,
  • 창 크기 변경에 적응.

그리고 두 개의 측면 구성 요소를 만들었습니다.

또한 코드가 필요하지 않은 사람들을 위해 더 깨끗하고 빠른 코드를 위해 모든 추가 기능에서 핵심 Masonry / Packery와 같은 동작을 분리 할 계획입니다.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

커패시터와 함께 이온 저장 장치를 어떻게 사용할 수 있습니까?

분류에서Dev

linq 쿼리와 함께 메소드를 어떻게 사용할 수 있습니까?

분류에서Dev

Shadow DOM의 <content> 요소와 함께 : first-child 선택기를 어떻게 사용할 수 있습니까?

분류에서Dev

플랫리스트 데이터와 함께 useState ()를 어떻게 사용할 수 있습니까?

분류에서Dev

객체와 함께 나머지 연산자 메서드를 어떻게 사용할 수 있습니까?

분류에서Dev

sinatra와 함께 루비에서 쿼리와 같은 것을 어떻게 사용할 수 있습니까?

분류에서Dev

아도니스와 함께 nginx를 어떻게 사용할 수 있습니까?

분류에서Dev

반응 후크와 함께 Mutex를 어떻게 사용할 수 있습니까?

분류에서Dev

CatchUnwind Future와 함께 AssertUnwindSafe를 어떻게 사용할 수 있습니까?

분류에서Dev

jquery (if-else)와 함께 localstorage를 어떻게 사용할 수 있습니까?

분류에서Dev

angularJS와 함께 ajax를 어떻게 사용할 수 있습니까?

분류에서Dev

OSGI와 함께 Spring Batch를 어떻게 사용할 수 있습니까?

분류에서Dev

Swift에서 Cocoapods와 함께 Chartboost를 어떻게 사용할 수 있습니까?

분류에서Dev

"git show"와 함께 "source-highlight"를 어떻게 사용할 수 있습니까?

분류에서Dev

: not 의사 클래스와 함께 : before 의사 클래스를 어떻게 함께 사용할 수 있습니까?

분류에서Dev

내 사용자 정의 폴리머 요소에서 종이 드롭 다운 닫기 이벤트를 어떻게 처리 할 수 있습니까?

분류에서Dev

로봇 프레임 워크와 함께 페이 커를 어떻게 사용할 수 있습니까?

분류에서Dev

나중에 다른 쿼리와 함께 사용할 수있는 조인의 모든 필드를 어떻게 선택할 수 있습니까?

분류에서Dev

함께 설치되지 않은 "Ubuntu 최소 설치"패키지를 어떻게 설치할 수 있습니까?

분류에서Dev

c에서 인수와 함께 함수 포인터를 어떻게 사용할 수 있습니까?

분류에서Dev

많은 수의 요소, Java와 함께 split ()을 어떻게 사용할 수 있습니까?

분류에서Dev

핵심 데이터 요소와 함께 목록 행 확장 및 축소를 어떻게 사용할 수 있습니까?

분류에서Dev

PL / pgSQL 함수에서 IF와 함께 WITH를 어떻게 사용할 수 있습니까?

분류에서Dev

화물 설치와 함께 설치된 바이너리를 어떻게 제거 할 수 있습니까?

분류에서Dev

조인과 함께 EF Where () 절에서 식 트리를 어떻게 사용할 수 있습니까?

분류에서Dev

Ember-CLI를 통해 Ember.js와 함께 jStorage (또는 다른 외부 JS 라이브러리)를 어떻게 사용할 수 있습니까?

분류에서Dev

브리지 모드에서 여러 AP와 함께 사용중인 무선 액세스 포인트를 어떻게 확인할 수 있습니까?

분류에서Dev

이전 지원 라이브러리 및 Holo 테마와 함께 Instabug를 어떻게 사용할 수 있습니까?

분류에서Dev

현재 작업 디렉토리에없는 cabal 샌드 박스와 함께 GHC를 어떻게 사용할 수 있습니까?

Related 관련 기사

  1. 1

    커패시터와 함께 이온 저장 장치를 어떻게 사용할 수 있습니까?

  2. 2

    linq 쿼리와 함께 메소드를 어떻게 사용할 수 있습니까?

  3. 3

    Shadow DOM의 <content> 요소와 함께 : first-child 선택기를 어떻게 사용할 수 있습니까?

  4. 4

    플랫리스트 데이터와 함께 useState ()를 어떻게 사용할 수 있습니까?

  5. 5

    객체와 함께 나머지 연산자 메서드를 어떻게 사용할 수 있습니까?

  6. 6

    sinatra와 함께 루비에서 쿼리와 같은 것을 어떻게 사용할 수 있습니까?

  7. 7

    아도니스와 함께 nginx를 어떻게 사용할 수 있습니까?

  8. 8

    반응 후크와 함께 Mutex를 어떻게 사용할 수 있습니까?

  9. 9

    CatchUnwind Future와 함께 AssertUnwindSafe를 어떻게 사용할 수 있습니까?

  10. 10

    jquery (if-else)와 함께 localstorage를 어떻게 사용할 수 있습니까?

  11. 11

    angularJS와 함께 ajax를 어떻게 사용할 수 있습니까?

  12. 12

    OSGI와 함께 Spring Batch를 어떻게 사용할 수 있습니까?

  13. 13

    Swift에서 Cocoapods와 함께 Chartboost를 어떻게 사용할 수 있습니까?

  14. 14

    "git show"와 함께 "source-highlight"를 어떻게 사용할 수 있습니까?

  15. 15

    : not 의사 클래스와 함께 : before 의사 클래스를 어떻게 함께 사용할 수 있습니까?

  16. 16

    내 사용자 정의 폴리머 요소에서 종이 드롭 다운 닫기 이벤트를 어떻게 처리 할 수 있습니까?

  17. 17

    로봇 프레임 워크와 함께 페이 커를 어떻게 사용할 수 있습니까?

  18. 18

    나중에 다른 쿼리와 함께 사용할 수있는 조인의 모든 필드를 어떻게 선택할 수 있습니까?

  19. 19

    함께 설치되지 않은 "Ubuntu 최소 설치"패키지를 어떻게 설치할 수 있습니까?

  20. 20

    c에서 인수와 함께 함수 포인터를 어떻게 사용할 수 있습니까?

  21. 21

    많은 수의 요소, Java와 함께 split ()을 어떻게 사용할 수 있습니까?

  22. 22

    핵심 데이터 요소와 함께 목록 행 확장 및 축소를 어떻게 사용할 수 있습니까?

  23. 23

    PL / pgSQL 함수에서 IF와 함께 WITH를 어떻게 사용할 수 있습니까?

  24. 24

    화물 설치와 함께 설치된 바이너리를 어떻게 제거 할 수 있습니까?

  25. 25

    조인과 함께 EF Where () 절에서 식 트리를 어떻게 사용할 수 있습니까?

  26. 26

    Ember-CLI를 통해 Ember.js와 함께 jStorage (또는 다른 외부 JS 라이브러리)를 어떻게 사용할 수 있습니까?

  27. 27

    브리지 모드에서 여러 AP와 함께 사용중인 무선 액세스 포인트를 어떻게 확인할 수 있습니까?

  28. 28

    이전 지원 라이브러리 및 Holo 테마와 함께 Instabug를 어떻게 사용할 수 있습니까?

  29. 29

    현재 작업 디렉토리에없는 cabal 샌드 박스와 함께 GHC를 어떻게 사용할 수 있습니까?

뜨겁다태그

보관