基本を学ぶ

このガイドは、Yamada UIの概念を理解するのに役立ちます。開発を開始する前に、このガイドを読んでYamada UIを理解することをオススメします。

コンポーネント

Yamada UIは、2つの方法でコンポーネントを提供しています。1つは、CLIからコンポーネントをローカルにダウンロードする新しい方法。もう1つは、モジュールからコンポーネントをインポートする従来通りの方法です。

ダウンロード

CLIからコンポーネントをローカルにダウンロードするケースは、以下のものが考えられます。

• コンポーネントのバリアントスタイルまたはサイズスタイルをカスタマイズする。
• コンポーネントの初期値またはロジックをカスタマイズする。
• コンポーネントのスタイルやロジックに不具合があり、直接修正する。

pnpm yamada-cli add button

npm yamada-cli add button

yarn yamada-cli add button

bun yamada-cli add button

インポート

コンポーネントに何も変更することなく使用する場合は、モジュールからコンポーネントをインポートするだけです。

import { Button } from "@yamada-ui/react"

import { Button } from "@/components/ui"

import { Button } from "@workspaces/ui"

スタイリング

Style Propsは、propsを使用して要素にスタイルを適用します。Style Propsは、CSSプロパティに準拠しており、すべてのプロパティをキャメルケースで提供しています。

<Box p="md" bg="bg.contrast" color="fg.contrast">
  Box
</Box>

条件付きスタイル

条件付きスタイルを使用することで、擬似要素、擬似クラス、セレクターのスタイルを適用できます。

<Box p="md" color="fg.contrast" bg={{ base: "bg.contrast", _hover: "success" }}>
  Hover me
</Box>

カラースキーム

カラースキームは、値を基にしてコンポーネントにカラーコンテキストを生成します。これは、色の一貫性を向上させます。

<VStack gap="md">
  <Box
    p="md"
    colorScheme="blue"
    bg="colorScheme.solid"
    color="colorScheme.contrast"
  >
    Solid
  </Box>
  <Box
    p="md"
    colorScheme="green"
    bg="colorScheme.subtle"
    color="colorScheme.fg"
  >
    Subtle
  </Box>
</VStack>

カラースキームは、親要素のカラースキームを継承します。

<VStack gap="md" colorScheme="blue">
  <Box p="md" bg="colorScheme.solid" color="colorScheme.contrast">
    Provided by Parent
  </Box>
  <Box
    p="md"
    colorScheme="green"
    bg="colorScheme.subtle"
    color="colorScheme.fg"
  >
    Child
  </Box>
</VStack>

レスポンシブデザイン

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

レスポンシブデザインをStyle Propsに適用するには、ブレイクポイントをキーとしたオブジェクトを設定します。

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

<Box p="md" color="fg.contrast" bg={{ base: "bg.contrast", md: "success" }}>
  Box
</Box>

カラーモード

Yamada UIには、アプリケーションのカラーモードを管理するためのサポートが組み込まれており、簡単にライトモードとダークモードを切り替えることができます。また、提供しているすべてのコンポーネントは、ダークモードをサポートしています。

カラーモードをStyle Propsに適用するには、配列を設定します。

• 最初の要素にライトモードの値を設定します。
• 最後の要素にダークモードの値を設定します。

<Box p="md" bg={["success", "warning"]} color="white">
  Box
</Box>

Congratulations!

おめでとうございます🎉

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

普通の山田になったアナタへ、山田からこの言葉を贈ります。

「次は、応用を学ぶで待ってるねっ///」😘

もっと学習する

Yamada UIをもっと知るために、応用やテーマを学んでみませんか？😎