Как создать стиль для слотов внутри шаблона в sap Spartacus - PullRequest
Новая
       52

Как создать стиль для слотов внутри шаблона в sap Spartacus

1 голос
/ 02 августа 2020

У меня есть новый шаблон LandingPage3Template. 

layoutSlots: {
  LandingPage3Template: {
    pageFold: 'Section2B',
    slots: [
      'Section2A',
      'Section2B',
      'Section2C',
      'Section1',
      'Section3',
      'Section4',
      'Section5'
    ],
  }
}

Я просто хотел дать стили для слотов. Может ли кто-нибудь помочь мне написать собственный стиль CSS, чтобы правильно его выровнять?

Я использую указанный ниже код, но он не работает. 

%cx-page-layout {
  // my code here
  width: 10%;
}

1 Ответ

1 голос
/ 02 августа 2020

спасибо за вопрос на нашем канале SO.

Имя шаблона страницы CMS (например, «LandingPage3Template») и позиции слотов (например, «Section2A») сопоставлены с классами CSS в Spartacus DOM. Это означает, что вы можете использовать чистые правила CSS для создания макета.

Имена позиций слотов страницы не обязательно уникальны для всех страниц (например, «Section2A» может также использоваться в других шаблонах страниц). Но поскольку слоты страниц вложены в шаблон страницы, вы можете создать css правил для слотов страниц, которые используются внутри данного шаблона страницы.

Следующее правило CSS показывает, как вы можете создать правило для «Section2A» внутри «LandingPage3Template». 

.LandingPage3Template .Section2A {
  width: 10%;
}

Хотя это допустимый синтаксис css и s css, в s css это будет выглядеть так: 

.LandingPage3Template {
  .Section2A {
    width: 10%;
  }
}

Обратите внимание, что процент перед селектором (например, %cx-page-layout) относится к так называемому селектору заполнителя. Это используется в Spartacus для необязательного CSS, так что только при использовании селекторов-заполнителей CSS попадает в окончательный CSS. Вы можете узнать больше о настройке CSS в Спартаке по телефону https://sap.github.io/spartacus-docs/css-architecture/.

...