0.0.9 • Published 6 years ago
@megalabs/ml-modal v0.0.9
Modal Type 1
Текстовый блок с кнопкой
<div class="ml-modal1">
<span class="ml-modal1__close">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
<path d="M10 9.265L15.2651 4 16 4.735 10.735 10 16 15.265l-.7349.735L10 10.735 4.7349 16 4 15.265 9.265 10 4 4.735 4.7349 4 10 9.265z"></path>
</svg>
</span>
<div class="ml-modal1__body">
<h4>Title H4</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.</p>
<a href="#" class="ml-button ml-button--wide">Button</a>
</div>
</div>
Modal Type 2
Текстовый блок с кнопкой и пагинатором
<div class="ml-modal2">
<div class="ml-modal2__body">
<h4>Title H4</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="ml-modal2__nav">
<div class="ml-modal2__dots">
<div class="ml-pagination">
<span class="ml-pagination__item is-active"></span>
<span class="ml-pagination__item"></span>
<span class="ml-pagination__item"></span>
<span class="ml-pagination__item"></span>
</div>
</div>
<div class="ml-modal2__next">
<a href="#" class="ml-button ml-button--wide">Next</a>
</div>
</div>
</div>
</div>
Modal Type 3
Текстовый блок с выпадающим списком и картинкой
<div class="ml-modal3">
<span class="ml-modal3__service">
Service
</span>
<span class="ml-modal3__new">
new
</span>
<div class="ml-modal3__body">
<h5>Text H5</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<img src="http://via.placeholder.com/352x120" alt="" class="ml-modal3__image">
</div>
</div>
npm репозиторий - https://www.npmjs.com/package/@megalabs/ml-modal
Для установки пакета
- npm i @megalabs/ml-modal
- затем в папке @megalabs/ml-modal запускаем npm install
- npm start