Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.7.2

Blockquote

Blockquote は引用を表すコンポーネントです。デフォルトでは blockquote 要素をレンダリングします。

ソース@yamada-ui/typography

インポート

import {
  Blockquote,
  BlockquoteContent,
  BlockquoteCaption,
  BlockquoteCite,
} from "@yamada-ui/react"
Copied!

使い方

編集可能な例

<Blockquote citeUrl="https://ja.wikipedia.org/wiki/ドラゴンボール">
  地球の人里離れた山奥に住む尻尾の生えた少年・孫悟空はある日、西の都からやって来た少女・ブルマと出会う。そこで、7つ集めると神龍（シェンロン）が現れ、どんな願いでも一つだけ叶えてくれるというドラゴンボールの存在を、さらに育ての親である孫悟飯の形見として大切に持っていた球がその1つ「四星球（スーシンチュウ）」であることを知り、ブルマと共に残りのドラゴンボールを探す旅に出る。
</Blockquote>
Copied!

バリアントを変更する

編集可能な例

<VStack>
  <For
    each={[
      {
        variant: "solid",
        colorScheme: "primary",
      },
      {
        variant: "subtle",
        colorScheme: "secondary",
      },
      {
        variant: "plain",
      },
    ]}
  >
    {({ variant, colorScheme }, index) => (
      <Blockquote
        key={index}
        variant={variant}
        colorScheme={colorScheme}
        citeUrl="https://ja.wikipedia.org/wiki/ドラゴンボール"
      >
        地球の人里離れた山奥に住む尻尾の生えた少年・孫悟空はある日、西の都からやって来た少女・ブルマと出会う。そこで、7つ集めると神龍（シェンロン）が現れ、どんな願いでも一つだけ叶えてくれるというドラゴンボールの存在を、さらに育ての親である孫悟飯の形見として大切に持っていた球がその1つ「四星球（スーシンチュウ）」であることを知り、ブルマと共に残りのドラゴンボールを探す旅に出る。
      </Blockquote>
    )}
  </For>
</VStack>
Copied!

カラースキーマを変更する

編集可能な例

<VStack>
  <For each={["secondary", "red"]}>
    {(colorScheme, index) => (
      <Blockquote
        key={index}
        colorScheme={colorScheme}
        citeUrl="https://ja.wikipedia.org/wiki/ドラゴンボール"
      >
        地球の人里離れた山奥に住む尻尾の生えた少年・孫悟空はある日、西の都からやって来た少女・ブルマと出会う。そこで、7つ集めると神龍（シェンロン）が現れ、どんな願いでも一つだけ叶えてくれるというドラゴンボールの存在を、さらに育ての親である孫悟飯の形見として大切に持っていた球がその1つ「四星球（スーシンチュウ）」であることを知り、ブルマと共に残りのドラゴンボールを探す旅に出る。
      </Blockquote>
    )}
  </For>
</VStack>
Copied!

引用元を表示する

引用元を表示する場合は、citeにReactNodeを設定します。

編集可能な例

<VStack>
  <Blockquote
    cite="Wikipedia"
    citeUrl="https://ja.wikipedia.org/wiki/ドラゴンボール"
  >
    地球の人里離れた山奥に住む尻尾の生えた少年・孫悟空はある日、西の都からやって来た少女・ブルマと出会う。そこで、7つ集めると神龍（シェンロン）が現れ、どんな願いでも一つだけ叶えてくれるというドラゴンボールの存在を、さらに育ての親である孫悟飯の形見として大切に持っていた球がその1つ「四星球（スーシンチュウ）」であることを知り、ブルマと共に残りのドラゴンボールを探す旅に出る。
  </Blockquote>

  <Blockquote
    cite="Wikipedia"
    citeUrl="https://ja.wikipedia.org/wiki/ドラゴンボール"
    withDash
  >
    地球の人里離れた山奥に住む尻尾の生えた少年・孫悟空はある日、西の都からやって来た少女・ブルマと出会う。そこで、7つ集めると神龍（シェンロン）が現れ、どんな願いでも一つだけ叶えてくれるというドラゴンボールの存在を、さらに育ての親である孫悟飯の形見として大切に持っていた球がその1つ「四星球（スーシンチュウ）」であることを知り、ブルマと共に残りのドラゴンボールを探す旅に出る。
  </Blockquote>
</VStack>
Copied!

アイコンを表示する

アイコンを表示する場合は、iconにReactNodeを設定します。

編集可能な例

<Blockquote
  variant="plain"
  cite="Wikipedia"
  citeUrl="https://ja.wikipedia.org/wiki/ドラゴンボール"
  icon={
    <QuoteIcon
      color={["blackAlpha.600", "whiteAlpha.700"]}
      fontSize="xl"
      left="0"
      position="absolute"
      top="0"
    />
  }
  px="8"
