SpacersJS 공식 릴리스: 1.0으로 향하는 재미있는 여정
저는 스페이서를 사용해야 하는 MightyThemes의 Elementor용 Mighty Addons 작업을 하고 있었기 때문에 웹에 있는 다른 수천 개의 라이브러리와 함께 있어야 한다고 생각되는 라이브러리를 검색하기 시작했습니다. 광범위하게 검색했지만 모두 없었습니다. 이익. 😵
Webflow, Divi 및 Brizy와 같이 스페이서를 사용했지만 오픈 소스를 유지하지 않은 페이지 빌더가 너무 많습니다.
그래서 간격을 늘리기 위해 드래그할 수 있는 요소 주위에 4개의 div만 있는 빠르고 쉬운 작업이 될 것이라고 생각하여 개발을 시작했습니다. 얼마나 힘들 수 있습니까?
약간의 BackboneJS 및 jQuery를 사용하여 Mighty Addons용 최종 Spacer를 만드는 데 1.5개월이 걸렸습니다.
그런 다음 스페이서를 위한 라이브러리가 있어야 할 때라고 생각했습니다. 따라서 BackboneJS나 jQuery 없이 VanillaJS에서 라이브러리를 만들었습니다.
최고의 사용 사례는 웹 페이지 빌더, 코드 없는 도구 및 [여기에 다른 창의적인 사용 사례 삽입 🧠]입니다.
7kb 미만의 축소된 CSS 및 JS 파일로 구성된 작은 라이브러리입니다.
이것은 나의 첫 번째 실행 가능한 JS 라이브러리이며 수행해야 할 많은 개선 사항이 있습니다. 어떤 피드백이라도 대단히 감사하겠습니다.
Spacer를 만든 방법에 대한 후속 기술 게시물이 있습니다.
실제로 / 스페이서
🔳 더 많은 __공간__이 필요할 때
스페이서
더 많은 공간이 필요할 때
데모
http://actuallyakash.github.io/spacers
패키지 관리자
# Bower bower install --save spacersjs # NPM npm install spacersjs
설정
| Option | Type | Default | Description |
|---|---|---|---|
| element | string | null | Selector on which the spacer has to be initialized |
| appendHtml | string | begin | To append spacer divs after or before the specified element. Use begin to append before the selector and end to append after the selector. |
| padding | boolean | true | To enable padding, which is default behavior |
| margin | boolean | false | To enable margin |
| onDragEnd | boolean | null | Function for using the spacer values when drag is ended |
| containedArea | object (DOM node or jQuery object) or window.document | Use if you're not able to find the element (ex- when using iframe) | |
| spacerClass | object | null | For adding custom classes in the spacers |
| defaultSpacing | string | 8px | Initial starting spacer height. |
| defaultPadding | object | null | an object with initial padding spacer top, bottom, left, right values. Overwrites the |
Check out an extensive demo of spacers.
코드 👨💻
All that is needed is just 3 lines of code to initialize spacers.
spacers({
element: '.element-unique-class'
});
더 많은 속성here .
감사합니다! 🙇♂️
수정해야 할 변경 사항이나 버그가 너무 많습니다. 문제와 피드백은 대단히 감사하며 별점도 받습니다 😀
자유롭게 프로젝트에 기여하세요!
연결
GitHub
고궁
선적 서류 비치
TL; DR
다음은 documentation and demo for the SpacersJS 입니다.
Reference
이 문제에 관하여(SpacersJS 공식 릴리스: 1.0으로 향하는 재미있는 여정), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/actuallyakash/spacersjs-official-release-fun-road-to-1-0-1j6h텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
