skills.rest
Legal-and-General
Legal-and-GeneralOFFICIAL
Explore all skills by this author →
Website𝕏@landg_groupGitHub

canopy-details

Guide Angular projects on implementing Canopy LGDetailsComponent with accessible collapsible sections.

23|46|Updated Sep 7, 2020
Search Tags:#ui#accessibility#angular#best-practices#details#canopy#lg-details
One-click install
npx skills add https://github.com/Legal-and-General/canopy --skill canopy-details
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: canopy-details
Source: https://github.com/Legal-and-General/canopy/tree/main/skills/best-practice/details
Command: npx skills add https://github.com/Legal-and-General/canopy --skill canopy-details

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design teams and developers require consistent guidance to implement Canopy Details components across Angular apps. This skill provides best-practice usage, inputs, and examples to ensure accessible, predictable details UI.

Core Features & Use Cases

  • Best-practice usage for LgDetailsComponent in Canopy.
  • Guidance on statuses, inputs, and event handling to create accessible, consistent disclosures.
  • Use case: implement a single collapsible section or a status-coloured disclosure within an Angular project using Canopy.

Quick Start

Apply these Canopy Details best practices in your Angular project to ensure accessible, consistent UI.

Frequently Asked Questions about canopy-details

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

FAQPage Schema
How do I implement accessible collapsible sections in Angular using Canopy?▼

Accessible collapsible sections in Angular are achieved by applying Canopy Details best-practice guidance, ensuring consistent styling, proper inputs, and event handling for the LgDetailsComponent disclosures.

What is the best way to create status-coloured disclosures in an Angular project?▼

Status-coloured disclosures in an Angular project are created using the Canopy LgDetailsComponent, which provides built-in status inputs and accessibility patterns to ensure predictable, colour-coded collapsible UI sections.

Does the Canopy Details component support custom event handling for Angular disclosures?▼

Yes, the Canopy Details component supports event handling for Angular disclosures. Best-practice guidance includes configuring inputs and events to ensure accessible and consistent interactive collapsible sections.

When should I use Canopy Details for collapsible UI patterns instead of native HTML elements?▼

Use Canopy Details for collapsible UI patterns when you need consistent styling and status-coloured disclosures integrated with Canopy, ensuring accessibility and predictable behavior across Angular applications beyond native HTML elements.

What inputs are available for the Canopy LgDetailsComponent in Angular?▼

The Canopy LgDetailsComponent provides inputs for statuses and collapsible section configuration, enabling developers to create accessible, status-coloured disclosures with consistent styling across Angular projects.

Related Skills

Explore More Software Engineering Skills→
Legal-and-GeneralLegal-and-General
23

canopy-colour-foundation

Apply Canopy colour tokens and WCAG contrast rules to Angular projects.

Official
Intermediate
analogjsanalogjs
595

angular-http

Fetch API data using signal-based HTTP resources in Angular v20+.

Official
Intermediate
Legal-and-GeneralLegal-and-General
23

canopy-design-tokens

Guide Canopy design token usage for Angular component styling.

Official
Intermediate
githubnextgithubnext
4.9k

reporting

Format reports into collapsible HTML details and summary sections.

Official
Basic