Blockquote
Blockquote
は引用を表すコンポーネントです。デフォルトでは blockquote
要素をレンダリングします。
インポート
import {Blockquote,BlockquoteContent,BlockquoteCaption,BlockquoteCite,} from "@yamada-ui/react"
使い方
編集可能な例
<Blockquote citeUrl="https://ja.wikipedia.org/wiki/ドラゴンボール"> 地球の人里離れた山奥に住む尻尾の生えた少年・孫悟空はある日、西の都からやって来た少女・ブルマと出会う。そこで、7つ集めると神龍(シェンロン)が現れ、どんな願いでも一つだけ叶えてくれるというドラゴンボールの存在を、さらに育ての親である孫悟飯の形見として大切に持っていた球がその1つ「四星球(スーシンチュウ)」であることを知り、ブルマと共に残りのドラゴンボールを探す旅に出る。 </Blockquote>
バリアントを変更する
編集可能な例
<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>
カラースキーマを変更する
編集可能な例
<VStack> <For each={["secondary", "red"]}> {(colorScheme, index) => ( <Blockquote key={index} colorScheme={colorScheme} citeUrl="https://ja.wikipedia.org/wiki/ドラゴンボール" > 地球の人里離れた山奥に住む尻尾の生えた少年・孫悟空はある日、西の都からやって来た少女・ブルマと出会う。そこで、7つ集めると神龍(シェンロン)が現れ、どんな願いでも一つだけ叶えてくれるというドラゴンボールの存在を、さらに育ての親である孫悟飯の形見として大切に持っていた球がその1つ「四星球(スーシンチュウ)」であることを知り、ブルマと共に残りのドラゴンボールを探す旅に出る。 </Blockquote> )} </For> </VStack>
引用元を表示する
引用元を表示する場合は、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>
アイコンを表示する
アイコンを表示する場合は、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>
配置を変更する
配置を変更する場合は、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>
カスタマイズする
編集可能な例
<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>
編集可能な例
<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>
GitHubでこのページを編集する