Layout / Header

页面骨架容器。<mc-layout> 对应原 <dispaly-area>（项目原始拼写，保留以复用 CSS）， <mc-header> 是顶部灰色立体标题栏。

我的世界

⚙

存档列表

Layout 会提供顶部标题栏与可滚动主体区域

这里是页面内容区域，可放置任意 McUI 组件。

文档站中用固定高度容器模拟全屏页面，实际项目可直接作为页面根布局使用。

<script setup lang="ts">
import { McLayout, McHeader, McScrollView, McButton } from 'mcui-oreui'
import 'mcui-oreui/style.css'
</script>

<template>
  <mc-layout>
    <mc-header title="我的世界">
      <template #left>
        <mc-button size="small" @click="goBack">返回</mc-button>
      </template>
      <template #right>
        <img src="/github.png" style="height:28px" />
      </template>
    </mc-header>

    <mc-scroll-view>
      <!-- 页面内容（可滚动） -->
    </mc-scroll-view>
  </mc-layout>
</template>

文档站中的预览使用固定高度容器模拟全屏布局；实际项目中 <mc-layout> 适合作为页面根节点。

mc-layout

无 Props。默认插槽即页面内容，纵向 flex 撑满视口。

mc-header

名称	类型	默认	说明
title	string	''	标题文字（也可用 #title 插槽）

插槽：#left（左侧区，如返回按钮）、#right（右侧区，如图标）、#title。