@cc-dev-kit-test/console-components-app-layout/README.mdx

React component for Alibaba Cloud.

# @alicloud/console-components-app-layout

基础的应用框架和布局。

## 使用示例

基本示例 2：
[MDXInstruction:importDemo:BasicDemo2](./stories/basic/basic2.tsx)

受控模式：
[MDXInstruction:importDemo:ControlledDemo](./stories/controlled/controlled.tsx)

非受控模式：
[MDXInstruction:importDemo:UncontrolledDemo](./stories/uncontrolled/uncontrolled.tsx)

## APIs

[MDXInstruction:renderInterface:IAppLayoutProps](./api-json/api.json)

### adjustHeight: 布局高度的调整

我们希望应用整体的高度恰好等于视窗高度，因此 AppLayout 的默认高度为 100vh。
但是对于【AppLayout 上方还有个顶栏】这种情况，如果仍然使用 100vh 来作为 Layout 布局组件的高度，则会导致应用的整体出现纵向滚动条，影响了页面的视觉感受。
为了适配这种特殊情况，我们提供了 adjustHeight 选项来调整 AppLayout 的高度：`height: calc(100vh - adjustHeight px)`。对于 AppLayout 上方有个顶栏的情况，我们可以将 adjustHeight 设置为顶栏高度，从而应用整体的高度恰好等于视窗高度。

- 当 adjustHeight 是 number 时，直接将 adjustHeight 带入该公式（单位为 px）计算最终的布局高度；
- 当 adjustHeight 是 string 时，组件会将该值作为参数来调用 document.getElementId(adjustHeight) || document.querySelector(adjustHeight)，并将该节点的高度作为 adjustHeight。
- 当 adjustHeight 是 function 时，组件会在每次渲染时调用这个函数，以它的返回结果作为 adjustHeight。

> 由于 AppLayout 组件在绝大多数情况下都是在控制台业务中使用，我们为`adjustHeight`设定了一个默认值：`'consoleBaseTopbarRoot'` ，即控制台顶部导航的容器节点的 id ，从而控制台开发者不需要特别关注 AppLayout 的高度。