Closed4ヶ月前にクローズ2

Ark-uiとNextJSとtailwindCSSでいろいろやってみる

Next.js

React

Tailwind CSS

Ark UI

かいと

Ark-uiのMenuにおいて、オープンクローズに合わせて、ボタンの表示を変えたい

使いたいComponent

Example

menu.tsx

import { Menu } from '@ark-ui/react'

export const Basic = () => (
  <Menu.Root>
    <Menu.Trigger>
      Open menu <Menu.Indicator>➡️</Menu.Indicator>
    </Menu.Trigger>
    <Menu.Positioner>
      <Menu.Content>
        <Menu.Item value="react">React</Menu.Item>
        <Menu.Item value="solid">Solid</Menu.Item>
        <Menu.Item value="vue">Vue</Menu.Item>
      </Menu.Content>
    </Menu.Positioner>
  </Menu.Root>
)

かいと

Trigger menu.ts

<Menu.Trigger>
      Open menu <Menu.Indicator>➡️</Menu.Indicator>
</Menu.Trigger>

tailwindcssで、以下のようにdata-[state=open]ordata-[state=closed]を見てあげるとよさそう。

change-button.ts

<Menu.Indicator className='data-[state=open]:hidden'>
    OPEN
</Menu.Indicator>
<Menu.Indicator className='data-[state=closed]:hidden'>
    CLOSE
</Menu.Indicator>

このスクラップは4ヶ月前にクローズされました