skills.rest
PeakTai
PeakTaiCOMMUNITY
Explore all skills by this author →
GitHub

wok-ui-dropdown

Create interactive dropdown and dropup menus for wok-ui applications.

Updated Sep 14, 2023
Search Tags:#menus#dropdown#ui-component#wok-ui#dropdownmenu#dropup
One-click install
npx skills add https://github.com/PeakTai/wok-ui --skill wok-ui-dropdown
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: wok-ui-dropdown
Source: https://github.com/PeakTai/wok-ui/tree/main/skills/wok-ui-dropdown
Command: npx skills add https://github.com/PeakTai/wok-ui --skill wok-ui-dropdown

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a straightforward way to add interactive dropdown and dropup menus to wok-ui applications, reducing boilerplate and ensuring consistent UX.

Core Features & Use Cases

  • Dropdown and Dropup components for triggering and displaying menus
  • DropdownMenuItem configuration with label and callback
  • Support for aligning menus via menusAlign and for embedding custom content in menus

Quick Start

Create a new Dropdown with a trigger element and a list of menu items, then attach it to your UI.

Frequently Asked Questions about wok-ui-dropdown

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

FAQPage Schema
How do I add interactive dropdown menus to my wok-ui application?▼

You can add interactive dropdown menus to wok-ui applications by creating a new Dropdown with a trigger element and a list of menu items, then attaching it to your UI. The Skill provides Dropdown and Dropup classes to reduce boilerplate and ensure consistent UX.

Can I embed custom content inside a wok-ui dropdown menu?▼

Yes, you can embed custom content inside wok-ui dropdown menus. The Skill supports embedding custom content across common UI scenarios, alongside customizable menu items configured via the DropdownMenuItem interface.

What's the best way to align a dropdown menu relative to its trigger element?▼

The best way to align a dropdown menu is by using the menusAlign option provided in the DropdownOpts interface. This ensures your menu is positioned correctly relative to its trigger element without manual CSS adjustments.

Does wok-ui support dropup menus as well as standard dropdowns?▼

Yes, wok-ui supports both dropdown and dropup menus. The Skill implements a deterministic API surface with separate Dropdown and Dropup classes, allowing you to trigger menus that expand upwards or downwards depending on your layout needs.

How do I configure menu items with callbacks in a wok-ui dropdown?▼

You configure menu items in a wok-ui dropdown using the DropdownMenuItem interface, which accepts a label and a callback function. This allows you to define the display text and the action executed when a user clicks the item.

Related Skills

Explore More Software Engineering Skills→
SEMOSSSEMOSS
2

semoss-user-menu

Integrate a user profile dropdown and navigation bar into React-based SEMOSS applications.

Official
Intermediate
imkdwimkdw
1

Frontend Accessibility

Implement accessible React components with ARIA, keyboard navigation, and WCAG compliance.

Community
Intermediate
jiaiyanjiaiyan
8

n-dropdown

Create and control contextual dropdown menus for Naive UI components in Vue 3.

Community
Advanced
lilbom32lilbom32

interactive-dashboard-builder

Assemble self-contained HTML dashboards with Chart.js and dropdown filters.

Community
Intermediate