Map Naive UI List components to structured rendering with headers, footers, dividers, and item slots.
npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-list
Please help me install this Agent Skill. Skill: n-list Source: https://github.com/jiaiyan/naive-ui-skills/tree/main/components/n-list Command: npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-list
List component provides a consistent way to display structured lists with optional header, footer, borders, dividers, and item slots, reducing UI drift and boilerplate.
Create a sample list in a Vue template using n-list and n-list-item to render a header, several items, and a footer.
High-intent search queries and answers about installing and using this skill.
To create a structured list in Naive UI, use the list component to map items into a rendered layout with headers, footers, dividers, and prefix or suffix slots. This approach reduces UI drift and boilerplate when building content lists or menu-like sections.
Yes, you can add a header and footer to a Naive UI list component. The list supports header and footer slots to define contextual sections, enabling structured rendering for notification feeds, settings menus, and chat-like item lists.
The Naive UI list component satisfies functional requirements for bordered and hoverable lists. It provides bordered style and divider control to establish visual hierarchy within your Vue application's structured content.
You can use prefix and suffix slots in a Naive UI list to enable slot-based customization. These slots allow flexible item content rendering alongside rich content integration, defining the layout for interactive list items.
The best way to build a notification feed layout is using the Naive UI list component, which provides structured rendering with headers, dividers, and item slots. This reduces boilerplate when mapping content to consistent list structures.
The list component maps structured rendering via item slots and rich content with n-thing for flexible item content. However, complex layouts rely solely on header, footer, prefix, and suffix slots, limiting deeply nested structural customization beyond these defined boundaries.
serverpodGenerate Flutter UI cards with customizable headers, footers, and content using shadcn_ui.
jiaiyanRender large item lists efficiently by virtualization in Vue.
jiaiyanRender calendar-style heatmaps from time-series data in Vue 3 with Naive UI.
jiaiyanCreate and control contextual dropdown menus for Naive UI components in Vue 3.
