Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.7.8

応用を学ぶ

このガイドでは、基本を学ぶで説明した概念や機能の応用を説明します。

テーマの応用

Yamada UIは、テーマのユーティリティが他のUIライブラリよりも豊富です。

基本を学ぶでは、テーマの継承にextendThemeを使用することを学びました。ここでは、各コンポーネントで設定されているcolorSchemeを変更する方法やテーマに定義されているトークンの値を取得する方法を学びます。

各コンポーネントで設定されているcolorSchemeを変更するには、withDefaultColorSchemeを使用します。

withDefaultColorSchemeを使う

Yamada UIが提供しているほとんどのコンポーネントは、デフォルトのcolorSchemeにprimaryが設定されています。withDefaultColorSchemeを使用して、secondaryに変更します。

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


const customTheme = extendTheme(
  withDefaultColorScheme({
    colorScheme: "secondary",
    components: ["Badge", "Tag", "Button"], // もし、空の配列を渡した場合は、すべてのコンポーネントに設定されます。
  }),
)()


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

useTokenを使う

コンポーネント内で、テーマに定義されているトークンの値を取得する場合には、useTokenを使用します。

編集可能な例

const bg = useToken("colors", "primary")

return (
  <Box bg={bg} p="md" color="white">
    Primary for color tokens is "{bg}"
  </Box>
)
Copied!

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

スタイルの応用

基本を学ぶでは、Style propsやショートハンドを学びました。ここでは、要素のレンダリングを変更する方法やYamada UIのスタイルシステムの重要度を学びます。

asについて

Yamada UIのすべてのコンポーネントは、アサーションすることができます。

アサーションとは、コンポーネントにHTMLタグや別のコンポーネントを渡すことで、元のコンポーネントのスタイルや挙動を保持しつつ、異なる要素やコンポーネントとしてレンダリングする機能です。

例えば、Buttonのスタイルや挙動を保持しつつ、HTMLタグのaに変更する必要があるとします。

編集可能な例

<Button as="a" href="https://github.com/yamada-ui/yamada-ui" target="_blank">
  GitHub
</Button>
Copied!

sxやcssについて

Yamada UIは、スタイルを設定するためにStyle props以外にもsxやcssを提供しています。

編集可能な例

<Box
  p="md"
  display="flex"
  gap="sm"
  sx={{
    "&:hover > p": {
      color: "danger",
    },
  }}
>
  <Text as="span">Hover me!</Text>
  <Text>This is Text</Text>
</Box>
Copied!

順序について

Yamada UIのコンポーネントは、いくつかのCSSのオブジェクトを受け入れ、設定される順序があります。

順序は以下の通りで、同じプロパティの値は上書きされます。

  1. baseStyle: テーマのbaseStyleのオブジェクト
  2. size: テーマのsizeのオブジェクト
  3. variant: テーマのvariantのオブジェクト
  4. props: コンポーネントのスタイルのprops
  5. sx: コンポーネントのsxのprops
  6. css: コンポーネントのcssのprops

レスポンシブの応用

基本を学ぶでは、レスポンシブスタイルの設定を学びました。ここでは、現在のブレイクポイントを取得する方法や便利なユーティリティを学びます。

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以外のライブラリのコンポーネントのスタイルを設定するのに適しています。

カラーモードの応用

基本を学ぶでは、カラーモードのスタイルの設定を学びました。ここでは、現在のカラーモードを取得する方法や便利なユーティリティを学びます。

useColorModeを使う

コンポーネント内で現在のカラーモードを取得する場合には、useColorModeを使用します。

編集可能な例

const { colorMode, internalColorMode } = useColorMode()

return (
  <Box p="md">
    The current colorMode is "{colorMode}", internal colorMode is "
    {internalColorMode}"
  </Box>
)
Copied!

useColorModeValueを使う

useColorModeValueは、第1引数にライトモードの値、第2引数にダークモードの値を渡し、現在のカラーモードの値を返すカスタムフックです。

編集可能な例

const { colorMode } = useColorMode()
const bg = useColorModeValue("blackAlpha.800", "whiteAlpha.800")
const color = useColorModeValue("whiteAlpha.800", "blackAlpha.800")

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

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

アニメーションの応用

基本を学ぶでは、useAnimationとMotionコンポーネントを学びました。ここでは、useAnimationで複数のアニメーションの設定や新しく動的なアニメーションを設定するuseDynamicAnimationを学びます。

useAnimationで複数のアニメーションを使う

useAnimationは、配列も受け入れます。

編集可能な例

