Composants Markdown
Les composants prose sont des remplacements pour les balises de typographie HTML. Ils offrent un moyen simple de personnaliser votre interface lors de l'utilisation de Markdown.
Docus et Nuxt UI fournissent un ensemble de composants prose stylés et élégants pour vous aider à rédiger votre documentation avec la syntaxe MDC.
Accordion
Utilisez les composants accordion et accordion-item pour afficher un Accordion dans votre contenu.
content/. Consultez le starter pour un démarrage rapide.::accordion
:::accordion-item{label="Qu'est-ce que Docus et quelles sont ses fonctionnalités clés ?" icon="i-lucide-circle-help"}
Docus est une solution de documentation entièrement intégrée construite avec Nuxt UI. C'est un thème inspiré du template de documentation Nuxt UI qui fournit un visuel prêt à l'emploi. L'utilisateur peut se concentrer sur le contenu en utilisant Markdown et la syntaxe MDC.
:::
:::accordion-item{label="Comment démarrer avec Docus ?" icon="i-lucide-circle-help"}
La seule chose dont vous avez besoin pour démarrer un projet Docus est un dossier `content/`. Consultez le starter pour un démarrage rapide.
:::
:::accordion-item{label="Qu'est-ce que Nuxt UI ?" icon="i-lucide-circle-help"}
Nuxt UI est une collection de composants Vue premium, de composables et d'utilitaires construits sur [Nuxt UI](https://ui.nuxt.com/). Nuxt UI est gratuit en développement, mais nécessite une licence pour la production.
:::
::
Badge
Utilisez du markdown dans le slot par défaut du composant badge pour afficher un Badge dans votre contenu.
::badge
**v3.0.0**
::
Callout
Utilisez du markdown dans le slot par défaut du composant callout pour ajouter un contexte visuel à votre contenu.
Utilisez les props icon et color pour le personnaliser. Vous pouvez aussi passer n'importe quelle propriété du composant <NuxtLink>.
Vous pouvez également utiliser les raccourcis note, tip, warning et caution avec des icônes et couleurs prédéfinies.
::note
Voici des informations supplémentaires.
::
::tip
Voici une suggestion utile.
::
::warning
Faites attention à cette action car elle pourrait avoir des résultats inattendus.
::
::caution
Cette action est irréversible.
::
Card et CardGroup
Utilisez du markdown dans le slot par défaut du composant card pour mettre en avant votre contenu.
Utilisez les props title, icon et color pour le personnaliser. Vous pouvez aussi passer n'importe quelle propriété du composant <NuxtLink>.
Regroupez vos composants card avec le composant card-group pour les afficher en grille.
:::card-group
::card
---
title: Tableau de bord
icon: i-simple-icons-github
to: https://github.com/nuxt-ui-templates/dashboard
target: _blank
---
Un tableau de bord avec une mise en page multi-colonnes.
::
::card
---
title: SaaS
icon: i-simple-icons-github
to: https://github.com/nuxt-ui-templates/saas
target: _blank
---
Un template avec landing, pricing, docs et blog.
::
::card
---
title: Docs
icon: i-simple-icons-github
to: https://github.com/nuxt-ui-templates/docs
target: _blank
---
Une documentation avec `@nuxt/content`.
::
::card
---
title: Landing
icon: i-simple-icons-github
to: https://github.com/nuxt-ui-templates/landing
target: _blank
---
Une page d'accueil à utiliser comme point de départ.
::
:::
Collapsible
Enveloppez votre contenu avec le composant collapsible pour afficher un Collapsible dans votre contenu.
| Prop | Défaut | Type |
|---|---|---|
name | string | |
size | md | string |
color | neutral | string |
::collapsible
| Prop | Défaut | Type |
|---------|-----------|--------------------------|
| `name` | | `string`{lang="ts-type"} |
| `size` | `md` | `string`{lang="ts-type"} |
| `color` | `neutral` | `string`{lang="ts-type"} |
::
Field et FieldGroup
Un field est une prop ou un paramètre à afficher dans votre contenu. Vous pouvez les regrouper avec field-group dans une liste.
false - Active l'analytics pour votre projet (bientôt disponible).false - Active le stockage blob pour stocker des assets statiques, comme des images, vidéos et plus.false - Active le cache pour mettre en cache les réponses de vos routes serveur ou fonctions avec cachedEventHandler et cachedFunction de Nitro.false - Active la base de données SQL pour stocker les données de votre application.::field-group
::field{name="analytics" type="boolean"}
Par défaut à `false` - Active l'analytics pour votre projet (bientôt disponible).
::
::field{name="blob" type="boolean"}
Par défaut à `false` - Active le stockage blob pour stocker des assets statiques, comme des images, vidéos et plus.
::
::field{name="cache" type="boolean"}
Par défaut à `false` - Active le cache pour mettre en cache les réponses de vos routes serveur ou fonctions avec `cachedEventHandler` et `cachedFunction` de Nitro.
::
::field{name="database" type="boolean"}
Par défaut à `false` - Active la base de données SQL pour stocker les données de votre application.
::
::
Icon
Utilisez le composant icon pour afficher une Icône dans votre contenu.
:icon{name="i-simple-icons-nuxtdotjs"}
Kbd
Utilisez le composant kbd pour afficher un Kbd dans votre contenu.
:kbd{value="meta"} :kbd{value="K"}
Tabs
Utilisez les composants tabs et tabs-item pour afficher des Onglets dans votre contenu.
::callout
Lorem velit voluptate ex reprehenderit ullamco et culpa.
::
::tabs{.w-full}
:::tabs-item{icon="i-lucide-code" label="Code"}
```mdc
::::callout
Lorem velit voluptate ex reprehenderit ullamco et culpa.
::::
```
::::
:::tabs-item{icon="i-lucide-eye" label="Aperçu"}
:::::callout
Lorem velit voluptate ex reprehenderit ullamco et culpa.
:::::
:::
::
Steps
Enveloppez vos titres avec le composant Steps pour afficher une liste d'étapes.
Utilisez la prop level pour définir quel titre sera utilisé pour les étapes.
Démarrer un nouveau projet
npm create nuxt@latest -- -t github:nuxt-content/docus
Lancer le CLI docus pour démarrer votre serveur de dev
docus dev
::steps{level="4"}
#### Démarrer un nouveau projet
```bash [Terminal]
npm create nuxt@latest -- -t github:nuxt-content/docus
```
#### Lancer le CLI docus pour démarrer votre serveur de dev
```bash [Terminal]
docus dev
```
::