メニュー
Divider component for separating content sections. Invoke when user needs to implement horizontal or vertical dividers with optional titles in Naive UI.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
FormCreate（运行态渲染器）使用与扩展助手：围绕 rule/option/api 的编写、调试与迁移，覆盖 v-model:api / create 获取实例、字段联动（control/computed）、校验（validate）、远程 fetch、事件注入（inject/formCreateInject）、序列化保存回显（parseJson/toJson）以及多 UI 栈（Antd/Naive/Vant/Arco/TDesign/Element）props/on 差异。权威口径以 `AGENTS.md` 与 `references/types.md` 为准；涉及设计器 ref/config 请用 **FcDesigner使用助手**，涉及安装与包名请选择 **FormCreate安装助手**。
Naive UI Skills Library - A comprehensive skill library for AI agents to understand and utilize Naive UI components. Invoke when user needs to work with Naive UI components, theming, i18n, dark mode, or design specifications.
Work on the Vane server app in apps/server. Use when adding, modifying, reviewing, or debugging server routes, serve-layer data access, middlewares, auth, logging, uploads, database-backed features, or Express response behavior in this repository.
Affix component that makes content stick to fixed places when scrolling. Invoke when user needs to implement sticky positioning or fixed elements in Naive UI.
Alert component for displaying important messages and notifications. Invoke when user needs to show contextual feedback messages with different types and styles in Naive UI.
Anchor component for navigation and table of contents. Invoke when user needs to implement anchor navigation, table of contents, or scroll-based navigation highlighting in Naive UI.
| name | n-divider |
| description | Divider component for separating content sections. Invoke when user needs to implement horizontal or vertical dividers with optional titles in Naive UI. |
| metadata | {"author":"jiaiyan","version":"1.0.0"} |
Divider component for visually separating content sections with horizontal or vertical lines.
Use this component when:
Invoke this skill when:
| Name | Type | Default | Description |
|---|---|---|---|
| dashed | boolean | false | Whether to show dashed line. |
| title-placement | 'left' | 'right' | 'center' | 'center' | Title placement. |
| vertical | boolean | false | Whether to show vertical direction. |
| Name | Parameters | Description |
|---|---|---|
| default | () | The title of divider. |
<template>
<div>
<p>First section content</p>
<n-divider />
<p>Second section content</p>
</div>
</template>
<template>
<div>
<p>First section content</p>
<n-divider>Title Center</n-divider>
<p>Second section content</p>
</div>
</template>
<template>
<div>
<p>Content above</p>
<n-divider title-placement="left">Left Title</n-divider>
<p>Content in between</p>
<n-divider title-placement="right">Right Title</n-divider>
<p>Content below</p>
</div>
</template>
<template>
<div>
<p>Content above</p>
<n-divider dashed>Dashed Line</n-divider>
<p>Content below</p>
</div>
</template>
<template>
<div>
Text
<n-divider vertical />
Link
<n-divider vertical />
Button
</div>
</template>
<template>
<n-card title="Card Title">
<div>First section</div>
<n-divider />
<div>Second section</div>
<n-divider />
<div>Third section</div>
</n-card>
</template>
<template>
<n-form>
<n-form-item label="Name">
<n-input />
</n-form-item>
<n-form-item label="Email">
<n-input />
</n-form-item>
<n-divider>Address Information</n-divider>
<n-form-item label="Street">
<n-input />
</n-form-item>
<n-form-item label="City">
<n-input />
</n-form-item>
</n-form>
</template>
<template>
<n-space align="center">
<n-button text>Home</n-button>
<n-divider vertical />
<n-button text>Products</n-button>
<n-divider vertical />
<n-button text>About</n-button>
<n-divider vertical />
<n-button text>Contact</n-button>
</n-space>
</template>
<template>
<n-divider>
<n-icon :component="StarIcon" />
</n-divider>
</template>
<template>
<n-space align="center">
<n-text depth="3">Step 1</n-text>
<n-divider vertical />
<n-text depth="3">Step 2</n-text>
<n-divider vertical />
<n-text type="primary">Step 3</n-text>
</n-space>
</template>
<template>
<n-divider dashed title-placement="left"> Optional Section </n-divider>
</template>
Use for logical separation: Dividers should separate logically distinct content
<div>Personal Info</div>
<n-divider />
<div>Professional Info</div>
Vertical for inline elements: Use vertical dividers for inline content
<span>Item 1</span>
<n-divider vertical />
<span>Item 2</span>
Title placement: Use title placement to match visual hierarchy
<n-divider title-placement="left">Section Title</n-divider>
Dashed for optional sections: Use dashed style to indicate optional content
<n-divider dashed>Optional</n-divider>
Avoid overuse: Don't use dividers excessively; whitespace can be sufficient
Combine with spacing: Add appropriate spacing around dividers
<n-space vertical size="large">
<div>Content</div>
<n-divider />
<div>Content</div>
</n-space>