👌

ChakraUIのTabsのorientationはobjectでresponsive style指定ができないらしい

2024/01/02に公開

<Tabs index={selectedTabIndex} orientation={{base:"horizontal", md: "vertical"}}>
とか
<Tabs index={selectedTabIndex} orientation={["horizontal","vertical"]}>
みたいな書き方をするとなぜか動かない。

なのでuseBreakpointValueをつかって以下のように指定するしかない。

  const tabOrientation = useBreakpointValue(
    {
      base: 'horizontal',
      md: 'vertical',
    },
    {
      fallback: 'md',
    },
  )
	
<Tabs index={selectedTabIndex} orientation={tabOrientation}>

Discussion