component-composition

Combine fundamental-styles components with required wrappers and nesting rules.

232|70|Updated May 16, 2019

Search Tags:#web development #UI design #component composition #fundamental-styles #SAP applications

Ready to run

npx skills add https://github.com/SAP/fundamental-styles --skill component-composition-sap

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: component-composition
Source: https://github.com/SAP/fundamental-styles/tree/main/skills/component-composition
Command: npx skills add https://github.com/SAP/fundamental-styles --skill component-composition-sap

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill addresses the challenge of correctly combining fundamental-styles components to create a cohesive and functional user interface.

Core Features & Use Cases

Component Composition: Provides guidelines for combining components like form items, input groups, popovers, and dialogs.
Required Wrappers: Explains the importance of using required wrappers for proper component functionality.
Common Composition Patterns: Offers examples of common patterns such as form item composition, input group composition, and dialog composition.
Quick Start: Learn how to combine components correctly with a simple example.

Quick Start

Use the component-composition skill to understand how to combine the 'fd-form-item' and 'fd-input' components for a basic form field.

Frequently Asked Questions about component-composition

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

FAQPage Schema

How do I combine fundamental-styles components to create a consistent UI?▼

Combine fundamental-styles components by following specific nesting rules and using required wrappers to create a cohesive and professional user interface. This ensures proper functionality across SAP applications.

Why do I need required wrappers when combining UI components?▼

Required wrappers are essential for proper UI component functionality because they enforce correct structural nesting. Wrappers ensure that fundamental-styles components render correctly and maintain visual consistency.

What are common composition patterns for SAP application interfaces?▼

Common composition patterns for SAP applications include form item composition, input group composition, and dialog composition. These patterns provide established structures for combining components into functional interface sections.

How do I create a basic form field using fundamental-styles?▼

Create a basic form field by combining the fd-form-item and fd-input fundamental-styles components. This composition pattern provides a quick start example for correctly structuring form elements.

Can I use fundamental-styles components for both web development and UI design?▼

Yes, fundamental-styles components are applicable to both developers and designers working with SAP applications. They provide guidelines for combining UI elements to create functional and visually consistent web interfaces.

What happens if nesting rules are not followed when combining components?▼

Not following nesting rules when combining components breaks the required structural hierarchy, causing rendering issues and inconsistent UI behavior. Proper composition patterns are required for functional SAP application interfaces.