Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.6.3

Text

Textは、テキストの段落を表すコンポーネントです。デフォルトでは、p要素をレンダリングします。

ソース@yamada-ui/typography

インポート

import { Text } from "@yamada-ui/react"
Copied!

使い方

編集可能な例

<Text>
  私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
</Text>
Copied!

サイズを変更する

編集可能な例

<VStack>
  <Text fontSize="6xl" isTruncated>
    私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
  </Text>

  <Text fontSize="5xl" isTruncated>
    私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
  </Text>

  <Text fontSize="4xl" isTruncated>
    私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
  </Text>

  <Text fontSize="3xl" isTruncated>
    私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
  </Text>

  <Text fontSize="2xl" isTruncated>
    私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
  </Text>

  <Text fontSize="xl" isTruncated>
    私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
  </Text>

  <Text fontSize="lg" isTruncated>
    私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
  </Text>

  <Text fontSize="md" isTruncated>
    私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
  </Text>

  <Text fontSize="sm" isTruncated>
    私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
  </Text>

  <Text fontSize="xs" isTruncated>
    私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
  </Text>
</VStack>
Copied!

asを使う

asを渡すことで、異なる要素やコンポーネントとしてレンダリングすることができます。

編集可能な例

<VStack>
  <Text as="b">へっ！きたねぇ花火だ</Text>

  <Text as="i">へっ！きたねぇ花火だ</Text>

  <Text as="u">へっ！きたねぇ花火だ</Text>

  <Text as="abbr">へっ！きたねぇ花火だ</Text>

  <Text as="del">へっ！きたねぇ花火だ</Text>

  <Text as="em">へっ！きたねぇ花火だ</Text>

  <Text as="ins">へっ！きたねぇ花火だ</Text>

  <Text as="kbd">へっ！きたねぇ花火だ</Text>

  <Text as="mark">へっ！きたねぇ花火だ</Text>

  <Text as="s">へっ！きたねぇ花火だ</Text>

  <Text as="samp">へっ！きたねぇ花火だ</Text>

  <Text as="sub">へっ！きたねぇ花火だ</Text>
</VStack>
Copied!

テキストを切り詰める

特定の行数以降のテキストを切り詰めたい場合は、lineClampに行数を指定します。指定した行数を超えた場合は、省略記号が表示されます。

編集可能な例

<VStack>
  <Text fontSize="2xl" lineClamp={3}>
    『ドラゴンボール』（DRAGON
    BALL）は、鳥山明による日本の漫画作品。『週刊少年ジャンプ』（集英社）にて1984年51号から1995年25号まで連載された。世界中に散らばった七つの球をすべて集めると、どんな願いも一つだけ叶えられるという秘宝・ドラゴンボールと、主人公・孫悟空（そん・ごくう）を中心に展開する、「冒険」「夢」「バトル」「友情」などを描いた長編漫画。
  </Text>

  <Text fontSize="2xl" lineClamp={2}>
    『ドラゴンボール』（DRAGON
    BALL）は、鳥山明による日本の漫画作品。『週刊少年ジャンプ』（集英社）にて1984年51号から1995年25号まで連載された。世界中に散らばった七つの球をすべて集めると、どんな願いも一つだけ叶えられるという秘宝・ドラゴンボールと、主人公・孫悟空（そん・ごくう）を中心に展開する、「冒険」「夢」「バトル」「友情」などを描いた長編漫画。
  </Text>

  <Text fontSize="2xl" lineClamp={1}>
    『ドラゴンボール』（DRAGON
    BALL）は、鳥山明による日本の漫画作品。『週刊少年ジャンプ』（集英社）にて1984年51号から1995年25号まで連載された。世界中に散らばった七つの球をすべて集めると、どんな願いも一つだけ叶えられるという秘宝・ドラゴンボールと、主人公・孫悟空（そん・ごくう）を中心に展開する、「冒険」「夢」「バトル」「友情」などを描いた長編漫画。
  </Text>
</VStack>
Copied!

グラデーションをつける

編集可能な例

<Text
  w="full"
  fontSize="xl"
  fontWeight="bold"
  bgGradient="linear(to-l, #7928CA, #FF0080)"
  bgClip="text"
>
  やるじゃねえかサタン！おめえはホントに世界の救世主かもな！
</Text>
Copied!

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

前タイポグラフィ次Heading