Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.5.1

基本を学ぶ

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

テーマについて

Yamada UIは、他のUIライブラリと同様にテーマという概念が存在します。

テーマは、コンポーネントのスタイルやカラー・スペース・フォントサイズ・その他多くのプロパティのトークンが定義されている変更可能なオブジェクトです。

プロジェクトにデフォルトのテーマを設定するには、アプリケーションのルートにUIProviderを追加する必要があります。

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


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

テーマをカスタマイズする

テーマをカスタマイズしたい場合は、UIProviderにthemeを渡しましょう。

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


const customTheme = extendTheme({
  fontSizes: {
    xs: "1rem",
    sm: "1.25rem",
    md: "1.5rem",
    lg: "1.75rem",
    xl: "2rem",
  },
})()


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

これでアプリケーション全体の文字サイズが変更されました。

セマンティックトークンを変更する

Yamada UIは、あらゆるスケール(色やフォントサイズなど)のセマンティックトークンをサポートしています。

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

export const semantics: ThemeSemantics = {
  colors: {
    primary: "blue.500",
    secondary: "violet.500",
    info: "blue.500",
    success: "green.500",
    warning: "orange.500",
    danger: "red.500",
    link: "blue.500",
  },
  colorSchemes: {
    primary: "blue",
    secondary: "violet",
    info: "blue",
    success: "green",
    warning: "orange",
    danger: "red",
    link: "blue",
  },
  spaces: {
    xs: "1",
    sm: "2",
    md: "4",
    normal: "6",
    lg: "8",
    xl: "12",
    "2xl": "16",
    "3xl": "24",
    "4xl": "32",
  },
}
Copied!

プロジェクトによって、セマンティックトークンを変更する場合があるでしょう。

例えば、primaryをpinkにしたいとします。その場合は、semanticsを変更します。

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


const customTheme = extendTheme({
  semantics: {
    colors: {
      primary: "pink.500",
    },
    colorSchemes: {
      primary: "pink",
    },
  },
})()


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

ローディングを使う

Yamada UIは、アプリケーションで必要なローディングアニメーションをサポートしています。

ローディングを表示するには、useLoadingを使用します。useLoadingは、screen・page・background・customのインスタンスを返します。インスタンスには、いくつかのメソッドが含まれています。

  • isLoading: ローディングアニメーション中かどうかを取得します。
  • start: ローディングアニメーションを開始します。
  • update: ローディングアニメーションの情報を更新します。
  • finish: ローディングアニメーションを終了します。

編集可能な例

const { screen, page, background } = useLoading()

const onLoadingScreen = async () => {
  try {
    screen.start()

    await wait(5000)
  } finally {
    screen.finish()
  }
}

const onLoadingPage = async () => {
  try {
    page.start()

    await wait(5000)
  } finally {
    page.finish()
  }
}

const onLoadingBackground = async () => {
  try {
    background.start()

    await wait(5000)
  } finally {
    background.finish()
  }
}

return (
  <Wrap gap="md">
    <Button onClick={onLoadingScreen}>Start screen loading</Button>
    <Button onClick={onLoadingPage}>Start page loading</Button>
    <Button onClick={onLoadingBackground}>Start background loading</Button>
  </Wrap>
)
Copied!

通知を使う

Yamada UIは、アプリケーションで必要な通知をサポートしています。

通知を表示するには、useNoticeを使用します。useNoticeは、通知を表示・制御するインスタンスを返します。

編集可能な例

const notice = useNotice()

return (
  <Button
    onClick={() =>
      notice({
        title: "Notification",
        description: "This is description.",
      })
    }
  >
    Show notification
  </Button>
)
Copied!

スタイルについて

Yamada UIは、コンポーネントにpropsを渡すだけでスタイルを簡単に変更できます。また、多くの便利なショートハンドを提供しており、開発効率を向上させています。

例えば、paddingであれば、pと記述することもでき、margin-leftとmargin-rightの両方を設定したい場合は、mxと記述することができます。

編集可能な例

<Box w="full" p="md" bg="warning" color="white">
  This is Box
</Box>
Copied!

擬似要素

編集可能な例

<Box
  position="relative"
  boxSize="2xs"
  bg="primary"
  p="md"
  color="white"
  _after={{
    content: "'after'",
    position: "absolute",
    top: "0",
    right: "0",
    bg: "secondary",
    p: "md",
    color: "white",
  }}
>
  Box
</Box>
Copied!

コンポーネント

Yamada UIが提供しているコンポーネントの多くは、variant・size・colorSchemeを設定することでスタイルが変更されます。

編集可能な例

<Wrap gap="md">
  <Button>Basic</Button>

  <Button variant="solid" colorScheme="green">
    Solid
  </Button>

  <Button variant="outline" colorScheme="orange">
    Outline
  </Button>

  <Button variant="ghost" colorScheme="red">
    Ghost
  </Button>

  <Button variant="link" colorScheme="sky">
    Link
  </Button>

  <Button variant="unstyled">Unstyle</Button>
</Wrap>
Copied!

編集可能な例

<Wrap gap="md">
  <Button colorScheme="primary" size="xs">
    X Small
  </Button>

  <Button colorScheme="secondary" size="sm">
    Small
  </Button>

  <Button colorScheme="warning" size="md">
    Medium
  </Button>

  <Button colorScheme="danger" size="lg">
    Large
  </Button>
</Wrap>
Copied!

レスポンシブについて

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

