Techit: Techit moved page Thawia.ng:Components/Dropdown to User:Techit/Web/Components/Dropdown without leaving a redirect

2025-06-01T10:46:24Z

Techit moved page Thawia.ng:Components/Dropdown to User:Techit/Web/Components/Dropdown without leaving a redirect

← Older revision		Revision as of 17:46, 1 June 2025
(No difference)

Techit: change example image width

2025-05-31T11:03:57Z

change example image width

← Older revision		Revision as of 18:03, 31 May 2025
Line 1:		Line 1:
	[[Image:Thawiang-dropdown.png\|thumb\|~~135px~~\|thawia.ng web drop-down list or dropdown menu with generic actions]]		[[Image:Thawiang-dropdown.png\|thumb\|195px\|thawia.ng web drop-down list or dropdown menu with generic actions]]

	'''Dropdown''' is a menu used to display actions or links when clicking on an element.		'''Dropdown''' is a menu used to display actions or links when clicking on an element.

Techit: added example

2025-05-31T11:02:58Z

added example

← Older revision		Revision as of 18:02, 31 May 2025
Line 1:		Line 1:
			[[Image:Thawiang-dropdown.png\|thumb\|135px\|thawia.ng web drop-down list or dropdown menu with generic actions]]

	'''Dropdown''' is a menu used to display actions or links when clicking on an element.		'''Dropdown''' is a menu used to display actions or links when clicking on an element.

			=== Usage ===
			idk you are on your own (jk ill write better one later) but heres the example
			<pre>
			<template>
			<div class="cont">
			<section class="wrap">
			<div class="h-64"></div>
			<TDropdown
			:dropdowns="dropdownData"
			@item-click="handleItemClick"
			@dropdown-open="handleDropdownOpen"
			@dropdown-close="handleDropdownClose"
			/>
			<TDropdown
			:dropdowns="dropdownData"
			@item-click="handleItemClick"
			@dropdown-open="handleDropdownOpen"
			@dropdown-close="handleDropdownClose"
			/>
			<TDropdown
			:dropdowns="dropdownData"
			@item-click="handleItemClick"
			@dropdown-open="handleDropdownOpen"
			@dropdown-close="handleDropdownClose"
			/>
			<TDropdown
			:dropdowns="dropdownData"
			@item-click="handleItemClick"
			@dropdown-open="handleDropdownOpen"
			@dropdown-close="handleDropdownClose"
			/>
			</section>
			</div>
			</template>

			<script setup>
			const dropdownData = ref([
			{
			id: 'actions',
			label: 'Actions',
			items: [
			{
			id: 'edit',
			label: 'Edit',
			icon: 'fas fa-edit',
			disabled: false
			},
			{
			id: 'copy',
			label: 'Copy',
			icon: 'fas fa-copy'
			},
			{
			},
			{
			id: 'delete',
			label: 'Delete',
			icon: 'fas fa-trash',
			disabled: true
			}
			]
			}
			])

			const hoverDropdowns = ref([
			{
			id: 'nav-menu',
			label: 'Navigation',
			hover: true,
			items: [
			{ id: 'home', label: 'Home' },
			{ id: 'about', label: 'About' },
			{ id: 'contact', label: 'Contact' }
			]
			}
			])
			const handleItemClick = (data) => {
			console.log('Item clicked:', data)
			if (data.item.id === 'profile') {
			navigateTo('/profile')
			} else if (data.item.id === 'logout') {
			console.log('Logging out...')
			}
			}

			const handleDropdownOpen = (index) => {
			console.log('Dropdown opened:', index)
			}

			const handleDropdownClose = (index) => {
			console.log('Dropdown closed:', index)
			}

			const addDropdownItem = (dropdownIndex, newItem) => {
			dropdownData.value[dropdownIndex].items.push(newItem)
			}

			const removeDropdownItem = (dropdownIndex, itemId) => {
			const dropdown = dropdownData.value[dropdownIndex]
			dropdown.items = dropdown.items.filter(item => item.id !== itemId)
			}
			</script>
			</pre>

Techit: added hierarchy

2025-05-31T10:58:08Z

added hierarchy

New page

'''Dropdown''' is a menu used to display actions or links when clicking on an element.

User:Techit/Web/Components/Dropdown - Revision history

Techit: Techit moved page Thawia.ng:Components/Dropdown to User:Techit/Web/Components/Dropdown without leaving a redirect

Techit: change example image width

Techit: added example

Techit: added hierarchy