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

wok-ui-drawer

Display edge-docked drawers with showDrawer for placement, width, and callbacks.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Edge panels are common for menus, settings, or contextual info, and need a simple, consistent UI component. This skill provides a quick way to display a slide-in drawer using wok-ui's showDrawer function, reducing boilerplate and ensuring a consistent UX across a project.

Core Features & Use Cases

  • Show a drawer by calling showDrawer with a title, body, and placement (left, right, top, bottom) to present contextual content.
  • Control width for left/right drawers; customize content by replacing the body; receive callbacks on close and after showing.
  • Use cases include side menus, settings panels, and contextual help that can be dismissed.

Quick Start

Use showDrawer to display a right-aligned drawer with a title and body.

Frequently Asked Questions about wok-ui-drawer

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

FAQPage Schema
How do I add a sliding drawer to a frontend dashboard?▼

You can add a sliding drawer to a frontend dashboard by calling the showDrawer function with a title, body, and placement to quickly display contextual content without writing boilerplate panel code.

Can I control the width and placement of a side panel?▼

Yes, you can control a side panel by specifying placement as left, right, top, or bottom, and adjusting the width option for left and right oriented drawers to fit your layout.

How do I trigger lifecycle callbacks when a drawer closes?▼

You trigger lifecycle callbacks when a drawer closes by defining the close and after-showing functions in the showDrawer options, allowing your frontend app to execute logic upon dismissal.

What is the best way to display contextual menus in a single-page application?▼

The best way to display contextual menus in a single-page application is using an edge-docked drawer component that slides in to present contextual info and dismisses without navigating away.

Can I replace the drawer body with custom content dynamically?▼

Yes, you can replace the drawer body with custom content dynamically by utilizing the replaceByBody option within the showDrawer API to inject specific elements into the panel.

Does this drawer component work without external UI dependencies?▼

Yes, the drawer component works without external UI dependencies, allowing you to implement edge-docked panels directly within your frontend app using only the core library.

Related Skills

Explore More Software Engineering Skills→
PeakTaiPeakTai

wok-ui-getting-started

Guide wok-ui project creation, installation, and routing with npm.

Community
Intermediate
FlukeSupakornFlukeSupakorn
1

adding-tauri-system-tray

Build Tauri v2 system trays with menus, events, and runtime updates.

Community
Intermediate
PeakTaiPeakTai

wok-ui-feedback

Provide unified loading, toast, and dialog feedback APIs for wok-ui apps.

Community
Intermediate
tchiphuongtchiphuong

heroui-overlays

Create Hero UI overlay components for React frontends.

Community
Intermediate