skills.rest
Eyhenij
EyhenijCOMMUNITY
Explore all skills by this author →
GitHub

styling-bem-sheet

Implements bottom sheets and dialogs in Angular using RtDialogService with correct layering and animation.

1|Updated Jan 14, 2024
Search Tags:#angular#signals#dialog#overlay#z-index#mobile ui#bottom sheet
One-click install
npx skills add https://github.com/Eyhenij/rt-tools --skill styling-bem-sheet-eyhenij
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: styling-bem-sheet
Source: https://github.com/Eyhenij/rt-tools/tree/main/.claude/skills/styling-bem-sheet
Command: npx skills add https://github.com/Eyhenij/rt-tools --skill styling-bem-sheet-eyhenij

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Bottom sheets and dialogs placed inline in component markup get trapped in stacking contexts created by sticky headers, transforms, or z-index rules, causing them to be covered by other UI elements and breaking interactions on mobile. ## Core Features & Use Cases - Service-based opening: Opens sheets and full-screen views via RtDialogService so markup is moved to <body>, escaping local stacking contexts. - Data flow pattern: Passes input data through RT_DIALOG_DATA injection and returns results through RtDialogRef.close(), with subscriptions set up in the constructor. - Slide-in animation: Uses afterNextRender with a signal to trigger the slide-from-bottom transition one frame after render, compatible with SSR. - Backdrop handling: Makes the window backdrop transparent in the shared application layer since the sheet dims the background itself. - Use Case: When building a mobile locale picker that slides up from the bottom, this pattern ensures the sheet is never covered by the sticky header and its confirm button always receives taps. ## Quick Start Ask the AI to create a bottom sheet for selecting a language on mobile following the styling-bem sheet pattern with RtDialogService.

Frequently Asked Questions about styling-bem-sheet

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

FAQPage Schema
How do I open a bottom sheet in Angular without z-index issues?▼

Open the sheet through a dialog service like RtDialogService instead of placing it in markup next to its trigger button. The service moves the markup to <body>, so the sheet escapes stacking contexts created by sticky headers, transforms, or filters.

How to pass data into an Angular dialog and get a result back?▼

Pass data through the dialog open call and inject it inside the sheet using the RT_DIALOG_DATA token. Return the result by calling RtDialogRef.close(value), and subscribe to afterClosed() from a Subject wired in the constructor.

Why is my bottom sheet covered by the sticky header?▼

A sticky header that blurs its background creates a stacking context, locking everything inside it into that layer. A sheet written inside the header compares z-index only with its siblings, so it must be opened via a service that moves it to <body>.

Why does the sheet animation not play on server-rendered pages?▼

The dialog service raises the sheet already open, leaving nothing to animate. Set an open signal to true inside afterNextRender so the transition starts one frame later; ngAfterViewInit does not work reliably with SSR.

When should I not use the sheet pattern in an admin panel?▼

Do not use this pattern for a record edit panel in the admin area. That case is a route rendered in its own outlet and belongs to the entity-aside pattern instead of an overlay sheet.

How do I test that a bottom sheet is not covered by other elements?▼

Use document.elementFromPoint at the center of the sheet's button and verify it returns the button itself. In end-to-end tests, wait for the slide-in transition to finish before measuring, since coordinates shift while the sheet is moving.

Related Skills

Explore More Software Engineering Skills→
shalevaminshalevamin

angular-architect

Generate Angular 17+ standalone components with NgRx state management and routing.

Community
Advanced
cbemistercbemister

browser-test

test1

Community
Advanced
WesleySmitsWesleySmits

css-standards

Codify CSS standards for the Oh My Brand! WordPress FSE theme.

Community
Advanced
agent0aiagent0ai
1.4k

Modules And Routing

Place first-party modules in `_core` structure and wire them through router-owned seams.

Official
Intermediate