すべてのスタイルのpropsは、オブジェクトも受け入れます。まずは、背景色を変えてみましょう。

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

編集可能な例

<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には、デフォルトのテーマがあり、ブレイクポイントが定義されています。

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

breakpoints.ts

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

カラーモードについて

Yamada UIには、アプリケーションのカラーモードを管理するためのサポートが組み込まれています。

Yamada UIのすべてのコンポーネントは、ダークモードをサポートしています。また、個別にカラーモードのスタイルを設定する場合は、スタイルのpropsに配列を渡すだけでカラーモードに対応します。

すべてのスタイルのpropsは、配列も受け入れます。まずは、背景色を変えてみましょう。

  • 第1引数にライトモードに設定したいスタイルの値を定義します。
  • 第2引数にダークモードに設定したいスタイルの値を定義します。

編集可能な例

<Box w="full" p="md" bg={["primary", "secondary"]} color="white">
  This is Box
</Box>
Copied!

下のボタンでカラーモードを変更して実際に確認してください。

カラーモードを切り替える

カラーモードは、デフォルトのコンフィグに設定されています。

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

config.ts

export const config: ThemeConfig = {
  initialColorMode: "light",
}
Copied!

  • initialColorMode: カラーモードの初期値です。3つ値を受け入れます。

    • light: ライトモード。
    • dark: ダークモード。
    • system: オペレーションシステム(OS)からカラーモードを取得します。

アプリケーション内でカラーモードを変更したい場合は、changeColorModeかtoggleColorModeを使用します。

  • changeColorMode: 任意のカラーモードを設定します。
  • toggleColorMode: ライトモードならダークモードへ、ダークモードならライトモードへ切り替えます。

編集可能な例

const { colorMode, changeColorMode, toggleColorMode } = useColorMode()

return (
  <Wrap gap="md">
    <Button onClick={() => changeColorMode("light")}>ライトモード</Button>
    <Button onClick={() => changeColorMode("dark")}>ダークモード</Button>
    <Button onClick={() => changeColorMode("system")}>システム</Button>
    <Button onClick={toggleColorMode}>
      {colorMode === "light" ? "ダーク" : "ライト"}モードに切り替える
    </Button>
  </Wrap>
)
Copied!

アニメーションについて

Yamada UIは、アニメーションに特化したコンポーネントのMotionやCSSのkeyframesのように記述できるuseAnimationなど、多くのユーティリティを提供しています。

useAnimationを使う

useAnimationは、引数にkeyframesなどを設定し、生成されたanimationをpropsに渡します。

  • keyframes: アニメーションの流れに沿ったキーフレーム(または中間地点)のスタイルを設定します。各スタイルの値は、Yamada UIのスタイルシステムやテーマのトークンが使用できます。
  • duration: 1回のアニメーションサイクルに要する時間の長さを設定します。
  • timingFunction: アニメーションの進め方を設定します。これは加速曲線を定義することで、キーフレーム間のアニメーションをどのように進めていくかを設定します。
  • delay: 要素が読み込まれてからアニメーションを始めるまでの遅延時間を設定します。
  • iterationCount: アニメーションを繰り返す回数を設定します。アニメーションを無限に繰り返すにはinfiniteを指定してください。
  • direction: アニメーションのシーケンス完了時に、逆方向にアニメーションして繰り返すか、始めの状態にリセットしてアニメーションを繰り返すかを設定します。
  • fillMode: アニメーションの実行前後に、指定したスタイルを適用するかを設定します。
  • playState: アニメーションを一時停止したり、再開したりするかを設定します。

編集可能な例

const animation = useAnimation({
  keyframes: {
    from: {
      transform: "rotate(0)",
    },
    to: {
      transform: "rotate(359deg)",
    },
  },
  duration: "0.8s",
  iterationCount: "infinite",
  timingFunction: "linear",
})

return (
  <Center p="lg">
    <Center
      w="150px"
      h="150px"
      p="1"
      rounded="50%"
      bgGradient={[
        "linear(blackAlpha.50, blackAlpha.500)",
        "linear(whiteAlpha.50, whiteAlpha.500)",
      ]}
      animation={animation}
    >
      <Box w="full" h="full" rounded="50%" bg={["white", "black"]} />
    </Center>
  </Center>
)
Copied!

Motionを使う

Motionコンポーネントのpropsは、数多く存在します。今回は、whileHover・whileTap・whileFocusについて軽く紹介します。

  • whileHover: 要素がホバーされたときに発火するアニメーションです。
  • whileTap: 要素がクリック・タップされたときに発火するアニメーションです。
  • whileFocus: 要素がフォーカスされたときに発火するアニメーションです。

今回は、拡大・縮小させるためにscale: 1.1やscale: 0.9を設定しています。

編集可能な例

<Center p="lg">
  <Motion
    as="button"
    whileHover={{ scale: 1.1 }}
    whileTap={{ scale: 0.9 }}
    whileFocus={{ scale: 1.1 }}
    p="md"
    rounded="md"
    bg="primary"
    color="white"
  >
    Click me!
  </Motion>
</Center>
Copied!

Congratulations!

おめでとうございます🎉

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

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

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

もっと学習をする

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

応用を学ぶ

Yamada UIのテーマ・スタイル・レスポンシブ・ダークモード・アニメーションの応用を学ぶ。

テーマについて学ぶ

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

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

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

ソースコードを探索する

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

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

前インストール次応用を学ぶ