Dropdown

Dropdown Demo

Usage

HTML

<div class="dropdown-box">
  <div class="dropdown-relative">
    <div class="dropdown-label">
      <button class="btn-green">
        <span class="block truncate">@elonehoo/ui</span>
        <div class="i-carbon-chevron-down flex-shrink-0 h-5 w-5" />
      </button>
    </div>
    <div class="dropdown-content">
      <ul class="dropdown-items">
        <li class="dropdown-item">
          <div class="flex items-center gap-2 min-w-0">
            <span class="truncate">UnoCss</span>
            <span class="absolute inset-y-0 end-0 flex items-center pe-2">
              <span class="h-4 w-4 text-gray-900 dark:text-white flex-shrink-0" />
            </span>
          </div>
        </li>
        <li class="dropdown-item">
          <div class="flex items-center gap-2 min-w-0">
            <span class="truncate">@elonehoo/ui</span>
            <span class="absolute inset-y-0 end-0 flex items-center pe-2">
              <span class="i-carbon-checkmark h-4 w-4 text-gray-900 dark:text-white flex-shrink-0" />
            </span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

JSX

<div className="dropdown-box">
  <div className="dropdown-relative">
    <div className="dropdown-label">
      <button className="btn-green">
        <span className="block truncate">@elonehoo/ui</span>
        <div className="i-carbon-chevron-down flex-shrink-0 h-5 w-5" />
      </button>
    </div>
    <div className="dropdown-content">
      <ul className="dropdown-items">
        <li class="dropdown-item">
          <div class="flex items-center gap-2 min-w-0">
            <span class="truncate">UnoCss</span>
            <span class="absolute inset-y-0 end-0 flex items-center pe-2">
              <span class="h-4 w-4 text-gray-900 dark:text-white flex-shrink-0" />
            </span>
          </div>
        </li>
        <li className="dropdown-item">
          <div className="flex items-center gap-2 min-w-0">
            <span className="truncate">@elonehoo/ui</span>
            <span className="absolute inset-y-0 end-0 flex items-center pe-2">
              <span className="i-carbon-checkmark h-4 w-4 text-gray-900 dark:text-white flex-shrink-0" />
            </span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

Rules

/^dropdown-((box|relative|label|content|items|item))$/