ズーム可能な画像
ドキュメント内の画像をズームできるようにします
Install to your codebase
Easier customization & control.
npx @fumadocs/cli@latest add image-zoom使い方
MDX コンポーネントの img を ImageZoom に置き換えてください。
import { ImageZoom } from 'fumadocs-ui/components/image-zoom';
import defaultComponents from 'fumadocs-ui/mdx';
import type { MDXComponents } from 'mdx/types';
export function getMDXComponents(components?: MDXComponents) {
return {
...defaultComponents,
img: (props) => <ImageZoom {...(props as any)} />,
...components,
} satisfies MDXComponents;
}これで、すべての画像で画像ズームが自動的に有効になります。
画像の最適化
Next.js では、<Image /> コンポーネントに sizes プロパティが指定されていない場合、デフォルト値が設定されます。
Lightbox
<Lightbox /> 内のズーム可能な画像は 1 つのビューアーで開かれ、矢印キーやスワイプ、左右のボタンで切り替えて閲覧できます。
ページのコンテンツ全体をラップすると、ページ内のすべての画像を閲覧できます。
import { Lightbox } from 'fumadocs-ui/components/image-zoom';
<DocsBody>
<Lightbox>
<MDX components={getMDXComponents()} />
</Lightbox>
</DocsBody>;キャプション
画像のタイトルがキャプションとして表示されます。
リンクなどのリッチコンテンツを表示するには、caption を渡してください。
<ImageZoom
src="/notebook.png"
alt="Notebook Layout"
caption={
<>
See <a href="/docs/ui/layouts/notebook">Notebook Layout</a>
</>
}
/>ギャラリー
一連の画像をまとめて個別に閲覧できるようにするには、それらを別の <Lightbox /> で囲みます。たとえば、次のようにグリッド状に配置できます。
<Lightbox>
<div className="not-prose grid grid-cols-2 gap-2">
</div>
</Lightbox>How is this guide?
最終更新日
General Translation
Ferry Health
assistant-ui
Inkeep