ブレイクポイント

概要

ブレイクポイントは、レスポンシブデザインなどで使用されるトークンです。

テーマに定義されているブレイクポイントはこちらです。

export const breakpoints = defineTokens.breakpoints({
  sm: "30em",
  md: "48em",
  lg: "61em",
  xl: "80em",
  "2xl": "90em",
})

カスタマイズ

• 1

  テーマを生成する

  CLIを使用してテーマを生成します。

  下記のコマンドを実行する前に、@yamada-ui/cliをインストールしてinitコマンドを実行する必要があります。詳しくは、こちらをご覧ください。

  pnpmnpmyarnbun

  pnpm yamada-cli theme
  

• 2

  トークンを変更する

  生成したテーマのtokens/breakpoints.tsを変更します。

  theme/tokens/breakpoints.ts

  import { defineTokens } from "@yamada-ui/react"
  
  export const breakpoints = defineTokens.breakpoints({
    sm: "27em", 
    md: "48em",
    lg: "61em",
    xl: "80em",
    "2xl": "90em",
  })
  

• 3

  プロバイダーを更新する

  生成したテーマをUIProviderに設定します。

  import { UIProvider } from "@workspaces/ui"
  import { theme } from "@workspace/theme"
  
  const App = () => {
    return (
      <UIProvider theme={theme}>
        <YourApplication />
      </UIProvider>
    )
  }
  

メディアクエリ

デフォルトでは、@media(max-width)のメディアクエリを用いたレスポンシブデザインを採用しています。

const config = defineConfig({ breakpoint: { direction: "up" } })

const Component: FC<{ query: string }> = ({ query }) => {
  const breakpoint = useBreakpoint()

  return (
    <Text>
      The breakpoint when using{" "}
      <Text as="span" color="info">
        {query}
      </Text>{" "}
      is "{breakpoint}".
    </Text>
  )
}

return (
  <VStack gap="md">
    <Component query="@media(max-width)" />

    <UIProvider config={config}>
      <Component query="@media(min-width)" />
    </UIProvider>
  </VStack>
)

もし、@media(min-width)のメディアクエリを採用する場合は、コンフィグのbreakpoint.directionを"up"に設定します。

• 1

  コンフィグを変更する

  生成したテーマのconfig.tsを変更します。

  theme/config.ts

  import { defineConfig } from "@yamada-ui/react"
  
  export const config = defineConfig({
    css: { varPrefix: "ui" },
    breakpoint: { direction: "up", identifier: "@media screen" }, 
    defaultColorMode: "light",
    defaultThemeScheme: "base",
    notice: { duration: 5000 },
    theme: { responsive: true },
  })
  

• 2

  プロバイダーを更新する

  生成したテーマをUIProviderに設定します。

  import { UIProvider } from "@workspaces/ui"
  import { theme, config } from "@workspace/theme"
  
  const App = () => {
    return (
      <UIProvider theme={theme} config={config}>
        <YourApplication />
      </UIProvider>
    )
  }
  

コンテナクエリ

レスポンシブデザインは、メディアクエリを使用しています。もし、コンテナクエリを使用する場合は、コンフィグのbreakpoint.identifierを"@container"に設定します。

const containerRef = useRef<HTMLDivElement>(null)
const config = defineConfig({
  breakpoint: { containerRef, identifier: "@container" },
})

const Component: FC<{ query: string }> = ({ query }) => {
  const breakpoint = useBreakpoint()

  return (
    <Text>
      The breakpoint when using{" "}
      <Text as="span" color="info">
        {query}
      </Text>{" "}
      is "{breakpoint}".
    </Text>
  )
}

return (
  <Box
    ref={containerRef}
    bg="bg.panel"
    containerType="inline-size"
    overflow="auto"
    maxW="full"
    p="md"
    resize="inline"
    w="full"
  >
    <Component query="@media(max-width)" />

    <UIProvider config={config}>
      <Component query="@container" />
    </UIProvider>
  </Box>
)