# Στοιχεία

Το Onedocs καταχωρίζει ένα σύνολο στοιχείων Fumadocs UI για τα αρχεία MDX σας, ώστε να τα χρησιμοποιείτε χωρίς να τα εισάγετε.

## Χρήση στοιχείων

Περάστε το `mdxComponents` στο περιεχόμενο MDX σας:

```tsx title="src/app/docs/[[...slug]]/page.tsx"
import { DocsPage, mdxComponents } from "onedocs";

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

Το `mdxComponents` περιέχει τις προεπιλογές Fumadocs UI (επικεφαλίδες με συνδέσμους αγκύρωσης, μπλοκ κώδικα, συνδέσμους, εικόνες, πίνακες, `Card`, `Cards` και `Callout`), καθώς και τα `Tab`, `Tabs`, `Step`, `Steps`, `Accordion`, `Accordions`, `File`, `Folder`, `Files`, `ImageZoom` και `TypeTable`. Όλα τα παρακάτω παραδείγματα λειτουργούν όπως είναι.

## Πλαίσιο επισήμανσης

Επισημάνετε σημαντικές πληροφορίες. Το `type` είναι ένα από τα `info` (προεπιλογή), `warn`, `error`, `success` ή `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>
```

Προσθέστε επικεφαλίδα με `title`:

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

## Καρτέλες

Οργανώστε το περιεχόμενο σε καρτέλες. Κάθε `Tab` `value` αντιστοιχεί σε μια καταχώριση στο `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>
```

## Κάρτες

Συνδέστε άλλες σελίδες με πλέγματα καρτών:

```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>
```

## Βήματα

Εμφανίστε αριθμημένα βήματα:

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

## Ακορντεόν

Συμπτυσσόμενο περιεχόμενο για συχνές ερωτήσεις και προαιρετικές λεπτομέρειες. Κάθε φορά είναι ανοιχτό μόνο ένα στοιχείο:

```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>
```

## Αρχεία

Εμφανίστε δέντρα αρχείων:

```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>
```

## Μεγέθυνση εικόνας

Μια εικόνα που ανοίγει σε πλήρες μέγεθος όταν κάνετε κλικ. Για εικόνες από το `public/` απαιτούνται τα `width` και `height`:

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

## Πίνακας τύπων

Τεκμηριώστε τα props ή τις επιλογές ενός 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",
    },
  }}
/>
```

## Περισσότερα στοιχεία

Τα `InstallBlock` και `CodeBlock` από το `onedocs` δεν περιλαμβάνονται στο `mdxComponents`. Για να τα χρησιμοποιήσετε στο MDX, προσθέστε τα στο αντικείμενο που περνάτε:

```tsx title="src/app/docs/[[...slug]]/page.tsx"
import { CodeBlock, DocsPage, InstallBlock, mdxComponents } from "onedocs";

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

Για οτιδήποτε άλλο, εισαγάγετέ το από το Fumadocs UI στο αρχείο MDX σας ή προσθέστε το με τον ίδιο τρόπο:

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

Δείτε την τεκμηρίωση του [Fumadocs](https://fumadocs.dev/docs/ui/components) για την πλήρη λίστα.