search

alibaba-fusion / shell

4 stars 1 forks source link

readme

@alifd/shell

<Shell>
    <Shell.Branding /> Box(row)
    <Shell.Navigation/>
    <Shell.Action /> Box(row)

    <Shell.MultiTask /> Box(row)
    <Shell.LocalNavigation /> Box(column)

    <Shell.AppBar /> Box(column)
    <Shell.Content /> Grid
    <Shell.Footer /> Box(column)

    <Shell.Ancillary /> Box(column)
    <Shell.ToolDock /> Box(column)
        <Shell.ToolDockItem />
</Shell>

其中 <Shell.Content /> 采用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配置项(待视觉稿提供后调整)