Я пытаюсь использовать bootstrap-tour внутри углового приложения 2+, и все работает нормально, пока у меня не будет требования использовать пользовательский шаблон для шагов.
Несмотря на то, что библиотека предоставляет возможность указать шаблон с помощью опции template
, у меня возникают трудности при указании scss для того же. Это не принимает глобальные стили веб-сайта.
HTML передается в виде строки. потому что это ожидаемый доход для этого варианта
Шаблон, который я использую
export const customHtmlTemplate = `
<div class="popover">
<div class="arrow"></div>
<div class="popover-close">
<i data-role='end' class="ficon ficon-cross property-close"></i>
</div>
<h3 class="popover-title">Some default title that gets overridden</h3>
<div class="tour-popover popover-content"></div>
<div class="popover-navigation">
<button class="secondary" data-role="prev">Prev</button>
<button class="secondary" data-role="next">Next</cn-button>
<button class="primary" data-role="end"><span>Got It!</span></cn-button>
</div>
</div>
`;
Я передал его в файл машинописи
this.tour = new Tour({
debug: true,
storage: false,
delay : false,
backdrop: true,
backdropPadding : 1,
template: customHtmlTemplate,
steps: [{
element:
, но глобальные CSS и все остальное не применяются, когда компонент инициализируется и запускается при нажатии кнопки.
Любая идея, как это сделать.
Справка: http://bootstraptour.com/api/