Bleed
Bleed
は、要素をコンテナの境界から外すために使用されるコンポーネントです。
インポート
import { Bleed } from "@yamada-ui/react"
使い方
inline
にコンテナの余白分の値を設定します。
編集可能な例
<Card variant="outline" maxW="xl"> <CardHeader> <Heading size="md">北斗の拳</Heading> </CardHeader> <CardBody> <Bleed inline="md"> <Image src="https://hokuto-no-ken.jp/wp/wp-content/themes/hokuto_cms_40th/images/main_vs_bg_new.jpg" alt="北斗の拳" w="full" /> </Bleed> <Text> 199X年。世界は核の炎に包まれた。文明社会は消え去り、世界は暴力が支配する弱肉強食の時代へと突入した。 </Text> <Text> それから数年後、一子相伝の暗殺拳である北斗神拳の伝承者となったケンシロウは愛する女性ユリアと共に旅に出る。 </Text> <Text> しかし、ユリアを愛する南斗孤鷲拳の使い手シンに敗北し、ケンシロウは胸に七つの傷をつけられユリアを奪われてしまう。 </Text> <Text> ユリアを取り戻すため荒野をさまようケンシロウ。そこでケンシロウは言葉を失った少女リンとしたたかに生きる少年バットと運命の出会いを果たす。 </Text> <Text> 北斗神拳の宿命に導かれるまま乱世に覇をとなえる強敵たちと戦い、弱き者を救い続けるケンシロウ。北斗神拳と対を成す南斗の使い手との戦いや、ケンシロウを見守る兄トキとの出会い、そしてトキとケンシロウが目指した北斗の長兄であり最強の男ラオウとの戦いを通じ、ケンシロウは乱世を救う真の救世主へと成長していく。 </Text> </CardBody> <CardFooter> <Button colorScheme="primary">Wikipedia</Button> </CardFooter> </Card>
画面幅に合わせる
画面幅に合わせる場合は、inline
に"full"
を設定します。
編集可能な例
<Center w="full"> <VStack gap="lg" maxW="xl"> <Bleed blockStart="md" inline="full"> <Image src="https://hokuto-no-ken.jp/wp/wp-content/themes/hokuto_cms_40th/images/main_vs_bg_new.jpg" alt="北斗の拳" maxH="lg" objectFit="cover" w="full" /> </Bleed> <Heading textAlign="center"> <Image src="https://hokuto-no-ken.jp/wp/wp-content/uploads/2017/03/title_hokuto.png" alt="北斗の拳" maxW="xs" /> </Heading> <VStack> <Text> 199X年。世界は核の炎に包まれた。文明社会は消え去り、世界は暴力が支配する弱肉強食の時代へと突入した。 </Text> <Text> それから数年後、一子相伝の暗殺拳である北斗神拳の伝承者となったケンシロウは愛する女性ユリアと共に旅に出る。 </Text> <Text> しかし、ユリアを愛する南斗孤鷲拳の使い手シンに敗北し、ケンシロウは胸に七つの傷をつけられユリアを奪われてしまう。 </Text> <Text> ユリアを取り戻すため荒野をさまようケンシロウ。そこでケンシロウは言葉を失った少女リンとしたたかに生きる少年バットと運命の出会いを果たす。 </Text> <Text> 北斗神拳の宿命に導かれるまま乱世に覇をとなえる強敵たちと戦い、弱き者を救い続けるケンシロウ。北斗神拳と対を成す南斗の使い手との戦いや、ケンシロウを見守る兄トキとの出会い、そしてトキとケンシロウが目指した北斗の長兄であり最強の男ラオウとの戦いを通じ、ケンシロウは乱世を救う真の救世主へと成長していく。 </Text> </VStack> </VStack> </Center>
GitHubでこのページを編集する