https://github.com/alibaba-fusion/shell

https://github.com/alibaba-fusion/shell

Last synced: 6 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/alibaba-fusion/shell
• Owner: alibaba-fusion
• Created: 2019-06-26T03:41:30.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-06-26T10:21:36.000Z (over 2 years ago)
• Last Synced: 2023-03-02T12:52:05.175Z (over 1 year ago)
• Language: JavaScript
• Size: 35.2 KB
• Stars: 4
• Watchers: 2
• Forks: 1
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# @alifd/shell

![](https://img.alicdn.com/tfs/TB1nNtcelCw3KVjSZFuXXcAOpXa-881-465.png)

````jsx

     Box(row)

    

     Box(row)

     Box(row)

     Box(column)

     Box(column)

     Grid

     Box(column)

     Box(column)

     Box(column)

        

````

其中 `` 采用Grid布局， 其他均为 Flex布局

## API

### Shell

| 参数                  | 说明          | 类型              | 默认值              |

| -------------------- | ------------ | ----------------- | ------------------ |

| device             | 预设屏幕宽度，会影响`Navigation` `LocalNavigation` `Ancillary`等是否占据空间

**可选值**:
'phone', 'tablet', 'desktop'     | Enum         |  desktop    |

### Shell.Navigation

向子组件透传 isCollapse 的Context，表示当前是否处于折叠状态

| 参数                  | 说明          | 类型              | 默认值              |

| -------------------- | ------------ | ----------------- | ------------------ |

| collapse   | 是否折叠(折叠成只有icon状态)   | Boolean         | false     |

| direction  | 方向

**可选值**:
'hoz', 'ver'    | Enum         |  hoz    |

| onCollapseChange | 组件显示或折叠时触发的回调函数        | Function           | () =>{} |

### Shell.LocalNavigation

| 参数                  | 说明          | 类型              | 默认值              |

| -------------------- | ------------ | ----------------- | ------------------ |

| collapse   | 是否折叠（完全收起）    | Boolean         | false     |

| onCollapseChange | 组件显示或折叠时触发的回调函数        | Function           | () =>{} |

### Shell.ToolDock

| 参数                  | 说明          | 类型              | 默认值              |

| -------------------- | ------------ | ----------------- | ------------------ |

| collapse   | 是否折叠（完全收起）   | Boolean         | false     |

| onCollapseChange | 组件显示或折叠时触发的回调函数        | Function           | () =>{} |

### Shell.Ancillary

| 参数                  | 说明          | 类型              | 默认值              |

| -------------------- | ------------ | ----------------- | ------------------ |

| collapse   | 是否折叠（完全收起）   | Boolean         | false     |

| onCollapseChange | 组件显示或折叠时触发的回调函数        | Function           | () =>{} |

## Config配置项(待视觉稿提供后调整)

- Header (Fixed)

  - height

  - background

  - shadow

  - padding(l, r)

  - divider (bottom-border-color, bottom-border-size)

  - navigation-margin

  - navigation-alignment

- MultiTask (Fixed)

  - height

  - background

  - shadow

  - padding(l, r)

  - divider (bottom-border-color, bottom-border-size)

- Navigation (Fixed)

  - width(ver)

  - mini-width (ver)

  - divider (right-border-color, right-border-size) (ver)

  - background 

  - padding(t, b) 

  - shadow

-  LocalNavigation (Fixed)

  - width

  - background 

  - padding(t, b) 

  - divider (right-border-color, right-border-size)

  - shadow

- Ancillary

  - width

  - background 

  - divider (left-border-color, left-border-size)

  - padding(t, b) 

  - shadow

- ToolDock

  - width

  - background 

  - shadow

  - divider (left-border-color, left-border-size)

  - padding(t, b)

- AppBar

  - min-height

  - background 

  - divider (bottom-border-color, bottom-border-size)

  - shadow

  - padding(l, r) 

- Content

  - max-width

  - columns

  - background

  - padding

  - gutter-row

  - gutter-column

- Footer

  - background 

  - min-height