Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.5.1

CSS値関数

Yamada UIは、CSS値関数をより便利にした様々な関数を提供しています。

計算・比較

Yamada UIは、CSSの計算・比較関数をより便利にした関数を提供しています。

calc

CSSのcalcを使用して、テーマのトークンを参照・計算することができます。

編集可能な例

<Center w="calc(lg / 2)" bg="primary" p="md" rounded="md" color="white">
  Calc
</Center>
Copied!

また、テーマのspacesのトークンのように数値がトークン名の場合は、$(インターポレーション)を使用して参照します。

編集可能な例

<Center
  w="calc(2xs + $spaces.2)"
  bg="secondary"
  p="md"
  rounded="md"
  color="white"
>
  Use "$"
</Center>
Copied!

min

CSSのminを使用して、渡された引数の中から最小の値を設定します。

引数が1つの場合は、2つ目に"100%"が設定されます。

編集可能な例

<VStack>
  <Center w="min(100%, lg)" bg="primary" p="md" rounded="md" color="white">
    Min
  </Center>

  <Center w="min(md)" bg="secondary" p="md" rounded="md" color="white">
    Omitted Min
  </Center>
</VStack>
Copied!

max

CSSのmaxを使用して、渡された引数の中から最大の値を設定します。

引数が1つの場合は、2つ目に"100%"が設定されます。

編集可能な例

<VStack>
  <Center w="max(100%, 2xs)" bg="primary" p="md" rounded="md" color="white">
    Max
  </Center>

  <Center w="max(xs)" bg="secondary" p="md" rounded="md" color="white">
    Omitted Max
  </Center>
</VStack>
Copied!

clamp

CSSのclampを使用して、値を上限と下限の間に制御します。

引数が2つの場合は、推奨値は"100%"が設定されます。

編集可能な例

<VStack>
  <Center
    w="clamp(xs, 100%, sm)"
    bg="primary"
    p="md"
    rounded="md"
    color="white"
  >
    Clamp
  </Center>

  <Center w="clamp(xs, sm)" bg="secondary" p="md" rounded="md" color="white">
    Omitted Clamp
  </Center>
</VStack>
Copied!

カラー

Yamada UIは、簡単に色と色を混ぜたり、色を明るく、暗くする関数を提供しています。

mix

CSSのcolor-mixを使用して、色同士を混合することができます。

引数は、2つまたは3つを指定することができます。メソッドは省略することができ、デフォルトはin srgbです。

編集可能な例

<Center
  bg="mix(red.500, blue.500)"
  w="full"
  height="xs"
  p="md"
  rounded="md"
  color="white"
>
  "in srgb" + "red.500" + "blue.500"
</Center>
Copied!

パーセンテージを指定することで、割合を変更できます。

編集可能な例

<Center
  bg="mix(in lab, orange.500 80%, purple.500 20%)"
  w="full"
  height="xs"
  p="md"
  rounded="md"
  color="white"
>
  "in lab" + "orange.500 80%" + "purple.500 20%"
</Center>
Copied!

tint

mixを使用して、指定した色に#FFFFFFを混ぜて、色を明るくすることができます。

編集可能な例

<Center
  bg="tint(purple.500, 50%)"
  w="full"
  height="xs"
  p="md"
  rounded="md"
  color="white"
>
  Tint color
</Center>
Copied!

shade

mixを使用して、指定した色に#000000を混ぜて、色を暗くすることができます。

編集可能な例

<Center
  bg="shade(yellow.500, 50%)"
  w="full"
  height="xs"
  p="md"
  rounded="md"
  color="white"
>
  Shade color
</Center>
Copied!

transparentize

mixを使用して、指定した色にtransparentを混ぜて、色を透明にすることができます。

編集可能な例

<Center
  bg="transparentize(red.500, 50%)"
  w="full"
  height="xs"
  p="md"
  rounded="md"
  color="white"
>
  Transparentize color
</Center>
Copied!

tone

mixを使用して、指定した色とトーンに基づいて、色を作成することができます。

編集可能な例

<VStack>
  {TONES.map((tone) => (
    <Center
      key={tone}
      bg={`tone(purple.500, ${tone})`}
      w="full"
      height="5xs"
      p="md"
      rounded="md"
      color="white"
    >
      <Text
        color={`tone(purple.500, ${tone})`}
        as="span"
        filter="invert(100%) grayscale(100%) contrast(100)"
      >
        Tone {tone}
      </Text>
    </Center>
  ))}
</VStack>
Copied!

グラデーション

Yamada UIは、簡単にグラデーションを作成する関数を提供しています。

グラデーションを追加するには、bgGradientに関数と値を設定します。

  • linear(<direction>, <from>, <to>)
  • radial(<from>, <to>)

repeating-linearやconicなど、他のCSSのグラデーション関数も使用することもできます。

<direction>には、ショートハンドも用意されています。

{
  'to-t': 'to top',
  'to-tr': 'to top right',
  'to-r': 'to right',
  'to-br': 'to bottom right',
  'to-b': 'to bottom',
  'to-bl': 'to bottom left',
  'to-l': 'to left',
  'to-tl': 'to top left',
}
Copied!

編集可能な例

<Box w="full" h="xs" bgGradient="linear(to-r, purple.500, blue.400)" />
Copied!

色のカスタマイズ

APIは、色のトークンやCSSの色の値の両方を使用できます。

編集可能な例

<Box w="full" h="xs" bgGradient="linear(to-r, #59a9e1, #f37bdf)" />
Copied!

グラデーションのトークン

グラデーションのトークンは、テーマに定義することができます。

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


export const gradients: ThemeTokens = {
  blue: "linear(to-r, #132293, #2375b4)",
}
Copied!

編集可能な例

<Box w="full" h="xs" bgGradient="blue" />
Copied!

テキストのグラデーション

テキストのグラデーションを追加するには、bgGradientとbgClipにtextを設定します。

編集可能な例

<Heading
  size="2xl"
  bgGradient="linear(to-r, orange.400, red.500)"
  bgClip="text"
  isTruncated
>
  クリリンのことか……クリリンのことかーーーっ！！！！！
</Heading>
Copied!

レスポンシブなグラデーション

bgGradientにオブジェクトを渡すことでレスポンシブスタイルに対応します。

編集可能な例

<Box
  w="full"
  h="xs"
  bgGradient={{
    base: "linear(to-tr, teal.300, yellow.400)",
    lg: "linear(to-t, blue.200, teal.500)",
    md: "linear(to-b, orange.100, purple.300)",
  }}
/>
Copied!

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

前CSSカスタムプロパティ(変数)次アットルール