selectbox custom Details 활용 예시

미리 보기

<details
  class="flex gap-2 border border-gray-200 rounded-md max-w-max shadow-[0px_1px_2px_0px_rgba(0,0,0,0.05)]"
>
  <summary
    class="flex w-full items-center justify-between gap-[0.6875rem]"
  >
    <div class="py-2.5 pl-3">10</div>
    <div class="pr-[0.9625rem]">
      <app-icon
        name="material-symbols:keyboard-arrow-up"
        class="h-4 w-4"
      />
    </div>
  </summary>

  <div
    class="absolute bg-white border border-gray-200 rounded-md max-w-max"
  >
    <div
      *ngFor="let item of pageAmounts"
      class="px-2 py-0.5 cursor-pointer w-full h-[2.3125rem]"
    >
      <div
        class="relative flex w-full bg-white text-gray-600 h-[2.3125rem] hover:bg-gray-100 items-center px-2 rounded-md"
      >
        {{item}}
      </div>
    </div>
  </div>
</details>