trimmings
1.0.0
웹 개발 프로세스는 뷰 디자인에 집중하고 함께 꿰매는 방법에 대한 생각을 중단 할 수있을 때 어떻게됩니까? Postlight의 트리밍은 웹 페이지에 매끄럽고 빠른 인 페이지 상호 작용 레이어를 추가하는 제로 구성 JavaScript 라이브러리입니다. 당신이해야 할 일은 이미 가지고있는 HTML에 힌트를 추가하기 만하면됩니다.
트리밍에 대한 소개에서 자세히 알아보십시오.
이 프로젝트는 터보 링크 및 자극과 같은 라이브러리의 발자취를 따릅니다. 비즈니스 및 렌더링 로직에 가장 적합한 장소는 서버에 있으며 사용자 HTML을 보내야하며 JavaScript는 점진적으로 강화 된 DOM 조작에 가장 적합하다고 생각합니다. 트리밍은 대화식 요소에 data-trimmings-* 속성을 추가하여 DOM 조작을 앱에 추가 할 수있는 일련의 패턴입니다. 프로젝트에서 자바 스크립트가 적 으면 위험이 줄어 듭니다.
웹 사이트를 구축하고 원하는 방식으로 제시된 HTML에 서비스를 제공하면 상호 작용 방식을 향상시키는 트리밍 힌트를 추가 할 수 있습니다.
아마도 당신은 모달에서 열고 싶은 세부 페이지에 대한 링크가있을 것입니다. 독립형 페이지에는 모달에 렌더링하고 싶지 않은 헤더와 바닥 글이있을 수 있습니다. 그것은 문제가되지 않습니다. 링크에 inline 힌트를 추가하십시오.
<a data-trimmings-inline="from: .detail-container, to: .modal-container" href="/photos/2">
View as a modal
</a>
방문자가 해당 링크를 클릭하면 페이지가 백그라운드에서 가져 오면 detail-container 클래스가있는 요소가 결과에서 추출되며 이미 페이지에있는 modal-container 클래스의 요소에 삽입됩니다. 당신은 당신이 좋아하는 동안이 표시를 할 CSS를 쓸 수 있습니다. 이제 당신은 모달이 있습니다! 그게 전부입니다!
<head> 에 trimmings.js 포함하십시오. 그게 다야. 페이지로드 될 때 트리밍이 자동으로 활성화됩니다. 라이프 사이클에 대해 생각할 필요가 없습니다.
<script src="/trimmings.js"></script>
트리밍 기능은 data-trimmings-* 속성을 추가하여 특정 요소에서 활성화됩니다. 각 트리밍 기능의 사용에 대한 자세한 내용은 Trimmings 핸드북을 참조하십시오.
어느 쪽에도 라이센스가 부여되었습니다
귀하의 선택에.
버그를 찾았거나 새로운 기능을 제안하고 싶다면 문제를 제출하고 그것에 대해 이야기합시다!
우리는 트리밍에 대한 모든 기여자들이 우리의 행동 강령을 준수 할 것으로 기대합니다.
귀하가 명시 적으로 명시 적으로 명시하지 않는 한, Apache-2.0 라이센스에 정의 된대로 귀하의 작업에 포함되도록 의도적으로 제출 된 기부금은 추가 이용 약관이나 조건없이 위와 같이 이중 라이센스를받습니다.
? Postlight의 친구들로부터 실험실 프로젝트. 행복한 코딩!
