Hi ! I try to transform a React Tailwind UI component to Svelte but I encounter a

Ternary Operator about svelte-headlessui HOT 4 CLOSED

TheoGegout commented on July 23, 2024

Ternary Operator

from svelte-headlessui.

Comments (4)

NoelOConnell commented on July 23, 2024

You can find an example of using the open prop to style the component in the documentation

Use a ternary here to style the button based on the open state

<Popover let:open>
  <PopoverButton
    class={open ? "popover-overlay-open" : "popover-overlay-closed"}
>
   Solutions</PopoverButton>
  <PopoverPanel>
    <!-- ... -->
  </PopoverPanel>
</Popover>

This is an example of having default classes and a class based on the open state

<Popover let:open>
  <PopoverButton
    class={`${open ? "transform rotate-180" : ""} w-5 h-5 text-purple-500`}
>
   Solutions</PopoverButton>
  <PopoverPanel>
    <!-- ... -->
  </PopoverPanel>
</Popover>

from svelte-headlessui.

TheoGegout commented on July 23, 2024

Oh okay my bad didn't see this part !
But maybe u can help me for this :

class={(open
? "border-indigo-600 text-indigo-600"
: "border-transparent text-gray-700 hover:text-gray-800",
"relative z-10 -mb-px flex items-center border-b-2 pt-px text-sm font-medium transition-colors duration-200 ease-out")}

To do is correctly I will do this :

class={open ? "border-indigo-600 text-indigo-600" : "border-transparent text-gray-700 hover:text-gray-800"}

But in my case, I don't know why there is a comma and what it's doing :

,"relative z-10 -mb-px flex items-center border-b-2 pt-px text-sm font-medium transition-colors duration-200 ease-out")}

from svelte-headlessui.

NoelOConnell commented on July 23, 2024

The comma is part of the classNames function in React which is passing in the default classes.

The syntax for Svelte would be this

<PopoverButton
    class={`${open ? "border-indigo-600 text-indigo-600" : "border-transparent text-gray-700 hover:text-gray-800"} relative z-10 -mb-px flex items-center border-b-2 pt-px text-sm font-medium transition-colors duration-200 ease-out`}
>