Text
Text
は、テキストの段落を表すコンポーネントです。デフォルトでは、p
要素をレンダリングします。
インポート
import { Text } from "@yamada-ui/react"
使い方
編集可能な例
<Text> 私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく…… </Text>
サイズを変更する
編集可能な例
<VStack> <For each={["6xl", "5xl", "4xl", "3xl", "2xl", "xl", "lg", "md", "sm", "xs"]}> {(fontSize, index) => ( <Text key={index} fontSize={fontSize} isTruncated> 私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく…… </Text> )} </For> </VStack>
as
を使う
as
を渡すことで、異なる要素やコンポーネントとしてレンダリングすることができます。
編集可能な例
<VStack> <For each={[ "b", "i", "u", "abbr", "del", "em", "ins", "kbd", "mark", "s", "samp", "sub", ]} > {(as, index) => ( <Text key={index} as={as}> へっ!きたねぇ花火だ </Text> )} </For> </VStack>
テキストを切り詰める
特定の行数以降のテキストを切り詰めたい場合は、lineClamp
に行数を指定します。指定した行数を超えた場合は、省略記号が表示されます。
編集可能な例
<VStack> <For each={[3, 2, 1]}> {(lineClamp, index) => ( <Text key={index} fontSize="2xl" lineClamp={lineClamp}> 『ドラゴンボール』(DRAGON BALL)は、鳥山明による日本の漫画作品。『週刊少年ジャンプ』(集英社)にて1984年51号から1995年25号まで連載された。世界中に散らばった七つの球をすべて集めると、どんな願いも一つだけ叶えられるという秘宝・ドラゴンボールと、主人公・孫悟空(そん・ごくう)を中心に展開する、「冒険」「夢」「バトル」「友情」などを描いた長編漫画。 </Text> )} </For> </VStack>
グラデーションをつける
編集可能な例
<Text w="full" fontSize="xl" fontWeight="bold" bgGradient="linear(to-l, #7928CA, #FF0080)" bgClip="text" > やるじゃねえかサタン!おめえはホントに世界の救世主かもな! </Text>
GitHubでこのページを編集する