@blocklet/ui-react/docs/components-layout.zh.md

Some useful front-end web components that can be used in Blocklets.

# 布局

布局组件是构建 Blocklet 应用用户界面的基础构建块。它们提供了一个一致且可预测的框架，包括主 Header、Footer 和内容区域。通过利用这些组件，您可以确保在整个应用中提供专业且一致的用户体验，因为它们会根据 Blocklet 的元数据自动进行调整。

这些组件构成了应用的主要视觉结构，如下图所示：

<!-- DIAGRAM_IMAGE_START:architecture:4:3:1765962229 -->
![Layout](assets/diagram/layout-diagram-0.zh.jpg)
<!-- DIAGRAM_IMAGE_END -->

本节概述了可用的主要布局组件。有关详细的实现指南和 API 参考，请参阅每个组件的具体文档。

<x-cards data-columns="3">
  <x-card data-title="Header" data-icon="lucide:navigation" data-href="/components/layout/header">
    提供一个响应式且可自定义的 Header，它会根据 Blocklet 的元数据自动填充导航链接和用户会话控件。
  </x-card>
  <x-card data-title="Footer" data-icon="lucide:book-down" data-href="/components/layout/footer">
    为您的应用渲染一个一致的 Footer，包括品牌、版权信息、社交媒体链接和附加导航。
  </x-card>
  <x-card data-title="Dashboard" data-icon="lucide:layout-dashboard" data-href="/components/layout/dashboard">
    一个预构建的 Dashboard 布局，带有侧边栏、Header 和内容区域，专为管理界面和以用户为中心的视图而设计。
  </x-card>
</x-cards>

## 总结

布局组件旨在无缝协同工作，直接从 Blocklet 的元数据（`blocklet.yml`）中提取配置，以最大限度地减少样板代码并加速开发。

要继续，请浏览每个组件的详细文档，以了解其具体的属性、使用模式和自定义选项。

- **下一步**：了解 [Header component](./components-layout-header.md)。