Luna docs

Appearance

Меню ​

Для создания меню используйте иерархию из интерфейсов DropDownGroupOption и DropDownOption

vue
<script setup lang="ts">
import type { DropDownGroupOption } from "luna";
import { ref } from "vue";

const menuOptions = ref<Array<DropDownGroupOption>>([
  {
    id: 'base',
    label: 'Основное',
    options: [
      {
        id: 3,
        label: 'Действие',
        cb() {
          console.log('action!')
        },
        iconName: 'icon-power'
      },
      {
        id: 4,
        label: 'Действие 2',
        cb() {
          console.log('action 2!')
        },
        iconName: 'icon-power'
      },
      {
        id: 1,
        label: 'Ссылка',
        href: '#',
        title: 'Всплывающая подсказка',
        iconName: 'icon-link'
      },
      {
        id: 2,
        label: 'Ссылка',
        href: '#',
        title: 'Всплывающая подсказка',
        iconName: 'icon-link'
      },
      {
        id: 5,
        label: 'Вложенное меню',
        children: [
            {
              id: 'advanced',
              options: [
                  {
                    id: 1,
                    label: 'Действие',
                    cb() {
                      console.log('action!')
                    },
                    iconName: 'icon-power'
                  },
                  {
                    id: 2,
                    label: 'Действие 2',
                    cb() {
                      console.log('action 2!')
                    },
                    iconName: 'icon-power'
                  }
              ]
            }
        ]
      }
    ]
  }
]);
</script>

Выпадающее меню ​

vue
<script setup lang="ts">
import { DropDownButton } from 'luna';
</script>
<template>
  <DropDownButton :options="menuOptions" :toggleIcon="false"
                   class="button button-icon icon-dots">
  </DropDownButton>
</template>
Параметры DropDownButton

group?: string - имя группы. Если кнопок несколько, то при наведении мыши будут раскрываться меню с той же группой

toggleIcon?: boolean - показывать иконку состояния. По умолчанию true

fixed?: boolean - позиционирование меню, по умолчанию true. Если указать false то будет position: absolute

maxWidth?: number - максимальная ширина меню, по умолчанию 360

align?: 'auto' | 'left' | 'right' - в какую сторону раскрывать вложенные меню. По умолчанию auto

options: Array, Function - список Array<DropDownGroupOption> или функция, которая возвращает Array<DropDownGroupOption>

cacheOptions?: boolean - кешировать опции(если заданы как функция), по умолчанию true

zIndex?: number|'auto' - задать z-index для меню, по умолчанию auto

offset?: {x: number, y: number} - смещение меню, относительно родителя

layerClass?: string - добавить класс к всплывающему меню

disabled?: boolean - отключить меню

busy? boolean - добавить режим ожидания к меню

Группа кнопок ​

vue
<script setup lang="ts">
import { ButtonsGroupComponent } from 'luna';
</script>
<template>
  <ButtonsGroupComponent :options="menuOptions" :toggleIcon="false"
                         :max="2" more-label="Еще...">
  </ButtonsGroupComponent>
</template>
Еще...
Параметры ButtonsGroupComponent

options: Array - список Array<DropDownGroupOption> для построения группы кнопок

group?: string - имя группы. Если кнопок несколько, то при наведении мыши будут раскрываться меню с той же группой

max? number - максимальное кол-во кнопок, остальное будет свернуть в последнюю кнопку. По умолчанию 3

moreLabel?: string - заголовок для кнопки "еще". По умолчанию ...

maxWidth?: number - максимальная ширина меню, по умолчанию 300

zIndex?: number|'auto' - задать z-index для меню, по умолчанию auto