first commit
This commit is contained in:
424
.starter/content/2.essentials/3.components.md
Normal file
424
.starter/content/2.essentials/3.components.md
Normal file
@ -0,0 +1,424 @@
|
||||
---
|
||||
title: Markdown Components
|
||||
description: Use Markdown components to help you structure your content, with
|
||||
the help of Nuxt UI Pro.
|
||||
navigation:
|
||||
icon: i-lucide-component
|
||||
title: Components
|
||||
---
|
||||
|
||||
Prose components are replacements for HTML typography tags. They provide a simple way to customize your UI when using Markdown.
|
||||
|
||||
**Docus and Nuxt UI Pro** provides a set of styled and beautiful prose components to help you write your documentation using the [MDC syntax](https://content.nuxt.com/docs/files/markdown#mdc-syntax).
|
||||
|
||||
::prose-note{to="https://ui.nuxt.com/getting-started"}
|
||||
This page highlights only the prose components best suited for writing documentation. However, you can use **any Nuxt UI or Nuxt UI Pro component** in your Markdown. For the full list of available components, visit the Nuxt UI documentation.
|
||||
::
|
||||
|
||||
### `Accordion`
|
||||
|
||||
Use the `accordion` and `accordion-item` components to display an [Accordion](https://ui.nuxt.com/components/accordion) in your content.
|
||||
|
||||
::tabs
|
||||
:::tabs-item{icon="i-lucide-eye" label="Preview"}
|
||||
::::accordion
|
||||
:::::accordion-item
|
||||
---
|
||||
icon: i-lucide-circle-help
|
||||
label: What is Docus and what are its key features??
|
||||
---
|
||||
Docus is a fully integrated documentation solution built with Nuxt UI Pro. It's a theme based on the UI Pro documentation template that provides a ready-to-use visual. User can focus on content using Markdown and MDC syntax.
|
||||
:::::
|
||||
|
||||
:::::accordion-item
|
||||
---
|
||||
icon: i-lucide-circle-help
|
||||
label: How do I get started with Docus?
|
||||
---
|
||||
The only thing you need to start a Docus project is a `content/` folder. You can have a check at the starter for a quick start.
|
||||
:::::
|
||||
|
||||
:::::accordion-item{icon="i-lucide-circle-help" label="What is Nuxt UI Pro?"}
|
||||
Nuxt UI Pro is a collection of premium Vue components, composables and utils built on top of [Nuxt UI](https://ui.nuxt.com/). Nuxt UI Pro is free in development, but you need a license to use it in production.
|
||||
:::::
|
||||
::::
|
||||
:::
|
||||
|
||||
:::tabs-item{icon="i-lucide-code" label="Code"}
|
||||
```mdc
|
||||
::accordion
|
||||
|
||||
:::accordion-item{label="What is Docus and what are its key features??" icon="i-lucide-circle-help"}
|
||||
Docus is a fully integrated documentation solution built with Nuxt UI Pro. It's a theme based on the UI Pro documentation template that provides a ready-to-use visual. User can focus on content using Markdown and MDC syntax.
|
||||
:::
|
||||
|
||||
:::accordion-item{label="How do I get started with Docus?" icon="i-lucide-circle-help"}
|
||||
The only thing you need to start a Docus project is a `content/` folder. You can have a check at the starter for a quick start.
|
||||
:::
|
||||
|
||||
:::accordion-item{label="What is Nuxt UI Pro?" icon="i-lucide-circle-help"}
|
||||
Nuxt UI Pro is a collection of premium Vue components, composables and utils built on top of [Nuxt UI](https://ui.nuxt.com/). Nuxt UI Pro is free in development, but you need a license to use it in production.
|
||||
:::
|
||||
::
|
||||
```
|
||||
:::
|
||||
::
|
||||
|
||||
### `Badge`
|
||||
|
||||
Use markdown in the default slot of the `badge` component to display a [Badge](https://ui.nuxt.com/components/badge) in your content.
|
||||
|
||||
::tabs
|
||||
:::tabs-item{.my-5 icon="i-lucide-eye" label="Preview"}
|
||||
::::badge
|
||||
**v3.0.0**
|
||||
::::
|
||||
:::
|
||||
|
||||
:::tabs-item{icon="i-lucide-code" label="Code"}
|
||||
```mdc
|
||||
::badge
|
||||
**v3.0.0**
|
||||
::
|
||||
```
|
||||
:::
|
||||
::
|
||||
|
||||
### `Callout`
|
||||
|
||||
Use markdown in the default slot of the `callout` component to add eye-catching context to your content.
|
||||
|
||||
Use the `icon` and `color` props to customize it. You can also pass any property from the [`<NuxtLink>`](https://nuxt.com/docs/api/components/nuxt-link) component.
|
||||
|
||||
You can also use the `note`, `tip`, `warning` and `caution` shortcuts with pre-defined icons and colors.
|
||||
|
||||
::tabs
|
||||
:::tabs-item{.my-5 icon="i-lucide-eye" label="Preview"}
|
||||
::::div{.flex.flex-col.gap-4.w-full}
|
||||
:::::note{.w-full.my-0}
|
||||
Here's some additional information for you.
|
||||
:::::
|
||||
|
||||
:::::tip{.w-full.my-0}
|
||||
Here's a helpful suggestion.
|
||||
:::::
|
||||
|
||||
:::::warning{.w-full.my-0}
|
||||
Be careful with this action as it might have unexpected results.
|
||||
:::::
|
||||
|
||||
:::::caution{.w-full.my-0}
|
||||
This action cannot be undone.
|
||||
:::::
|
||||
::::
|
||||
:::
|
||||
|
||||
:::tabs-item{icon="i-lucide-code" label="Code"}
|
||||
```mdc
|
||||
::note
|
||||
Here's some additional information.
|
||||
::
|
||||
|
||||
::tip
|
||||
Here's a helpful suggestion.
|
||||
::
|
||||
|
||||
::warning
|
||||
Be careful with this action as it might have unexpected results.
|
||||
::
|
||||
|
||||
::caution
|
||||
This action cannot be undone.
|
||||
::
|
||||
```
|
||||
:::
|
||||
::
|
||||
|
||||
### `Card` and `CardGroup`
|
||||
|
||||
Use markdown in the default slot of the `card` component to highlight your content.
|
||||
|
||||
Use the `title`, `icon` and `color` props to customize it. You can also pass any property from the [`<NuxtLink>`](https://nuxt.com/docs/api/components/nuxt-link).
|
||||
|
||||
Wrap your `card` components with the `card-group` component to group them together in a grid layout.
|
||||
|
||||
::tabs
|
||||
:::tabs-item{.my-5 icon="i-lucide-eye" label="Preview"}
|
||||
::::card-group{.w-full.my-0}
|
||||
:::::card
|
||||
---
|
||||
icon: i-simple-icons-github
|
||||
target: _blank
|
||||
title: Dashboard
|
||||
to: https://github.com/nuxt-ui-pro/dashboard
|
||||
---
|
||||
A dashboard with multi-column layout.
|
||||
:::::
|
||||
|
||||
:::::card
|
||||
---
|
||||
icon: i-simple-icons-github
|
||||
target: _blank
|
||||
title: SaaS
|
||||
to: https://github.com/nuxt-ui-pro/saas
|
||||
---
|
||||
A template with landing, pricing, docs and blog.
|
||||
:::::
|
||||
|
||||
:::::card
|
||||
---
|
||||
icon: i-simple-icons-github
|
||||
target: _blank
|
||||
title: Docs
|
||||
to: https://github.com/nuxt-ui-pro/docs
|
||||
---
|
||||
A documentation with `@nuxt/content`.
|
||||
:::::
|
||||
|
||||
:::::card
|
||||
---
|
||||
icon: i-simple-icons-github
|
||||
target: _blank
|
||||
title: Landing
|
||||
to: https://github.com/nuxt-ui-pro/landing
|
||||
---
|
||||
A landing page you can use as starting point.
|
||||
:::::
|
||||
::::
|
||||
:::
|
||||
|
||||
:::tabs-item{.my-5 icon="i-lucide-eye" label="Preview"}
|
||||
```mdc
|
||||
:::card-group
|
||||
|
||||
::card
|
||||
---
|
||||
title: Dashboard
|
||||
icon: i-simple-icons-github
|
||||
to: https://github.com/nuxt-ui-pro/dashboard
|
||||
target: _blank
|
||||
---
|
||||
A dashboard with multi-column layout.
|
||||
::
|
||||
|
||||
::card
|
||||
---
|
||||
title: SaaS
|
||||
icon: i-simple-icons-github
|
||||
to: https://github.com/nuxt-ui-pro/saas
|
||||
target: _blank
|
||||
---
|
||||
A template with landing, pricing, docs and blog.
|
||||
::
|
||||
|
||||
::card
|
||||
---
|
||||
title: Docs
|
||||
icon: i-simple-icons-github
|
||||
to: https://github.com/nuxt-ui-pro/docs
|
||||
target: _blank
|
||||
---
|
||||
A documentation with `@nuxt/content`.
|
||||
::
|
||||
|
||||
::card
|
||||
---
|
||||
title: Landing
|
||||
icon: i-simple-icons-github
|
||||
to: https://github.com/nuxt-ui-pro/landing
|
||||
target: _blank
|
||||
---
|
||||
A landing page you can use as starting point.
|
||||
::
|
||||
|
||||
:::
|
||||
```
|
||||
:::
|
||||
::
|
||||
|
||||
### `Collapsible`
|
||||
|
||||
Wrap your content with the `collapsible` component to display a [Collapsible](https://ui.nuxt.com/components/collapsible) in your content.
|
||||
|
||||
::tabs
|
||||
:::tabs-item{.my-5 icon="i-lucide-eye" label="Preview"}
|
||||
::::collapsible
|
||||
| Prop | Default | Type |
|
||||
| ------- | --------- | -------- |
|
||||
| `name` | | `string` |
|
||||
| `size` | `md` | `string` |
|
||||
| `color` | `neutral` | `string` |
|
||||
::::
|
||||
:::
|
||||
|
||||
:::tabs-item{icon="i-lucide-code" label="Code"}
|
||||
```mdc
|
||||
::collapsible
|
||||
|
||||
| Prop | Default | Type |
|
||||
|---------|-----------|--------------------------|
|
||||
| `name` | | `string`{lang="ts-type"} |
|
||||
| `size` | `md` | `string`{lang="ts-type"} |
|
||||
| `color` | `neutral` | `string`{lang="ts-type"} |
|
||||
|
||||
::
|
||||
```
|
||||
:::
|
||||
::
|
||||
|
||||
### `Field` and `FieldGroup`
|
||||
|
||||
A `field`is a prop or parameter to display in your content. You can group them by `field-group` in a list.
|
||||
|
||||
::tabs
|
||||
:::tabs-item{.my-5 icon="i-lucide-eye" label="Preview"}
|
||||
::::field-group{.my-0}
|
||||
:::::field{name="analytics" type="boolean"}
|
||||
Default to `false` - Enables analytics for your project (coming soon).
|
||||
:::::
|
||||
|
||||
:::::field{name="blob" type="boolean"}
|
||||
Default to `false` - Enables blob storage to store static assets, such as images, videos and more.
|
||||
:::::
|
||||
|
||||
:::::field{name="cache" type="boolean"}
|
||||
Default to `false` - Enables cache storage to cache your server route responses or functions using Nitro's `cachedEventHandler` and `cachedFunction`
|
||||
:::::
|
||||
|
||||
:::::field{name="database" type="boolean"}
|
||||
Default to `false` - Enables SQL database to store your application's data.
|
||||
:::::
|
||||
::::
|
||||
:::
|
||||
|
||||
:::tabs-item{icon="i-lucide-code" label="Code"}
|
||||
```mdc
|
||||
::field-group
|
||||
::field{name="analytics" type="boolean"}
|
||||
Default to `false` - Enables analytics for your project (coming soon).
|
||||
::
|
||||
|
||||
::field{name="blob" type="boolean"}
|
||||
Default to `false` - Enables blob storage to store static assets, such as images, videos and more.
|
||||
::
|
||||
|
||||
::field{name="cache" type="boolean"}
|
||||
Default to `false` - Enables cache storage to cache your server route responses or functions using Nitro's `cachedEventHandler` and `cachedFunction`
|
||||
::
|
||||
|
||||
::field{name="database" type="boolean"}
|
||||
Default to `false` - Enables SQL database to store your application's data.
|
||||
::
|
||||
::
|
||||
```
|
||||
:::
|
||||
::
|
||||
|
||||
### `Icon`
|
||||
|
||||
Use the `icon` component to display an [Icon](https://ui.nuxt.com/components/icon) in your content.
|
||||
|
||||
::code-preview
|
||||
:icon{name="i-simple-icons-nuxtdotjs"}
|
||||
|
||||
|
||||
|
||||
#code
|
||||
```mdc
|
||||
:icon{name="i-simple-icons-nuxtdotjs"}
|
||||
```
|
||||
::
|
||||
|
||||
### `Kbd`
|
||||
|
||||
Use the `kbd` component to display a [Kbd](https://ui.nuxt.com/components/kbd) in your content.
|
||||
|
||||
::code-preview
|
||||
#code
|
||||
```mdc
|
||||
:kbd{value="meta"} :kbd{value="K"}
|
||||
```
|
||||
::
|
||||
|
||||
### `Tabs`
|
||||
|
||||
Use the `tabs` and `tabs-item` components to display [Tabs](https://ui.nuxt.com/components/tabs) in your content.
|
||||
|
||||
::code-preview
|
||||
:::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="Preview"}
|
||||
:::::callout
|
||||
Lorem velit voluptate ex reprehenderit ullamco et culpa.
|
||||
:::::
|
||||
::::
|
||||
:::
|
||||
|
||||
#code
|
||||
````mdc
|
||||
::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="Preview"}
|
||||
:::::callout
|
||||
Lorem velit voluptate ex reprehenderit ullamco et culpa.
|
||||
:::::
|
||||
:::
|
||||
::
|
||||
````
|
||||
::
|
||||
|
||||
### `Steps`
|
||||
|
||||
Wrap your headings with the Steps component to display a list of steps.
|
||||
|
||||
Use the `level` prop to define which heading will be used for the steps.
|
||||
|
||||
::tabs
|
||||
:::tabs-item{.my-5 icon="i-lucide-eye" label="Preview"}
|
||||
::::steps{level="4"}
|
||||
#### Start a fresh new project
|
||||
|
||||
```bash [Terminal]
|
||||
npx nuxi init -t github:nuxt-ui-pro/docus
|
||||
```
|
||||
|
||||
#### Run docus CLI to run your dev server
|
||||
|
||||
```bash [Terminal]
|
||||
docus dev
|
||||
```
|
||||
::::
|
||||
:::
|
||||
|
||||
:::tabs-item{icon="i-lucide-code" label="Code"}
|
||||
````mdc
|
||||
::steps{level="4"}
|
||||
#### Start a fresh new project
|
||||
|
||||
```bash [Terminal]
|
||||
npx nuxi init -t github:nuxt-ui-pro/docus
|
||||
```
|
||||
|
||||
#### Run docus CLI to run your dev server
|
||||
|
||||
```bash [Terminal]
|
||||
docus dev
|
||||
```
|
||||
::
|
||||
````
|
||||
:::
|
||||
::
|
||||
Reference in New Issue
Block a user