No code

# Dropdown Menu Component ## Purpose A dropdown menu provides a compact way to display multiple options or actions while conserving screen space. It's ideal for navigation menus, filter selections, or grouped commands in developer tools. ## Design Specifications - **Dimensions**: 200px width, 40px height (closed), variable height when open - **Colors**: - Background: #f8f9fa (light gray) - Text: #333333 (dark gray) - Hover state: #e9ecef (slightly darker gray) - Border: #ced4da (medium gray) - **Typography**: - Font: Monospace (e.g., 'Consolas', 'Courier New') - Size: 14px - Weight: Regular (400) - **Icons**: - Dropdown arrow: ▼ (Unicode: U+25BC) - Use relevant icons for menu items (e.g., gear for settings) ## Interaction Guidelines 1. Click to open/close 2. Hover effects on menu items 3. Keyboard navigation support (arrow keys, Enter to select) 4. Close on outside click or Esc key ## Accessibility Considerations - Proper ARIA labels and roles - High color contrast (4.5:1 minimum) - Keyboard focus indicators - Screen reader compatibility ## Example Use Case In an IDE, use a dropdown for: - Selecting programming language - Choosing build/run configurations - Accessing version control options ```markdown [Selected Option ▼] ├─ Option 1 ├─ Option 2 └─ Option 3 ```

A customizable input component with left and right icons, supporting various configurations and event handling. ```javascript const iconInput = (targetElement, options = {}) => { const settings = { leftIcon: null, rightIcon: null, placeholder: 'Enter text...', onInput: () => {}, onChange: () => {}, ...options }; const container = document.createElement('div'); container.className = 'icon-input-container'; const input = document.createElement('input'); input.type = 'text'; input.placeholder = settings.placeholder; input.addEventListener('input', settings.onInput); input.addEventListener('change', settings.onChange); if (settings.leftIcon) { const leftIcon = document.createElement('span'); leftIcon.className = 'icon left-icon'; leftIcon.innerHTML = settings.leftIcon; container.appendChild(leftIcon); } container.appendChild(input); if (settings.rightIcon) { const rightIcon = document.createElement('span'); rightIcon.className = 'icon right-icon'; rightIcon.innerHTML = settings.rightIcon; container.appendChild(rightIcon); } targetElement.appendChild(container); return { update: (newOptions) => { if (newOptions.leftIcon !== undefined) { const leftIcon = container.querySelector('.left-icon'); if (leftIcon) leftIcon.innerHTML = newOptions.leftIcon; } if (newOptions.rightIcon !== undefined) { const rightIcon = container.querySelector('.right-icon'); if (rightIcon) rightIcon.innerHTML = newOptions.rightIcon; } if (newOptions.placeholder !== undefined) { input.placeholder = newOptions.placeholder; } }, destroy: () => { container.remove(); } }; }; // Example usage: // iconInput(document.body, { // leftIcon: '🔍', // rightIcon: '✖️', // placeholder: 'Search...', // onInput: (e) => console.log(e.target.value) // }); ``` ### Common Adaptations: 1. **Change Icons Dynamically**: ```javascript const inputInstance = iconInput(document.body, { leftIcon: '🔍' }); inputInstance.update({ leftIcon: '📁' }); ``` 2. **Add Custom Styles**: ```javascript iconInput(document.body, { leftIcon: '🔍', rightIcon: '✖️', placeholder: 'Search...', onInput: (e) => console.log(e.target.value) }); // Add CSS: // .icon-input-container { display: flex; align-items: center; } // .icon { margin: 0 8px; } ``` 3. **Handle Icon Clicks**: ```javascript iconInput(document.body, { leftIcon: '🔍', rightIcon: '✖️', onInput: (e) => console.log(e.target.value), onChange: (e) => console.log('Changed:', e.target.value) }); // Add event listeners to icons using querySelector ```