基本を学ぶ

3分間のチュートリアルを読んで、Yamada UIのコンポーネント・スタイリング・レスポンシブデザイン・カラーモードを学ぶ。

このガイドは、Yamada UIの概念を理解するのに役立ちます。開発を開始する前に、このガイドを読んで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

Yamada UIがコンポーネントを更新した場合は、CLIの差分を確認するやコンポーネントを更新するを行うことで、コンポーネントを簡単に更新することができます。もし、あなたの修正と競合してもGitの競合の提示方法と同じように表示され、簡単に解決することができます。

インポート

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

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

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

import { Button } from "@workspaces/ui"

コンポーネントをもっと知りたい場合は、こちらをご覧ください。

スタイリング

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

Box

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

Style Propsは、@mdn/browser-compat-dataを使用しています。ライブラリが更新されると、Style Propsも定期的に更新が行われます。

条件付きスタイル

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

Hover me

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

スタイリングをもっと知りたい場合は、こちらをご覧ください。

カラースキーム

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

Solid

Subtle

<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>

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

Provided by Parent

Child

<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

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

レスポンシブデザインをもっと知りたい場合は、こちらをご覧ください。

カラーモード

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

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

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

Box

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

カラーモードをもっと知りたい場合は、こちらをご覧ください。

Congratulations!

おめでとうございます🎉

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

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

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

もっと学習する

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

Yamada UIのテーマ・ローディング・通知・アニメーションを学ぶ。

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

すべてのコンポーネントは、propsを使用してスタイリングができるように設計されています。

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