@blocklet/ui-react/docs/components-layout.zh-TW.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-TW.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`）中提取設定，以最大限度地減少樣板程式碼並加速開發。

若要繼續，請瀏覽每個元件的詳細文件，以了解其特定的 props、使用模式和自訂選項。

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