skills.rest
jiaiyan
jiaiyanCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

n-collapse

Manage collapsible content panels in Naive UI applications.

8|3|Updated Mar 13, 2026
Search Tags:#interactive#collapse#accordion#ui-component#naive-ui#nested-panels#header-slots
One-click install
npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-collapse
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: n-collapse
Source: https://github.com/jiaiyan/naive-ui-skills/tree/main/components/n-collapse
Command: npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-collapse

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides a ready-to-use collapse component to organize content into expandable panels for cleaner interfaces and improved information hierarchy.

Core Features & Use Cases

  • Accordion-style and nested collapses for sidebars, FAQs, and settings panels.
  • Custom headers and header-extra content via slots, and flexible trigger areas for user interactions.
  • Display directives and per-item state management for both controlled and uncontrolled expansion.

Quick Start

Create a basic collapse with several items to see how headers toggle content.

Frequently Asked Questions about n-collapse

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build an accordion-style collapsible panel for a Naive UI sidebar?▼

To build an accordion-style collapsible panel in Naive UI, use this skill to manage nested panels with accordion mode, arrow placement, and custom headers via slots to streamline complex sidebar interfaces.

Can I customize the header content and trigger areas in a Naive UI collapse component?▼

Yes, you can customize the header content and trigger areas in a Naive UI collapse component using header slots and header-extra content, allowing flexible user interactions and per-item state management.

What is the best way to organize FAQ sections with expandable panels in a Vue application?▼

The best way to organize FAQ sections with expandable panels is using accordion-style collapses that support nested structures and display directives, improving content hierarchy and information organization.

Does Naive UI support nested collapses for settings sections?▼

Naive UI supports nested collapses for settings sections by applying accordion mode and display directives, allowing both controlled and uncontrolled expansion states for complex interface management.

Why do I need display directives in a collapsible content panel?▼

Display directives are needed in collapsible content panels to manage per-item state and control how hidden content is rendered in the DOM, ensuring proper expansion behavior for both controlled and uncontrolled components.

Related Skills

Explore More Software Engineering Skills→
jiaiyanjiaiyan
8

naive-ui-i18n

Configure Naive UI internationalization with NConfigProvider and createLocale for Vue 3 apps.

Community
Advanced
hugoduncanhugoduncan
3

magit-section

Create interactive hierarchical collapsible section-based UIs in Emacs buffers.

Community
Advanced
jiaiyanjiaiyan
8

n-layout

Compose Naive UI layout components for scalable page structures.

Community
Advanced
danielnymbergdanielnymberg

syncfusion-verified

Resolve SyncFusion EJ2 React component misconfigurations with verified patterns.

Community
Advanced