Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.6.3

レスポンシブスタイル

Yamada UIは、すぐに使えるレスポンシブスタイルをサポートしています。スタイルのpropsにオブジェクトを渡すだけでPCファーストのレスポンシブスタイルに対応します。

ブレイクポイントについて

レスポンシブスタイルは、テーマで定義されたブレイクポイントを参照します。Yamada UIには、デフォルトのテーマがあり、ブレイクポイントが定義されています。

実際に定義されている値はこちらです。

breakpoints.ts

export const breakpoints = {
  sm: "30em", // 480px
  md: "48em", // 768px
  lg: "61em", // 976px
  xl: "80em", // 1280px
  "2xl": "90em", // 1440px
}
Copied!

レスポンシブスタイルの構文

レスポンシブスタイルを設定する場合は、スタイルのpropsにオブジェクトを渡すだけでPCファーストのレスポンシブスタイルに対応します。

  • オブジェクトのキーは、テーマのブレイクポイントで設定されているキーを定義します。
  • オブジェクトの値は、キーで設定するスタイルの値を定義します。

編集可能な例

<Box
  w="full"
  p="md"
  bg={{ base: "primary", "2xl": "secondary", xl: "warning", lg: "danger" }}
  color="white"
>
  This is Box
</Box>
Copied!

上記のコードは、次のようなCSSが生成されます。

.Box {
  background: var(--ui-colors-primary);


  @media screen and (max-width: 1440px) {
    background: var(--ui-colors-secondary);
  }


  @media screen and (max-width: 1280px) {
    background: var(--ui-colors-warning);
  }


  @media screen and (max-width: 976px) {
    background: var(--ui-colors-warning);
  }


  @media screen and (max-width: 480px) {
    background: var(--ui-colors-danger);
  }
}
Copied!

レスポンシブのユーティリティ

Yamada UIには、レスポンシブなレイアウトを構築するために便利なカスタムフックを提供しています。

useBreakpointを使う

コンポーネント内で現在のブレイクポイントを取得する場合には、useBreakpointを使用します。

編集可能な例

const breakpoint = useBreakpoint()

return <Box p="md">The current breakpoint is "{breakpoint}"</Box>
Copied!

useBreakpointValueを使う

useBreakpointValueは、引数で渡されたオブジェクトから現在のブレイクポイントの値を返すカスタムフックです。

編集可能な例

const breakpoint = useBreakpoint()
const bg = useBreakpointValue({
  base: "red.500",
  "2xl": "pink.500",
  xl: "blue.500",
  lg: "green.500",
  md: "yellow.500",
  sm: "purple.500",
})

return (
  <Box bg={bg} p="md" color="white">
    The current breakpoint is "{breakpoint}"
  </Box>
)
Copied!

これは、Yamada UI以外のライブラリのコンポーネントのスタイルを設定するのに適しています。

ブレイクポイントをカスタマイズする

シナリオによっては、アプリケーションのブレークポイントの定義が必要になる場合があります。

sm・md・lg・xlなどの一般的なエイリアスを使用することをオススメします。

import { UIProvider, extendTheme } from "@yamada-ui/react"


const breakpoints = {
  sm: "376px",
  md: "768px",
  lg: "960px",
  xl: "1200px",
  "2xl": "1440px",
}


const customTheme = extendTheme({ breakpoints })({ omit: "breakpoints" })


const App = () => {
  return (
    <UIProvider theme={customTheme}>
      <YourApplication />
    </UIProvider>
  )
}
Copied!

GitHubでこのページを編集する

前セマンティックトークン次カラーモード