在无头UI Popover.Button的右侧显示图标

Question

我使用的是Headless Ui Popover.Button，并且我没有显示任何默认文本，所以我希望V形显示在右边。当我选择了一个项目，而不是框中没有任何内容时，它会这样做。

<Popover.Button className="flex justify-between w-60 text-sm font-bold uppercase items-center h-14 px-4 border-t border-b border-black rounded-none">
        {
          types.map((type) => (type.isSelected ? type.name : ''))
        }
        
        {open ? (
          <ChevronUpIcon className="h-5 w-5 text-black" />
        ) : (
           
          <ChevronDownIcon className="h-5 w-5 text-black" />
          
        )}
      </Popover.Button>

如果我将justify-between改为justify-end，它会移动它，但随后选定的文本也会向右移动。

任何帮助都是最好的。

谢谢

Answer 1

只需将第一部分包装在另一个div中即可。

<div>
    {
        types.map((type) => (type.isSelected ? type.name : ''))
    }
</div>

​

var checkbox = document.querySelector("input");
var buttonText = document.querySelector("#buttonText");
checkbox.addEventListener('change', (event) => {
  if (event.currentTarget.checked) {
    buttonText.innerHTML = "Item 1"
  } else {
    buttonText.innerHTML = ""
  }
})

<link href="https://unpkg.com//tailwindcss@2.1.1/dist/tailwind.min.css" rel="stylesheet" />

<button class="flex justify-between w-60 text-sm font-bold uppercase items-center h-14 px-4 border-t border-b border-black rounded-none">
  <div id="buttonText">
  </div>
  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
  </svg>
</button>

<input type="checkbox" class="mt-4">Item 1</input>

​