MenuDropdown

Visão geral

O componente LxMenuDropdown serve como um contêiner para itens de menu, permitindo que você crie menus suspensos com facilidade.

Seu funcionamento é semelhante a uma modal, sendo necessário importá-lo apenas uma vez no componente principal (uma lista, por exemplo) e definir um id para o menu, assim qualquer objeto pode ser um trigger (acionador) simplesmente inserindo o atributo 'aria-controls='id-do-dropdown-aqui'' e o componente irá automaticamente se posicionar ao lado do trigger.

O LxMenuDropdownItem é usado para definir cada item dentro do MenuDropdown. Ele permite a configuração de ações específicas para cada item, fornecendo uma interface intuitiva e responsiva para os usuários.

Esses componentes são ideais para criar menus de navegação, seletores de opções e outras funcionalidades interativas que necessitam de um menu suspenso dinâmico.

Clique para visualizar o código

<script setup>
import { LxMenuDropdownItem } from '@lde/lxcomponents';
import LxMenuDropdown from '@/components/LxMenuDropdown/LxMenuDropdown.vue';
</script>

<template>
	<div class="mb-3">
		<button class="btn btn-secondary" aria-controls="lx-menu-dropdown-example">Abrir</button>

		<LxMenuDropdown id="lx-menu-dropdown-example">
			<LxMenuDropdownItem id="lx-menu-dropdown-item-1"> Primeiro item </LxMenuDropdownItem>
			<LxMenuDropdownItem id="lx-menu-dropdown-item-2"> Segundo item </LxMenuDropdownItem>
			<LxMenuDropdownItem id="lx-menu-dropdown-item-3" disabled> Esse não da pra clicar </LxMenuDropdownItem>
			<LxMenuDropdownItem id="lx-menu-dropdown-item-4" aria-controls="lx-menu-dropdown-example"> Esse pode fechar o dropdown </LxMenuDropdownItem>
			<LxMenuDropdownItem id="lx-menu-dropdown-item-5" class="text-danger" hasDivider> Aquele perigoso </LxMenuDropdownItem>
		</LxMenuDropdown>
	</div>
</template>

Propriedades MenuDropdown

Nome	Descrição	Tipo	Padrão
id	Seletor CSS id	String	-
mobileBackdrop	MOBILE: Por padrão o menu ficará na parte inferior da tela, independente da posição do botão/trigger	Boolean	true
maxHeight	Define uma altura máxima para o popup do dropdown	String	-

Propriedades MenuDropdownItem

Nome	Descrição	Tipo	Padrão
id	Seletor CSS id	String	-
class	Caso queira personalizar o botão/trigger	String	-
hasDivider	Cria uma linha acima do item	Boolean	false
disabled	Se o mesmo será desabilitado	Boolean	false

Métodos e propriedades acessíveis pelo ref do MenuDropdown

Nome	Descrição	Tipo	Padrão
toggle	Método para abrir ou fechar o menu dropdown	Function	-
close	Método para fechar o menu dropdown	Function	true
isOpen	Estado menu dropdown (se está aberto ou fechado)	Boolean	-

Playground

MenuDropdownItem
Nome	Controle
mobileBackdrop
maxHeight
MenuDropdownItem
disabled
hasDivider
class

Clique para exibir o código

<script setup>
import { reactive } from 'vue';
import { LxMenuDropdown, LxMenuDropdownItem } from '@lde/lxcomponents';

const propsMenuDropDown = reactive({
	id: 'lx-menu-dropdown',
	mobileBackdrop: true,
	maxHeight: ''
});

const propsMenuDropDownItem = reactive({
	disabled: false,
	hasDivider: false,
	class: ''
});
</script>

<template>
	<div class="d-flex justify-content-between">
		<button class="btn btn-secondary" :aria-controls="propsMenuDropDown.id">Abrir</button>
		<button class="btn btn-default border-0" :aria-controls="propsMenuDropDown.id">Mais opções <i class="fas fa-ellipsis-v"></i></button>
	</div>
	<div class="row">
		<div class="col-12">
			<LxMenuDropdown :id="propsMenuDropDown.id" :mobileBackdrop="propsMenuDropDown.mobileBackdrop" :maxHeight="propsMenuDropDown.maxHeight">
				<LxMenuDropdownItem id="lx-menu-dropdown-item-1"> Primeiro item </LxMenuDropdownItem>
				<LxMenuDropdownItem id="lx-menu-dropdown-item-2"> Segundo item </LxMenuDropdownItem>
				<LxMenuDropdownItem
					:key="'reset-' + propsMenuDropDownItem.disabled + '-' + propsMenuDropDownItem.hasDivider + '-' + propsMenuDropDownItem.class"
					id="lx-menu-dropdown-item-3"
					:class="propsMenuDropDownItem.class"
					:disabled="propsMenuDropDownItem.disabled"
					:hasDivider="propsMenuDropDownItem.hasDivider"
				>
					Item de teste
				</LxMenuDropdownItem>
			</LxMenuDropdown>
		</div>
	</div>

	<!-- playground controls -->
	<table style="max-height: 50vh">
		<thead>
			<tr>
				<th colspan="2">MenuDropdownItem</th>
			</tr>
			<tr>
				<th style="width: 140px">Nome</th>
				<th class="">Controle</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>
					<label class="form-label m-0">mobileBackdrop</label>
				</td>
				<td>
					<input v-model="propsMenuDropDown.mobileBackdrop" class="form-check-input" type="checkbox" />
				</td>
			</tr>
			<tr>
				<td>
					<label class="form-label m-0">maxHeight</label>
				</td>
				<td>
					<input v-model="propsMenuDropDown.maxHeight" type="text" class="form-control" />
				</td>
			</tr>
		</tbody>
		<thead>
			<tr>
				<th colspan="2">MenuDropdownItem</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>
					<label class="form-label m-0">disabled</label>
				</td>
				<td>
					<input v-model="propsMenuDropDownItem.disabled" class="form-check-input" type="checkbox" />
				</td>
			</tr>
			<tr>
				<td>
					<label class="form-label m-0">hasDivider</label>
				</td>
				<td>
					<input v-model="propsMenuDropDownItem.hasDivider" class="form-check-input" type="checkbox" />
				</td>
			</tr>
			<tr>
				<td>
					<label class="form-label m-0">class</label>
				</td>
				<td>
					<input v-model="propsMenuDropDownItem.class" type="text" class="form-control" />
				</td>
			</tr>
		</tbody>
	</table>
</template>