Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.7.2

Heading

Headingは、セクションの見出しを表すコンポーネントです。デフォルトでは、h1要素をレンダリングします。

ソース@yamada-ui/typography

インポート

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

使い方

編集可能な例

<Heading>ギャルのパンティーおくれーーーっ!!!!!</Heading>
Copied!

サイズを変更する

編集可能な例

<VStack>
  <For
    each={[
      { as: "h1", size: "4xl" },
      { as: "h2", size: "3xl" },
      { as: "h2", size: "2xl" },
      { as: "h3", size: "xl" },
      { as: "h3", size: "lg" },
      { as: "h4", size: "md" },
      { as: "h5", size: "sm" },
      { as: "h6", size: "xs" },
    ]}
  >
    {({ as, size }, index) => (
      <Heading key={index} as={as} size={size} isTruncated>
        ギャルのパンティーおくれーーーっ!!!!!
      </Heading>
    )}
  </For>
</VStack>
Copied!

グラデーションをつける

編集可能な例

<Heading
  w="full"
  size="2xl"
  bgGradient="linear(to-l, #7928CA, #FF0080)"
  bgClip="text"
  isTruncated
>
  クリリンのことか……クリリンのことかーーーっ!!!!!
</Heading>
Copied!

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

TextBlockquote