랩퍼 div / 컨테이너를 만들어 슬롯의 CMS 구성 요소를 그룹화하는 방법이 있습니까?

debugcn 에 게시 Dev

다 미아오

설계 상 여러 페이지에 시각적으로 그룹화 된 CMS 구성 요소가 있습니다. CSS를 추가하고 시각적으로 하나의 엔티티처럼 보이게하려면 특정 구성 요소 그룹 주위에 일종의 래퍼 div 또는 컨테이너가 필요합니다. 우리는 슬롯 스타일링을 시도했지만 이것은 결코 좋은 해결책이 아닙니다. 이를 달성 할 수있는 방법에 대한 제안이 있습니까?

tobi-or-not-tobi

저는 다양한 방법을 생각할 수 있습니다. 모두 장단점과 한계가 있습니다. 이러한 전략을 결합하여 최적화 된 조합을 만들 수도 있습니다.

이를 구현하는 가장 쉬운 방법은 표준 CSS 선택기를 사용하는 것입니다. 형제 선택자, 마지막 유형 선택자와 같이 사용할 수있는 다양한 선택자가 있습니다.
구성 요소에 대한 특정 슬롯을 사용하여 그룹화에 맞게 CMS 구조를 변경합니다. 이 접근 방식을 사용하면 페이지 슬롯 위치 기반 CSS 선택기를 사용하여 레이아웃에 영향을 줄 수 있습니다. 여기서 단점은 페이지 슬롯이 덜 유연하고 "그룹"의 일부가되고 싶지 않은 추가 구성 요소를 포함 할 수 없다는 것입니다.
컴포넌트를 소위 컨테이너 컴포넌트로 결합 할 수 있습니다. 컨테이너 구성 요소에는 포함 된 구성 요소 목록이 있습니다. 장점은 컨테이너 구성 요소가 다른 방식으로 렌더링 될 수있는 그룹화되지 않은 구성 요소 형제를 가질 수 있다는 것입니다.
마지막 수단은 Spartacus의 페이지 레이아웃 / 페이지 슬롯 구성 요소를 다시 작성하고 조건부로 특정 DOM을 추가하는 것입니다. 이것은 낮은 수준의 변경이며 더 많은 작업을 유발하고 표준 구현에서 탈선합니다.

이것이 아이디어를 얻을 수 있기를 바랍니다. 그렇지 않다면 더 자세한 정보를 제공해야합니다.

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

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

에서 수정2021-04-2

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사

랩퍼 div / 컨테이너를 만들어 슬롯의 CMS 구성 요소를 그룹화하는 방법이 있습니까?

랩퍼 div / 컨테이너를 만들어 슬롯의 CMS 구성 요소를 그룹화하는 방법이 있습니까?

ColoredCheckbox 구성 요소를 만드는 방법이 있습니까?

부트 스트랩 datepicker의 컨테이너를 활성화하여 특정 요소에 추가하는 방법은 무엇입니까?

슬롯 내의 구성 요소 내에서 구성 요소를 사용하십시오 ... 다른 단어를 사용하는 방법을 모릅니다.

div 컨테이너를 화면의 전체 높이로 만드는 방법은 무엇입니까?

div 내부의 요소가 컨테이너 크기를 무시하고 대신 컨테이너를 스크롤 가능하게 만듭니다.

테두리가있는 테이블과 같은 div 요소를 어떻게 만들 수 있습니까?

부트 스트랩 그리드는 div 컨테이너를 벗어납니다.

콘텐츠 래퍼의 동적 높이가있는 컨테이너 하단에 div를 넣습니다.

n 개의 숫자로 구성된 슬롯이 있다면 x는 어느 것에 들어 갈까요?

템플릿 구성 요소 / 페이지를 사용하여 Gatsby로 동적 슬러그를 만드는 방법이 있습니까?

ExtJS : 상위 컨테이너 내에서 구성 요소를 최대화하는 방법은 무엇입니까?

웹 구성 요소에서 프로그래밍 방식으로 요소를 슬롯 할 수 있습니까?

vuejs의 사용자 정의 테이블 구성 요소에서 슬롯 / 스코프 슬롯을 사용하는 방법은 무엇입니까?

STL 호환 컨테이너를 작성하는 방법은 있지만 크기를 알 수 없습니까?

Spartacus는 화면에 렌더링 할 슬롯 및 구성 요소의 순서를 어떻게 결정합니까?

Swing에서이 구성 요소를 어떻게 만들 수 있습니까?

컨테이너를 만들 때 Docker에서 로그 크기를 늘리는 방법이 있습니까?

이 구성 요소를 컨테이너에 의해 렌더링되는 구성 요소로 분할하고 싶습니다.

컨테이너 (정사각형)에있는 div의 맨 아래에 요소를 잠그는 방법은 무엇입니까?

div 요소의 높이를 강제하는 방법이 있습니까?

div 컨테이너의 높이를 설정하면 div 내부 클릭이 비활성화됩니까?

Div는 컨테이너의 전체 높이를 차지하지만 바닥에 머물러 있습니다.

여러 번 사용하기 위해 컨테이너 구성 요소를 만드는 방법은 무엇입니까?

어떻게 든 내 서블릿 컨테이너의 스레드 관리를 구성 할 수 있습니까?

산출 된 구성 요소의 has-block이 비어 있는지 알 수있는 방법이 있습니까?

컨테이너를 드래그 가능하게 만들 수 있습니까? jsplumb

이미 컨테이너에있는 경우 요소를 드래그 및 드롭 가능하게 만들 수있는 방법은 무엇입니까?

JavaScript에서 appendChild ()를 사용하여 하나의 div 컨테이너를 다른 div 컨테이너에 추가하는 방법은 무엇입니까?

BoxLayout으로 컨테이너 내부의 구성 요소 크기를 설정하는 방법