AI导哈

前端开发

syncfusion-react-sidebar

syncfusion/reac…s-skills

Implement responsive Syncfusion React Sidebar component for navigation layouts. Use this when building responsive navigation menus, drawer layouts, or collapsible sidebars with various display modes (Over, Push, Slide). This skill covers sidebar configuration, animations, backdrop overlays, keyboard accessibility, and integration with multi-level navigation systems.

  • 664 次安装
  • 3 星标
  • 收录于

安装命令

npx skills add https://github.com/syncfusion/react-ui-components-skills --skill syncfusion-react-sidebar

SKILL.md

Implementing Syncfusion React Sidebar

The Syncfusion React Sidebar is a responsive navigation component that enables flexible layout patterns for modern web applications. It supports multiple display modes (Over, Push, Slide, Auto), responsive breakpoints, touch gestures, keyboard navigation, and seamless integration with ListView and TreeView components.

When to Use This Skill

Choose Sidebar when you need:

  • Responsive navigation - Drawer menus that adapt to desktop/mobile viewports
  • Multi-mode layouts - Over (float), Push (shift content), Slide (translate), or Auto (responsive) behaviors
  • Content organization - Nested menus, ListView/TreeView integration, or multi-panel layouts
  • User interaction patterns - Toggle buttons, backdrop overlays, auto-close on item click, or keyboard shortcuts
  • Accessibility - ARIA labels, keyboard navigation (Tab, Enter, Escape), and screen reader support
  • Customization - Themed styling, animation variations, RTL support, or custom context containers

Navigation Guide

相关 Skills

syncfusion-react-gridsyncfusion/reac…s-skillsImplements Syncfusion React Grid component for feature-rich data tables and grids. Use this when working with data display, sorting, filtering, grouping, aggregates, editing, or exporting. This skill covers grid configuration, CRUD operations, virtual scrolling or infinite scrolling, hierarchy grids, state persistence, and advanced data management features for data-intensive applications.前端开发832syncfusion-react-schedulersyncfusion/reac…s-skillsImplement Syncfusion React Scheduler component for calendar, event scheduling, and appointment management. Use this when building scheduling systems, calendar applications, booking systems, or time management interfaces. Covers all scheduler views (Day, Week, Month, Timeline, Agenda, Year), data binding, resource scheduling, recurring events, CRUD operations, drag-and-drop scheduling, customization, accessibility, and advanced features.前端开发791syncfusion-react-gantt-chartsyncfusion/reac…s-skillsImplement, configure, and customize the Syncfusion React Gantt Chart component. Use this when building project scheduling applications with task timelines, dependencies, resource management, and calendar-driven scheduling. Covers GanttComponent setup, task constraints, taskbar customization, filtering, sorting, Excel/PDF export, critical path analysis, milestones, predecessors, resource view, baseline tracking, and task calendar configuration.前端开发781syncfusion-react-rich-text-editorsyncfusion/reac…s-skillsImplements the Syncfusion React Rich Text Editor (RichTextEditorComponent) from ej2-react-richtexteditor, supporting HTML (WYSIWYG) and Markdown editing. Use this skill for toolbar configuration, image/video/audio insertion, paste cleanup, AI assistant integration, emoji picker, slash menu, mentions, import/export Word/PDF, form validation, and source code view in React applications.前端开发765syncfusion-react-chartssyncfusion/reac…s-skillsImplement Syncfusion React Charts component for data visualization. Use this when creating charts, configuring axes and series, or customizing visualization styles. This skill covers chart types, data binding, user interactions, financial indicators, accessibility features, and professional data visualization in React applications.数据与研究757syncfusion-react-treegridsyncfusion/reac…s-skillsImplements Syncfusion React TreeGrid for hierarchical data with sorting, filtering, editing, exporting, paging, virtual scrolling, and advanced features. Supports configuration, CRUD, aggregates, templates, state persistence, and performance optimization in React applications.前端开发754