Componentes

Ver como Markdown Editar en GitHub Documentación de 7b38e05

Onedocs registra un conjunto de componentes Fumadocs UI para tus archivos MDX, de modo que puedas usarlos sin importarlos.

Uso de componentes

Pasa mdxComponents a tu contenido MDX:

TSX

import { DocsPage, mdxComponents } from "onedocs";

// In your page component:
<MDX components={mdxComponents} />

mdxComponents incluye los valores predeterminados de Fumadocs UI (encabezados con enlaces de ancla, bloques de código, enlaces, imágenes, tablas, Card, Cards y Callout), además de Tab, Tabs, Step, Steps, Accordion, Accordions, File, Folder, Files, ImageZoom y TypeTable. Todos los ejemplos siguientes funcionan tal cual.

Aviso

Resalta información importante. type puede ser uno de info (el valor predeterminado), warn, error, success o idea:

Mdx

<Callout type="info">
  This is an informational callout.
</Callout>

<Callout type="warn">
  This is a warning callout.
</Callout>

<Callout type="error">
  This is an error callout.
</Callout>

Añade un encabezado con title:

Mdx

<Callout type="warn" title="Breaking change">
  The `docs` option was removed in version 2.
</Callout>

Pestañas

Organiza el contenido en pestañas. Cada Tab value corresponde a una entrada de items:

Mdx

<Tabs items={["npm", "yarn", "pnpm", "bun"]}>
  <Tab value="npm">npm install onedocs</Tab>
  <Tab value="yarn">yarn add onedocs</Tab>
  <Tab value="pnpm">pnpm add onedocs</Tab>
  <Tab value="bun">bun add onedocs</Tab>
</Tabs>

Tarjetas

Enlaza a otras páginas con cuadrículas de tarjetas:

Mdx

<Cards>
  <Card title="Getting Started" href="/docs/getting-started">
    Learn how to set up Onedocs
  </Card>
  <Card title="Configuration" href="/docs/configuration">
    Configure your documentation
  </Card>
</Cards>

Pasos

Muestra los pasos numerados:

Mdx

<Steps>
  <Step>Install Onedocs</Step>
  <Step>Create configuration</Step>
  <Step>Write documentation</Step>
</Steps>

Acordeón

Contenido plegable para preguntas frecuentes y detalles opcionales. Solo puede haber un elemento abierto a la vez:

Mdx

<Accordions>
  <Accordion title="What is Onedocs?">
    Layouts, components and SEO helpers for documentation sites built with Next.js and Fumadocs.
  </Accordion>
  <Accordion title="How do I install it?">
    Follow the install step in Getting Started.
  </Accordion>
</Accordions>

Archivos

Muestra árboles de archivos:

Mdx

<Files>
  <Folder name="content" defaultOpen>
    <Folder name="docs" defaultOpen>
      <File name="index.mdx" />
      <File name="getting-started.mdx" />
    </Folder>
  </Folder>
  <File name="onedocs.config.ts" />
</Files>

Zoom de imágenes

Imagen que se amplía a tamaño completo al hacer clic. width y height son obligatorios para imágenes de public/:

Mdx

<ImageZoom src="/screenshot.png" alt="Dashboard" width={1200} height={800} />

Tabla de tipos

Documenta las propiedades o las opciones de un API:

Mdx

<TypeTable
  type={{
    title: {
      type: "string",
      description: "Site name shown in the navbar.",
    },
    description: {
      type: "string",
      description: "Used for meta tags and the home page.",
      default: "undefined",
    },
  }}
/>

Más componentes

InstallBlock y CodeBlock de onedocs no están en mdxComponents. Para usarlos en MDX, añádelos al objeto que pases:

TSX

import { CodeBlock, DocsPage, InstallBlock, mdxComponents } from "onedocs";

// In your page component:
<MDX components={{ ...mdxComponents, InstallBlock, CodeBlock }} />

Para cualquier otro elemento, impórtalo desde Fumadocs UI en tu archivo MDX o añádelo de la misma manera:

TypeScript

import { Banner } from "fumadocs-ui/components/banner";
import { InlineTOC } from "fumadocs-ui/components/inline-toc";

Consulta la documentación de Fumadocs para ver la lista completa.