component-composition
Component Composition
This skill explains how to combine fundamental-styles components correctly, including required wrappers, nesting rules, and common composition patterns.
When to Use This Skill
Use this skill when:
- The user asks "How do I combine [component A] with [component B]?"
- The user needs to understand component structure and nesting
- The user asks about required wrapper elements
- The user's component isn't working due to incorrect composition
- The user asks "Why do I need this wrapper element?"
- The user wants to understand parent-child relationships between components
Core Composition Principles
More from sap/fundamental-styles
layout-patterns
Common UI layout patterns using fundamental-styles - login forms, dashboards, master-detail, wizards, and more
2bem-naming
BEM (Block Element Modifier) methodology and naming conventions used in fundamental-styles with real examples
2content-density
Guide to cozy, compact, and condensed modes - when to use each density, how to apply them, and device-specific recommendations
2component-guidance-data
Fiori guidelines for data display components such as Table, List, Tree, Avatar, Calendar, Icons, etc
2component-guidance-forms
Fiori guidelines for form controls and input components such as Checkbox, Input, Select, Textarea, Date Picker, etc
2component-guidance-navigation
Fiori guidelines for navigation components such as Breadcrumb, Menu, Link, Shellbar, Vertical Navigation, etc
2