Picture

Pictureは、picture要素を使用し、異なる表示やデバイスのシナリオに応じて代替の画像を提供するコンポーネントです。

インポート

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

Copied!

使い方

sourcesのmediaは、テーマのbreakpointsのトークンを参照します。任意のメディアを設定することも可能です。

Yamada UIは、デフォルトで@media(max-width)のメディアクエリを用いたレスポンシブデザインを採用しています。もし、@media(min-width)のメディアクエリを採用したい場合は、コンフィグをカスタマイズするをご覧ください。

編集可能な例

<Picture
  src="https://dragon-ball-official.com/assets/img/intro/intro_1.png"
  alt="ドラゴンボール"
  boxSize="xl"
  sources={[
    {
      srcSet: "https://dragon-ball-official.com/assets/img/intro/intro_2.png",
      media: "xl",
    },
    {
      srcSet: "https://dragon-ball-official.com/assets/img/intro/intro_3.png",
      media: "lg",
    },
    {
      srcSet: "https://dragon-ball-official.com/assets/img/intro/intro_4.png",
      media: "md",
    },
  ]}
/>

Copied!

または、childrenを設定することもできます。

編集可能な例

<Picture>
  <Source
    srcSet="https://dragon-ball-official.com/assets/img/intro/intro_4.png"
    media="md"
  />
  <Source
    srcSet="https://dragon-ball-official.com/assets/img/intro/intro_3.png"
    media="lg"
  />
  <Source
    srcSet="https://dragon-ball-official.com/assets/img/intro/intro_2.png"
    media="xl"
  />
  <Image
    src="https://dragon-ball-official.com/assets/img/intro/intro_1.png"
    alt="ドラゴンボール"
    boxSize="xl"
  />
</Picture>

Copied!

任意のメディアを使用する

任意のメディアを使用する場合は、mediaに文字列を設定するか、minWまたはmaxWに文字列または数値を設定します。

編集可能な例

<Picture
  src="https://dragon-ball-official.com/assets/img/intro/intro_1.png"
  alt="ドラゴンボール"
  boxSize="xl"
  sources={[
    {
      srcSet: "https://dragon-ball-official.com/assets/img/intro/intro_5.png",
      media: "(max-width: 480px)",
    },
    {
      srcSet: "https://dragon-ball-official.com/assets/img/intro/intro_5.png",
      maxW: "4xl",
    },
    {
      srcSet: "https://dragon-ball-official.com/assets/img/intro/intro_3.png",
      maxW: "976px",
    },
    {
      srcSet: "https://dragon-ball-official.com/assets/img/intro/intro_2.png",
      maxW: 1280,
    },
  ]}
/>

Copied!

ソートを無効にする

ソートを無効にする場合は、enableSortingをfalseに設定します。デフォルトは、trueです。

デフォルトでは、source要素はメディア条件の小さい順に自動で並び替えます。picture要素は、上から順々にsource要素のメディア条件がtrueと判定されたものを選択する仕様であり、メディア条件が小さいものを先に記述する必要があるためです。

編集可能な例

<Picture
  src="https://dragon-ball-official.com/assets/img/intro/intro_1.png"
  alt="ドラゴンボール"
  boxSize="xl"
  enableSorting={false}
  sources={[
    {
      srcSet: "https://dragon-ball-official.com/assets/img/intro/intro_3.png",
      media: "lg",
    },
    {
      srcSet: "https://dragon-ball-official.com/assets/img/intro/intro_2.png",
      media: "(max-width: 1280px)",
    },
  ]}
/>

Copied!

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

前NativeImage 次Icon