Компоненты прозы

Это руководство для авторов объясняет инструменты подготовки материалов сайта; оно не является энциклопедической статьёй о тюркской культуре.

Accordion

Используйте accordion и accordion-item для создания сворачиваемых разделов содержимого. Аккордеоны удобны для организации часто задаваемых вопросов, раскрываемых деталей или сгруппированной информации.

::accordion

:::accordion-item{label="What are the main considerations when upgrading to Nuxt UI v3?" icon="i-lucide-circle-help"}
The transition to v3 involves significant changes, including new component structures, updated theming approaches, and revised TypeScript definitions. We recommend a careful, incremental upgrade process, starting with thorough testing in a development environment.
:::

:::accordion-item{label="Is Nuxt UI v3 compatible with standalone Vue projects?" icon="i-lucide-circle-help"}
Nuxt UI is now compatible with Vue! You can follow the [installation guide](/ru/docs/essentials/markdown-syntax) to get started.
:::

::

Badge

Используйте badge для отображения индикаторов статуса или меток. Значки отлично подходят для выделения номеров версий, статусов или категорий в содержимом.

::badge
**v3.0.0-alpha.10**
::

Callout

Используйте callout для акцентирования важной контекстной информации. Выноски привлекают внимание к примечаниям, советам, предупреждениям или предостережениям.

Настраивайте с помощью свойств icon и color, или используйте ярлыки note, tip, warning, caution для предопределённых семантических стилей.

::callout
This is a `callout` with full **markdown** support.
::

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

Используйте card для выделения блоков содержимого. Карточки полезны для демонстрации функций, ресурсов или связанной информации в визуально отдельных контейнерах.

Настраивайте с помощью свойств title, icon и color. Карточки также могут выступать в роли ссылок через свойства <NuxtLink>.

::card
---
title: Dashboard
icon: i-simple-icons-github
to: https://github.com/nuxt-ui-templates/dashboard
target: _blank
---
A dashboard with multi-column layout.
::

CardGroup

Используйте card-group для размещения карточек в сетке. Идеально подходит для отображения коллекций карточек в структурированной и адаптивной сетке.

::card-group

::card
---
title: Dashboard
icon: i-simple-icons-github
to: https://github.com/nuxt-ui-templates/dashboard
target: _blank
---
A dashboard with multi-column layout.
::

::card
---
title: SaaS
icon: i-simple-icons-github
to: https://github.com/nuxt-ui-templates/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-templates/docs
target: _blank
---
A documentation with `@nuxt/content`.
::

::card
---
title: Landing
icon: i-simple-icons-github
to: https://github.com/nuxt-ui-templates/landing
target: _blank
---
A landing page you can use as starting point.
::

::

Collapsible

Используйте collapsible для скрытия и раскрытия разделов содержимого. Идеально подходит для отображения дополнительных деталей, технических характеристик или редко нужной информации.

::collapsible

| Prop    | Default   | Type                     |
|---------|-----------|--------------------------|
| `name`  |           | `string`{lang="ts-type"} |
| `size`  | `md`      | `string`{lang="ts-type"} |
| `color` | `neutral` | `string`{lang="ts-type"} |

::

Field

Используйте field для описания конкретного поля, свойства или параметра. Компоненты field идеально подходят для документирования параметров API, пропсов компонентов или параметров конфигурации.

::field{name="name" type="string" required}
The `description` can be set as prop or in the default slot with full **markdown** support.
::

FieldGroup

Используйте field-group для группировки связанных полей в список. Помогает организовать и структурировать документацию для нескольких связанных полей или свойств.

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

Используйте icon для вставки иконок из библиотек. Иконки обеспечивают визуальные подсказки и улучшают интерфейс документации.

:icon{name="i-simple-icons-nuxtdotjs"}

Kbd

Используйте kbd для отображения клавиш клавиатуры или сочетаний клавиш. Компоненты kbd наглядно указывают на клавиатурный ввод в инструкциях или справочниках команд.

:kbd{value="meta"} :kbd{value="K"}

Tabs

Используйте tabs и tabs-item для организации содержимого во вкладочные интерфейсы. Вкладки эффективно разделяют содержимое на логические разделы, улучшая навигацию.

::callout
Lorem velit voluptate ex reprehenderit ullamco et culpa.
::

::tabs

:::tabs-item{label="Code" icon="i-lucide-code"}

```mdc
::callout
Lorem velit voluptate ex reprehenderit ullamco et culpa.
::
```

:::

:::tabs-item{label="Preview" icon="i-lucide-eye"}

::::callout
Lorem velit voluptate ex reprehenderit ullamco et culpa.
::::

:::

::

Steps

Используйте steps для создания пошаговых руководств из заголовков документа. Компонент steps автоматически нумерует заголовки, создавая пронумерованное руководство для процессов и туториалов.

Установите свойство level для определения уровня заголовков, включаемых в пошаговое руководство.

export default defineNuxtConfig({
  modules: ['@nuxt/ui']
})

@import "../../../../node_modules/tailwindcss/dist/lib.d.mts";
@import "module.d.mts";

::steps{level="4"}

#### Add the Nuxt UI module in your `nuxt.config.ts`{lang="ts-type"}

```ts [nuxt.config.ts]
export default defineNuxtConfig({
modules: ['@nuxt/ui']
})
```

#### Import Tailwind CSS and Nuxt UI in your CSS

```css [assets/css/main.css]
@import "tailwindcss";
@import "@nuxt/ui";
```

::