تشريح المكوّنات وبنيتها

Welcome! In this lesson, we'll explore the essential building blocks of user interface (UI) components.

Understanding component anatomy helps us create consistent designs and build UIs efficiently.

Every UI component, from a simple button to a complex navigation bar, is made up of fundamental parts.

These parts fit together, much like LEGO bricks, to form the complete element and define its behavior.

Let's deconstruct a common component: a button.

A button typically has a visible container, text (a label), and sometimes an icon. These are its core anatomical parts.

Components aren't static! They react to user interactions or system conditions. These different reactions are called states.

States provide visual feedback, making the UI feel responsive and intuitive.

Here are some common states a component might have:

• Default: The initial, inactive appearance.
• Hover: When the mouse pointer is over the component.
• Focus: When the component is selected, usually via keyboard navigation.
• Active: While the component is being pressed or clicked.
• Disabled: When the component is temporarily inactive and cannot be interacted with.

Imagine a button's appearance changing:

• Default: Blue background, white text.
• Hover: Slightly darker blue background.
• Active: Even darker blue, perhaps with a subtle shadow.
• Disabled: Light gray background, lighter text, not clickable.

Beyond states, components often come in different variations or types to fit various contexts. Think of them as different 'flavors' of the same component.

For example, a button might be 'Primary' (for main actions) or 'Secondary' (for less prominent actions).

A 'Card' is a common UI component that groups related information. Its anatomy is richer:

• Header: Title, subtitle.
• Media: Image or video.
• Body: Main text content.
• Actions: Buttons or links for interaction.

Components can be made dynamic by accepting data, often called 'props'. This data can change their content or even their structural parts.

For example, a <Card> component might take title, imageSrc, and description props to customize its content.

Let's check your understanding of component states.

Great job! We've learned that UI components are built from smaller parts (anatomy) and react to interactions through different states (default, hover, focus, active, disabled).

Understanding anatomy, states, and variations is key to building consistent, user-friendly, and maintainable UIs.