wok-ui-drawer

Name: wok-ui-drawer
Availability: InStock
Author: peak

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

Ready to run

npx skills add https://github.com/PeakTai/wok-ui --skill wok-ui-drawer

💬 Prompt for ChatGPT / Claude Chat▼

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.