const animation = useAnimation([
  {
    keyframes: {
      "0%": {
        bg: "red.500",
      },
      "20%": {
        bg: "green.500",
      },
      "40%": {
        bg: "purple.500",
      },
      "60%": {
        bg: "yellow.500",
      },
      "80%": {
        bg: "blue.500",
      },
      "100%": {
        bg: "red.500",
      },
    },
    duration: "10s",
    iterationCount: "infinite",
    timingFunction: "linear",
  },
  {
    keyframes: {
      "0%": {
        h: "xs",
      },
      "50%": {
        h: "md",
      },
      "100%": {
        h: "xs",
      },
    },
    duration: "10s",
    iterationCount: "infinite",
    timingFunction: "linear",
  },
  {
    keyframes: {
      "0%": {
        w: "full",
      },
      "50%": {
        w: "50%",
      },
      "100%": {
        w: "full",
      },
    },
    duration: "10s",
    iterationCount: "infinite",
    timingFunction: "linear",
  },
])

return (
  <Box h="md">
    <Box w="full" h="xs" animation={animation} />
  </Box>
)
Copied!

useDynamicAnimationを使う

useDynamicAnimationは、引数にオブジェクトを渡します。オブジェクトのキーはアニメーションのキーになり、setStateの引数にキーを渡すことでアニメーションが変更されます。

編集可能な例

const [animation, setAnimation] = useDynamicAnimation({
  moveLeft: {
    keyframes: {
      "0%": {
        transform: "translateX(400%)",
      },
      "100%": {
        transform: "translateX(0%)",
      },
    },
    duration: "slower",
    fillMode: "forwards",
    timingFunction: "ease-in-out",
  },
  moveRight: {
    keyframes: {
      "0%": {
        transform: "translateX(0%)",
      },
      "100%": {
        transform: "translateX(400%)",
      },
    },
    duration: "slower",
    fillMode: "forwards",
    timingFunction: "ease-in-out",
  },
})

return (
  <VStack alignItems="flex-start">
    <Button
      onClick={() =>
        setAnimation((prev) =>
          prev === "moveRight" ? "moveLeft" : "moveRight",
        )
      }
    >
      Click me!
    </Button>

    <Box bg="primary" p="md" rounded="md" color="white" animation={animation}>
      Box
    </Box>
  </VStack>
)
Copied!

動的なアニメーションと複数のアニメーションを組み合わせることも可能です。

編集可能な例

const [animation, setAnimation] = useDynamicAnimation<
  Record<"moveLeft" | "moveRight", AnimationStyle[]>
>({
  moveLeft: [
    {
      keyframes: {
        "0%": {
          transform: "translateX(400%)",
        },
        "100%": {
          transform: "translateX(0%)",
        },
      },
      duration: "slower",
      fillMode: "forwards",
      timingFunction: "ease-in-out",
    },
    {
      keyframes: {
        "0%": {
          bg: "secondary",
        },
        "100%": {
          bg: "primary",
        },
      },
      duration: "slower",
      fillMode: "forwards",
      timingFunction: "ease-in-out",
    },
  ],
  moveRight: [
    {
      keyframes: {
        "0%": {
          transform: "translateX(0%)",
        },
        "100%": {
          transform: "translateX(400%)",
        },
      },
      duration: "slower",
      fillMode: "forwards",
      timingFunction: "ease-in-out",
    },
    {
      keyframes: {
        "0%": {
          bg: "primary",
        },
        "100%": {
          bg: "secondary",
        },
      },
      duration: "slower",
      fillMode: "forwards",
      timingFunction: "ease-in-out",
    },
  ],
})

return (
  <VStack alignItems="flex-start">
    <Button
      onClick={() =>
        setAnimation((prev) =>
          prev === "moveRight" ? "moveLeft" : "moveRight",
        )
      }
    >
      Click me!
    </Button>

    <Box bg="primary" p="md" rounded="md" color="white" animation={animation}>
      Box
    </Box>
  </VStack>
)
Copied!

Congratulations!

おめでとうございます🎉

これで、あなたは素敵の山田になることができました🥳

もっと学習をする

Yamada UIをもっと知るために、テーマやコンポーネントを学んでみませんか？😎

テーマについて学ぶ

Yamada UIのデフォルトのテーマを知り、色・フォント・その他のテーマの値を作成・変更する方法を学ぶ。

コンポーネントを探索する

Yamada UIは、100以上の柔軟性が高いコンポーネントを提供しています。すべてのコンポーネントは、アニメーション・ダークモードをサポートしています。

ソースコードを探索する

Yamada UIのパッケージ・ドキュメントサイトはオープンソースです。Yamada UIを気に入ったら、スターを付けてください。

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

前基本を学ぶ次フレームワーク