1.0.16 • Published 8 months ago

@qpokychuk/wc-menu v1.0.16

Weekly downloads
-
License
ISC
Repository
-
Last release
8 months ago

Web Component Menu

Простой веб компонент меню

Демонстрация

Github

Поддержать автора

Установка

npm install @qpokychuk/wc-menu
import menu from '@qpokychuk/wc-menu'
import '@qpokychuk/wc-menu/dist/index.css'

menu.register()

Использование

Меню создаются с использованием c-menu, c-menu-button, c-menu-items и c-menu-item компонентов:

  <c-menu>
    <c-menu-button>
      Menu button
    </c-menu-button>
    <c-menu-items>
      <c-menu-item>Menu item 1</c-menu-item>
      <c-menu-item>Menu item 2</c-menu-item>
      <c-menu-item>Menu item 3</c-menu-item>
    </c-menu-items>
  </c-menu>

При нажатии на c-menu-button элементы меню будут автоматически открываться и закрываться

Внутри c-menu-items не обязательно использовать c-menu-item, вы можете использовать там любой HTML. При нажатии на c-menu-item меню будет автоматически закрываться

c-menu создает и вставляет дополнительный компонент c-menu-shadow, при нажатии на который меню будет автоматически закрываться


Стилизация

В открытом состоянии компоненты c-menu, c-menu-button, c-menu-items и c-menu-shadow имеют атрибут data-active - используйте его для стилизации вашего меню

Пример с использованием tailwindcss

  <c-menu>
    <c-menu-button class="group bg-primary data-[active]:bg-secondary">
      Menu button
      <img src="chevron-right.svg" class="group-data-[active]:-rotate-90" />
    </c-menu-button>
    <c-menu-items>
      <c-menu-item>Menu item 1</c-menu-item>
      <c-menu-item>Menu item 2</c-menu-item>
      <c-menu-item>Menu item 3</c-menu-item>
    </c-menu-items>
  </c-menu>

Отступ c-menu-items регулируется через переменную --offset

При открытом меню body получает класс c-menu-opened


Позиционирование

Позиционирование применяется с помощью атрибута placement компонента c-menu-items

placement имеет следующие значения:

  • Сверху: top, top-start, top-end
  • Справа: right, right-start, right-end
  • Снизу: bottom, bottom-start, bottom-end
  • Слева: left, left-start, left-end
  • Над c-menu:
    • По центру: over
    • Сверху: over-top, over-top-start, over-top-end
    • Справа: over-right, over-right-start, over-right-end
    • Снизу: over-bottom, over-bottom-start, over-bottom-end
    • Слева: over-left, over-left-start, over-left-end

При наведении

Чтобы меню открывалось при наведении используйте атрибут action="hover" компонента c-menu

Контекстное меню

Чтобы меню открывалось как контекстное используйте атрибут action="context" компонента c-menu

Примечание

c-menu позиционируется как headless компонент т.е. предоставляет только функционал без красивых стилей. Для минимальной стилизации рекомендуется задать background, z-index, width и max-height для c-menu-items

Так же можете использовать c-menu-shadow для доп возможностей

Пример стилей:

c-menu-items {
  --offset: 8px;

  z-index   : theme('zIndex.1');
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.04);
  border    : 1px solid theme('colors.default / 5%');
  width     : 224px;
  background: theme('colors.l3');
  color     : theme('colors.default');

  transition: .25s var(--elastic, ease);

  @media (max-width:theme('screens.md')) {
    position  : fixed;
    inset     : auto 0 0 !important;
    width     : 100%;
    max-height: 400px;
    overflow  : auto;
    z-index   : theme('zIndex.4');
    transform : none;
    transition: .25s ease;
    margin    : 0 !important;
  }


  &:not([data-active]) {
    --scale: .95;

    @media (max-width:theme('screens.md')) {
      transform: translateY(20px) !important;
    }
  }
}

c-menu-shadow {
  position  : fixed;
  inset     : 0;
  z-index   : calc(theme('zIndex.4') - 1);
  background: rgba(0, 0, 0, 0.5);
  transition: .25s ease;


  @media (min-width:theme('screens.md')) {
    display: none;
  }

  &:not([data-active]) {
    pointer-events: none;
    opacity       : 0;

  }
}

body.c-menu-opened {
  @media (max-width:theme('screens.md')) {
    overflow: hidden;
  }
}
1.0.16

8 months ago

1.0.2

10 months ago

1.0.1

10 months ago

1.0.9

10 months ago

1.0.8

10 months ago

1.0.7

10 months ago

1.0.6

10 months ago

1.0.5

10 months ago

1.0.4

10 months ago

1.0.3

10 months ago

1.0.11

10 months ago

1.0.10

10 months ago

1.0.15

9 months ago

1.0.14

9 months ago

1.0.13

9 months ago

1.0.12

9 months ago

1.0.0

10 months ago