Blockquote

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

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

使い方

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

import { Blockquote } from "@/components/ui"

import { Blockquote } from "@workspaces/ui"

<Blockquote.Root>
  <Blockquote.Content />
  <Blockquote.Caption>
    <Blockquote.Cite />
  </Blockquote.Caption>
</Blockquote.Root>

バリアントを変更する

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

引用元を表示する

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

Wikipedia

— Wikipedia

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

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

アイコンを表示する

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

Wikipedia

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

配置を変更する

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

Wikipedia

Wikipedia

Wikipedia

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

カスタマイズする

Wikipedia

Wikipedia

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

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

    <Blockquote.Caption alignSelf="end">
      <Blockquote.Cite>Wikipedia</Blockquote.Cite>
    </Blockquote.Caption>
  </Blockquote.Root>
</VStack>

Wikipedia

Wikipedia

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

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

    <Blockquote.Caption>
      <Blockquote.Cite color="secondary">Wikipedia</Blockquote.Cite>
    </Blockquote.Caption>
  </Blockquote.Root>
</VStack>

Props

Blockquote.Root

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`variant`	`"subtle"`	`"plain" \| "solid" \| "subtle"` The variant of the component.
`captionProps`	-	`HTMLStyledProps<"figcaption">` The props for the `BlockquoteCaption` component.
`cite`	-	`ReactNode` The citation of the blockquote.
`citeProps`	-	`HTMLStyledProps<"cite">` The props for the `BlockquoteCite` component.
`citeUrl`	-	`string` The URL of the citation of the blockquote.
`contentProps`	-	`HTMLStyledProps<"blockquote">` The props for the `BlockquoteContent` component.
`icon`	-	`ReactNode` The icon of the blockquote.
`withDash`	`false`	`boolean` If `true`, the dash will be shown.

Blockquote.Caption

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`withDash`	`false`	`boolean` If `true`, the dash will be shown.

Blockquote.Cite

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

Blockquote.Content

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`citeUrl`	-	`string` The URL of the citation of the blockquote.

Blockquote.Icon

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

類似のコンポーネント

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

Markは、特定のテキストを強調するコンポーネントです。

Kbdは、キーボード入力を表すコンポーネントです。

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

Highlightは、テキスト内の指定された文字列をハイライトするコンポーネントです。デフォルトでは、p要素をレンダリングします。

Emは、強調されたテキストを表すコンポーネントです。デフォルトでは、em要素をレンダリングします。

Code はコードブロックを表すコンポーネントです。デフォルトでは code 要素をレンダリングします。

Linkは、別のウェブページや同一ページ内の場所、または他のURLへのハイパーリンクを作成するコンポーネントです。

使用しているコンポーネント・フック

Iconは、プロジェクトに使用できる一般的なアイコンコンポーネントです。