# @icedesign/layout

> 提供页面框架性的 layout 组件

Latest version **1.0.9** (published 2021-12-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install @icedesign/layout
pnpm add @icedesign/layout
yarn add @icedesign/layout
bun add @icedesign/layout
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.9 |
| Published | 2021-12-02 |
| First published | 2017-12-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 897 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 231 |
| Maintainers | chenjun1011, yuanyan, zeroling, temper357, sobear, bindoon, clarkxia, alvinhui, aboutblank, luhengchang228, rax-publisher |
| Keywords | ice, ice-components, postinstall.js |

## Links

- npm: https://www.npmjs.com/package/@icedesign/layout
- Repository: https://github.com/ice-lab/react-materials.git#master
- Homepage: https://unpkg.com/@icedesign/layout@1.0.9/build/index.html
- Issues: https://github.com/ice-lab/react-materials/issues
- npm.io page: https://npm.io/package/@icedesign/layout

## Dependencies (3)

- [classnames](https://npm.io/package/classnames.md) ^2.2.5
- [prop-types](https://npm.io/package/prop-types.md) ^15.5.10
- [@alifd/next](https://npm.io/package/@alifd/next.md) ^1.11.7

## Recent versions

- 1.0.9 (latest) — 2021-12-02
- 1.0.9-1 (beta) — 2021-12-02
- 1.0.3 (next) — 2019-01-12
- 1.0.9-0 — 2021-12-02
- 0.1.8 — 2019-05-22
- 1.0.8 — 2019-05-22
- 1.0.7 — 2019-03-04
- 1.0.6 — 2019-03-04
- 1.0.5 — 2019-02-01
- 1.0.4 — 2019-01-31
- 1.0.2 — 2019-01-12
- 1.0.1 — 2019-01-12
- 1.0.0 — 2019-01-09
- 0.1.7 — 2019-01-07
- 0.1.6 — 2018-11-21
- … 6 more at https://npm.io/package/@icedesign/layout/versions

## README

---
title: Layout
category: Components
chinese: 页面布局
cols: 1
---

提供页面框架性的 Layout 以及基础区块布局，除了 `Layout.Main` 必须以外, 其它的组件在页面中可以按需自由搭配使用。

## Layout

`import Layout from '@icedesign/layout';`

页面布局，一个页面有且只能有一个 `Layout` 组件。

### 参数（props）

| 参数名      | 说明           | 类型      | 默认值     |
|:---------|:-------------|:--------|:--------|
| fixable | 开启布局模块滚动跟随模式 | boolean | `false` |

`fixable` 一旦设置为 `true` 则整个页面所有模块都固定高度，内容区域不可滚动。子组件通过 `scrollable` props 使其可滚动，以此实现主体内容滚动，其余模块 fixed 的效果。

## Layout.Section

辅助布局组件，会创建 100% 宽度的一整行。当某一块区域需要两个模块左右排列，则需要使用 `Layout.Section` 组件包裹。

如：

`````html
<Layout.Section>
  <Layout.Aside />
  <Layout.Main />
</Layout.Section>
`````

### 参数（props）

| 参数名        | 说明                                        | 类型      | 默认值     |
|:-----------|:------------------------------------------|:--------|:--------|
| scrollable | 区域可滚动 *(`<Layout fixable={true} />` 下可用)* | boolean | `false` |

## Layout.Header

顶部布局，默认 flex 布局，并且内部元素垂直居中对齐，可通过 style 属性修改。

### 参数（props）

| 参数名        | 说明            | 类型     | 默认值      |
|:-----------|:--------------|:-------|:---------|
| type      | 配置皮肤色 | string | normal |

- type: none(继承父元素的背景色), normal，primary，secondary

## Layout.Aside

侧边栏，根据嵌套顺序，可左右布局。

### 参数（props）

| 参数名   | 说明            | 类型            | 默认值   |
|:------|:--------------|:--------------|:------|
| type | 配置Aside 皮肤色 | string        | -     |

## Layout.Main

### 参数（props）

| 参数名        | 说明                                        | 类型      | 默认值     |
|:-----------|:------------------------------------------|:--------|:--------|
| scrollable | 区域可滚动 *(`<Layout fixable={true} />` 下可用)* | boolean | `false` |

主体内容。

## Layout.Footer

页脚布局。

### 参数（props）

| 参数名   | 说明            | 类型            | 默认值   |
|:------|:--------------|:--------------|:------|
| type | 配置Aside 皮肤色 | string        | -     |

---
_Source: https://npm.io/package/@icedesign/layout · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._