Skip to content

Commit 8846fc2

Browse files
OhsweddOhswedd
committed
Stable Dropdown Component Release
1 parent 04bd236 commit 8846fc2

File tree

4 files changed

+200
-272
lines changed

4 files changed

+200
-272
lines changed

‎demo.html‎

Lines changed: 23 additions & 109 deletions
Original file line numberDiff line numberDiff line change
@@ -366,119 +366,33 @@ <h2 class="font-lg text-primary my-4">DateTime Picker Component Showcase</h2>
366366
<section class="p-4 bg-neutral-50 shadow-md rounded my-6">
367367
<h2 class="font-lg text-primary my-4">Dropdown Component Showcase</h2>
368368

369-
<!-- Primary Dropdown -->
370-
<div class="dropdown" data-variant="primary">
371-
<button class="dropdown-trigger" aria-haspopup="true" aria-expanded="false">
372-
Primary Dropdown
373-
</button>
374-
<div class="dropdown-menu" role="menu">
375-
<div class="dropdown-item" tabindex="0" role="menuitem">Option 1</div>
376-
<div class="dropdown-item" tabindex="0" role="menuitem">Option 2</div>
377-
<div class="dropdown-item" tabindex="0" role="menuitem">Option 3</div>
378-
</div>
379-
</div>
380-
381-
<!-- Warning Dropdown -->
382-
<div class="dropdown" data-variant="warning">
383-
<button class="dropdown-trigger" aria-haspopup="true" aria-expanded="false">
384-
Warning Dropdown
385-
</button>
386-
<div class="dropdown-menu" role="menu">
387-
<div class="dropdown-item" tabindex="0" role="menuitem">Option A</div>
388-
<div class="dropdown-item" tabindex="0" role="menuitem">Option B</div>
389-
<div class="dropdown-item" tabindex="0" role="menuitem">Option C</div>
390-
</div>
391-
</div>
392-
393-
<!-- Info Dropdown -->
394-
<div class="dropdown" data-variant="info">
395-
<button class="dropdown-trigger" aria-haspopup="true" aria-expanded="false">
396-
Info Dropdown
397-
</button>
398-
<div class="dropdown-menu" role="menu">
399-
<div class="dropdown-item" tabindex="0" role="menuitem">Option X</div>
400-
<div class="dropdown-item" tabindex="0" role="menuitem">Option Y</div>
401-
<div class="dropdown-item" tabindex="0" role="menuitem">Option Z</div>
402-
</div>
403-
</div>
404-
405-
<!-- Success Dropdown -->
406-
<div class="dropdown" data-variant="success">
407-
<button class="dropdown-trigger" aria-haspopup="true" aria-expanded="false">
408-
Success Dropdown
409-
</button>
410-
<div class="dropdown-menu" role="menu">
411-
<div class="dropdown-item" tabindex="0" role="menuitem">Success 1</div>
412-
<div class="dropdown-item" tabindex="0" role="menuitem">Success 2</div>
413-
<div class="dropdown-item" tabindex="0" role="menuitem">Success 3</div>
414-
</div>
415-
</div>
416-
417-
<!-- Danger Dropdown -->
418-
<div class="dropdown" data-variant="danger">
419-
<button class="dropdown-trigger" aria-haspopup="true" aria-expanded="false">
420-
Danger Dropdown
421-
</button>
422-
<div class="dropdown-menu" role="menu">
423-
<div class="dropdown-item" tabindex="0" role="menuitem">Alert 1</div>
424-
<div class="dropdown-item" tabindex="0" role="menuitem">Alert 2</div>
425-
<div class="dropdown-item" tabindex="0" role="menuitem">Alert 3</div>
369+
<!-- Example Dropdown over Kroma Avatar -->
370+
<div class="kroma-dropdown" data-variant="primary" data-position="bottom">
371+
<div class="kroma-dropdown-trigger">
372+
<div class="kroma-avatar">
373+
<img src="https://via.placeholder.com/40" alt="Avatar">
426374
</div>
375+
</div>
376+
<div class="kroma-dropdown-menu">
377+
<div class="kroma-dropdown-item">Profile</div>
378+
<div class="kroma-dropdown-item">Settings</div>
379+
<div class="kroma-dropdown-item">Logout</div>
380+
</div>
427381
</div>
428-
429-
<!-- Accent Dropdown -->
430-
<div class="dropdown" data-variant="accent">
431-
<button class="dropdown-trigger" aria-haspopup="true" aria-expanded="false">
432-
Accent Dropdown
433-
</button>
434-
<div class="dropdown-menu" role="menu">
435-
<div class="dropdown-item" tabindex="0" role="menuitem">Special 1</div>
436-
<div class="dropdown-item" tabindex="0" role="menuitem">Special 2</div>
437-
<div class="dropdown-item" tabindex="0" role="menuitem">Special 3</div>
438-
</div>
382+
383+
<!-- Example Dropdown over Button -->
384+
<div class="kroma-dropdown" data-variant="primary" data-on-hover="true">
385+
<div class="kroma-dropdown-trigger">
386+
<button class="kroma-btn" data-variant="primary">Menu</button>
387+
</div>
388+
<div class="kroma-dropdown-menu">
389+
<div class="kroma-dropdown-item">Option 1</div>
390+
<div class="kroma-dropdown-item">Option 2</div>
391+
<div class="kroma-dropdown-item">Option 3</div>
392+
</div>
439393
</div>
394+
440395

441-
<!-- Mega Menu Dropdown -->
442-
<div class="dropdown" data-variant="primary" data-type="mega-menu">
443-
<button class="dropdown-trigger" aria-haspopup="true" aria-expanded="false">
444-
Mega Menu Dropdown
445-
</button>
446-
<div class="dropdown-menu" role="menu">
447-
<div class="mega-menu-group">
448-
<h3 class="mega-menu-title">Category 1</h3>
449-
<div class="mega-menu-item" tabindex="0" role="menuitem">
450-
<span class="mega-menu-item-icon">📁</span>
451-
Item 1
452-
</div>
453-
<div class="mega-menu-item" tabindex="0" role="menuitem">
454-
<span class="mega-menu-item-icon">📁</span>
455-
Item 2
456-
</div>
457-
</div>
458-
<div class="mega-menu-group">
459-
<h3 class="mega-menu-title">Category 2</h3>
460-
<div class="mega-menu-item" tabindex="0" role="menuitem">
461-
<span class="mega-menu-item-icon">📊</span>
462-
Item A
463-
</div>
464-
<div class="mega-menu-item" tabindex="0" role="menuitem">
465-
<span class="mega-menu-item-icon">📊</span>
466-
Item B
467-
</div>
468-
</div>
469-
<div class="mega-menu-group">
470-
<h3 class="mega-menu-title">Category 3</h3>
471-
<div class="mega-menu-item" tabindex="0" role="menuitem">
472-
<span class="mega-menu-item-icon">🔗</span>
473-
Link 1
474-
</div>
475-
<div class="mega-menu-item" tabindex="0" role="menuitem">
476-
<span class="mega-menu-item-icon">🔗</span>
477-
Link 2
478-
</div>
479-
</div>
480-
</div>
481-
</div>
482396
</section>
483397

484398
<section class="p-4 bg-neutral-50 shadow-md rounded my-6">

0 commit comments

Comments
 (0)