Я нашел ответ по шаблону get из сгенерированного html в framwork7
, так что я установлю сгенерированный шаблон здесь, и вы сможете удалить или добавить любой пользовательский компонент / компонент сборки.
1) renderPage: function(){
return `<div class="page photo-browser-page photo-browser-page-dark no-toolbar" data-name="photo-browser-page">
<div class="navbar">
<div class="navbar-inner sliding">
<div class="left">
<a href="#" class="link icon-only back">
<i class="icon icon-back color-white"></i>
</a>
</div>
<div class="title">
<span class="photo-browser-current"></span>
<span class="photo-browser-of">of</span>
<span class="photo-browser-total"></span>
</div>
<div class="right"></div>
</div>
</div>
<div class="toolbar tabbar toolbar-bottom-md toolbar-hidden toolbar-transitioning">
<div class="toolbar-inner">
<a href="#" class="link photo-browser-prev">
<i class="icon icon-back color-white"></i>
</a>
<a href="#" class="link photo-browser-next">
<i class="icon icon-forward color-white"></i>
</a>
</div>
</div>
<div class="photo-browser-captions photo-browser-captions-dark">
</div>
<div class="photo-browser-swiper-container swiper-container swiper-container-virtual swiper-container-horizontal swiper-container-rtl swiper-container-android">
<div class="photo-browser-swiper-wrapper swiper-wrapper">
<div class="photo-browser-slide photo-browser-slide-lazy swiper-slide swiper-slide-prev"
data-swiper-slide-index="0">
<div class="preloader swiper-lazy-preloader color-white">
<span class="preloader-inner">
<span class="preloader-inner-gap"></span>
<span class="preloader-inner-left">
<span class="preloader-inner-half-circle"></span>
</span>
<span class="preloader-inner-right">
<span class="preloader-inner-half-circle"></span>
</span>
</span>
</div>
<span class="swiper-zoom-container"></span>
</div>
<div class="photo-browser-slide swiper-slide swiper-slide-active" data-swiper-slide-index="0">
<span class="swiper-zoom-container"></span>
</div>
<div class="photo-browser-slide photo-browser-slide-lazy swiper-slide swiper-slide-next"
data-swiper-slide-index="1">
<div class="preloader swiper-lazy-preloader color-white">
<span class="preloader-inner">
<span class="preloader-inner-gap"></span>
<span class="preloader-inner-left">
<span class="preloader-inner-half-circle"></span>
</span>
<span class="preloader-inner-right">
<span class="preloader-inner-half-circle"></span>
</span>
</span>
</div>
<span class="swiper-zoom-container"></span>
</div>
</div>
</div>
</div>`;
}
2) /* If you need to render template as a popup */ renderPopup: function(){
return `<div class="popup photo-browser-popup">
<div class="photo-browser photo-browser-dark">
<div class="view">
<div class="page photo-browser-page photo-browser-page-dark no-toolbar ct-popup-browser" data-name="photo-browser-page">
<div id="ct-popup-browser-inner">
<div class="navbar">
<div class="navbar-inner sliding">
<div class="left">
<a href="#" class="link popup-close icon-only" data-popup=".photo-browser-popup">
<i class="icon icon-back color-white"></i>
</a>
</div>
<div class="title">
<span class="photo-browser-current"></span>
<span class="photo-browser-of">${getTranslationOrKey('of')}</span>
<span class="photo-browser-total"></span>
</div>
<div class="right pd-lr-16">${dim}</div>
</div>
</div>
<div class="toolbar tabbar toolbar-bottom-md">
<div class="toolbar-inner">
<a href="#" class="link photo-browser-prev swiper-button-disabled" tabindex="0"
role="button"
aria-label="Previous slide" aria-disabled="true">
<i class="icon icon-back color-white"></i>
</a>
<a href="#" class="link photo-browser-next" tabindex="0" role="button"
aria-label="Next slide"
aria-disabled="false">
<i class="icon icon-forward color-white"></i>
</a>
</div>
</div>
<div class="photo-browser-captions photo-browser-captions-dark"></div>
<div class="photo-browser-swiper-container swiper-container swiper-container-virtual swiper-container-horizontal swiper-container-rtl swiper-container-android">
<div class="photo-browser-swiper-wrapper swiper-wrapper">
<div class="photo-browser-slide swiper-slide swiper-slide-active"
data-swiper-slide-index="0">
<span class="swiper-zoom-container"></span>
</div>
<div class="photo-browser-slide photo-browser-slide-lazy swiper-slide swiper-slide-next"
data-swiper-slide-index="1">
<div class="preloader swiper-lazy-preloader color-white">
<span class="preloader-inner">
<span class="preloader-inner-gap"></span>
<span class="preloader-inner-left">
<span class="preloader-inner-half-circle"></span>
</span>
<span class="preloader-inner-right">
<span class="preloader-inner-half-circle"></span>
</span>
</span>
</div>
<span class="swiper-zoom-container"></span>
</div>
</div>
<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
</div>
</div>
</div>
</div>
</div>
</div>`;
},