在 Headless UI Popover.Button 右侧显示图标

Question

我正在使用 Headless Ui Popover.Button，并且我没有显示任何默认文本，因此我希望 Chevron 显示在右侧。当我选择了一个项目时它会这样做，但当盒子里没有任何东西时它不会这样做。

<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>