Невозможно использовать компонент predix px-button-group-design - PullRequest
Новая
       48

Невозможно использовать компонент predix px-button-group-design

0 голосов
/ 30 октября 2018

Я использую компонент дизайна px-button-group согласно документации https://www.predix -ui.com / # / css / visual / buttons / px-button-group-design я установил компонент, который использую predix webapp starter (версия 1.0.46) в качестве справочного приложения в моем приложении.

на моем уровне проекта у нас есть index-inline.scss и seed-theme.scss, а также у нас есть файлы scss внутри папки элементов, например, внутри папки seed-app у нас есть seed-app.scss под нижним колонтитулом, который мы имеем seed-footer.scss.

для нашего проекта мы создали еще несколько пользовательских полимерных элементов в той же папке элементов. у нас есть rmd-view.html в папке views, внутри rmd-view мы используем эти пользовательские полимерные элементы, которые мы создали, например, rotor-view и т. д., а также мы используем тот же seed-app.html для навигации по странице .

в rotor-view мы хотим использовать компонент дизайна px-button-group для того, чтобы я установил компонент и использовал приведенный ниже код в index-inline.scss на уровне объектов (согласно https://github.com/predixdesignsystem/px-getting-started#import-order) 

$inuit-btn-group-background : #09819c;
$inuit-btn-disabled-border : true;
@import "px-button-group-design/_objects.button-group.scss";

и включенный код px-butto-group, как показано ниже в rotor-view.html 

<div class="btn-group">
  <input id="id1" name="btn-group" type="radio">
  <label for="id1" class="btn">Label 1</label>
  <input id="id2" name="btn-group" type="radio">
  <label for="id2" class="btn">Label 2</label>
</div>

но это не сработало, затем я попытался использовать импорт в seed-app.scss, затем я также не сработал, а затем попытался создать новый файл scss с именем rotor-view.scss внутри папки rotor-view (которая находится внутри элементов папка) Это также не работает для всех вышеперечисленных случаев. Я получаю кнопку html radion, которую не применяет css для группы кнопок.

для тестирования я попытался использовать html-код px-button-group-design в моем seed-app.html, тогда я получаю правильную кнопку, но хочу использовать в режиме просмотра ротора, похоже, что я не использую импорт scss на правильное место.

Может кто-нибудь предложить мне, если я хочу использовать px-button-group-design в rotor-view. в каком файле scss я должен импортировать группу кнопок scss ??

1 Ответ

0 голосов
/ 31 октября 2018

Если вы хотите использовать группу px-button-group в компоненте seed-app.html, добавьте ее в файл .scss, который генерирует стили для компонента seed-app.html. Если вы хотите использовать группу px-button в группе px-button в дочернем компоненте, то добавьте ее в файл .scss, который генерирует стили для этого компонента. Не забудьте импортировать стили с помощью

<link rel="import" href="../my-styles.html">

А также включить стили в DOM с

<style include="my-styles"></style>

Надеюсь, это поможет.

...