>
  地球の人里離れた山奥に住む尻尾の生えた少年・孫悟空はある日、西の都からやって来た少女・ブルマと出会う。そこで、7つ集めると神龍（シェンロン）が現れ、どんな願いでも一つだけ叶えてくれるというドラゴンボールの存在を、さらに育ての親である孫悟飯の形見として大切に持っていた球がその1つ「四星球（スーシンチュウ）」であることを知り、ブルマと共に残りのドラゴンボールを探す旅に出る。
</Blockquote>
Copied!

配置を変更する

配置を変更する場合は、justifyに"start"または"center"または"end"を設定します。デフォルトは、"start"です。

編集可能な例

<VStack>
  <For each={["start", "center", "end"]}>
    {(justify, index) => (
      <Blockquote
        key={index}
        cite="Wikipedia"
        citeUrl="https://ja.wikipedia.org/wiki/ドラゴンボール"
        justify={justify}
      >
        地球の人里離れた山奥に住む尻尾の生えた少年・孫悟空はある日、西の都からやって来た少女・ブルマと出会う。そこで、7つ集めると神龍（シェンロン）が現れ、どんな願いでも一つだけ叶えてくれるというドラゴンボールの存在を、さらに育ての親である孫悟飯の形見として大切に持っていた球がその1つ「四星球（スーシンチュウ）」であることを知り、ブルマと共に残りのドラゴンボールを探す旅に出る。
      </Blockquote>
    )}
  </For>
</VStack>
Copied!

カスタマイズする

編集可能な例

<VStack>
  <Blockquote
    cite="Wikipedia"
    citeUrl="https://ja.wikipedia.org/wiki/ドラゴンボール"
    captionProps={{ alignSelf: "center" }}
  >
    地球の人里離れた山奥に住む尻尾の生えた少年・孫悟空はある日、西の都からやって来た少女・ブルマと出会う。そこで、7つ集めると神龍（シェンロン）が現れ、どんな願いでも一つだけ叶えてくれるというドラゴンボールの存在を、さらに育ての親である孫悟飯の形見として大切に持っていた球がその1つ「四星球（スーシンチュウ）」であることを知り、ブルマと共に残りのドラゴンボールを探す旅に出る。
  </Blockquote>

  <Blockquote citeUrl="https://ja.wikipedia.org/wiki/ドラゴンボール">
    <BlockquoteContent>
      地球の人里離れた山奥に住む尻尾の生えた少年・孫悟空はある日、西の都からやって来た少女・ブルマと出会う。そこで、7つ集めると神龍（シェンロン）が現れ、どんな願いでも一つだけ叶えてくれるというドラゴンボールの存在を、さらに育ての親である孫悟飯の形見として大切に持っていた球がその1つ「四星球（スーシンチュウ）」であることを知り、ブルマと共に残りのドラゴンボールを探す旅に出る。
    </BlockquoteContent>

    <BlockquoteCaption alignSelf="end">
      <BlockquoteCite>Wikipedia</BlockquoteCite>
    </BlockquoteCaption>
  </Blockquote>
</VStack>
Copied!

編集可能な例

<VStack>
  <Blockquote
    cite="Wikipedia"
    citeUrl="https://ja.wikipedia.org/wiki/ドラゴンボール"
    citeProps={{ color: "primary" }}
  >
    地球の人里離れた山奥に住む尻尾の生えた少年・孫悟空はある日、西の都からやって来た少女・ブルマと出会う。そこで、7つ集めると神龍（シェンロン）が現れ、どんな願いでも一つだけ叶えてくれるというドラゴンボールの存在を、さらに育ての親である孫悟飯の形見として大切に持っていた球がその1つ「四星球（スーシンチュウ）」であることを知り、ブルマと共に残りのドラゴンボールを探す旅に出る。
  </Blockquote>

  <Blockquote citeUrl="https://ja.wikipedia.org/wiki/ドラゴンボール">
    <BlockquoteContent>
      地球の人里離れた山奥に住む尻尾の生えた少年・孫悟空はある日、西の都からやって来た少女・ブルマと出会う。そこで、7つ集めると神龍（シェンロン）が現れ、どんな願いでも一つだけ叶えてくれるというドラゴンボールの存在を、さらに育ての親である孫悟飯の形見として大切に持っていた球がその1つ「四星球（スーシンチュウ）」であることを知り、ブルマと共に残りのドラゴンボールを探す旅に出る。
    </BlockquoteContent>

    <BlockquoteCaption>
      <BlockquoteCite color="secondary">Wikipedia</BlockquoteCite>
    </BlockquoteCaption>
  </Blockquote>
</VStack>
Copied!

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

前Heading次Em