@megalabs/ml-button-icon

0.0.9 • Public • Published

Button_Icon

Кнопка с иконкой - иконка может быть любая

<a href="#" class="ml-button-icon">
	<span class="ml-button-icon__icon">
		<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
			<path fill-rule="evenodd" d="M4 22h24v3H4v-3zm0-8h24v3H4v-3zm0-8h24v3H4V6z"></path>
		</svg>
	</span>
</a>

Меню вида "гамбургер"

<span onclick="this.classList.toggle('is-open')" class="ml-button-icon ml-button-icon--burger">
	<span class="ml-button-icon__icon">
		<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
			<path fill-rule="evenodd" d="M4 22h24v3H4v-3zm0-8h24v3H4v-3zm0-8h24v3H4V6z"></path>
		</svg>
		<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
			<path fill-rule="nonzero" d="M6.267 4L4 6.267 13.733 16 4 25.733 6.267 28 16 18.267 25.733 28 28 25.733 18.267 16 28 6.267 25.733 4 16 13.733z"></path>
		</svg>
	</span>
</span>

Расширенные настройки

ml-button-icon--burger используется для иконки "бургер"

класс is-open переключает иконку "бургера"" на "крестик"

npm репозиторий - [https://www.npmjs.com/package/@megalabs/ml-button-icon] (https://www.npmjs.com/package/@megalabs/ml-button-icon)

Для установки пакета

  • npm i @megalabs/ml-button-icon
  • затем в папке @megalabs/ml-button-icon запускаем npm install
  • npm start

Readme

Keywords

none

Package Sidebar

Install

npm i @megalabs/ml-button-icon

Weekly Downloads

0

Version

0.0.9

License

ISC

Unpacked Size

8.7 kB

Total Files

7

Last publish

Collaborators

  • agima
  • astranomnom
  • megalabsteam
  • moonrtv