Shell组件API讨论

[youluna]

<Shell> 
  <Shell.Branding /> Box(row)
  <Shell.Navgation/>
  <Shell.Action /> Box(row)
  <Shell.LocaleNavgation /> Box(column)
  <Shell.Ancillary /> Box(column)
  <Shell.Toolbar /> Box(column)
    <Shell.ToolbarItem icon=""  label="" onXXX="" /> 
  <Shell.AppBar /> Box(column)
  <Shell.Content /> Grid
  <Shell.Footer /> Box(column)
</Shell>

提供11个组件，每个组件有固定位置，其中 <Shell.Content /> 采用Grid布局， 其他均为 Flex布局

API

Shell

参数	说明	类型	默认值
device	预设屏幕宽度，会影响Navgation LocaleNavgation Ancillary等的展开收起状态 可选值: 'phone', 'tablet', 'desktop'	Enum	desktop
scrollHideHeader	Header滚动时隐藏	Boolean	false
fullScreenHeader	Header是否一直撑满屏幕 (是否横跨Aside)	Boolean	false

Shell.Navgation

参数	说明	类型	默认值
miniable	是否折叠到只有icon的状态	Boolean	false
collaspe	是否折叠	Boolean	false
direction	方向 可选值: 'hoz', 'ver'	Enum	hoz

Shell.LocaleNavgation

参数	说明	类型	默认值
collaspe	是否完全折叠	Boolean	false

Shell.Ancillary

参数	说明	类型	默认值
collaspe	是否完全折叠	Boolean	false

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

• Shell
  • background
• Header (Fixed)
  • height
  • background
  • shadow
  • padding(l, r)
• Navgation (Fixed)
  • width(ver)
  • mini-width (ver)
  • background
  • padding-top
  • padding-bottom
  • shadow
• LocaleNavgation (Fixed)
  • width
  • background
  • padding-top
  • padding-bottom
  • shadow
• Ancillary
  • width
  • background
  • padding-top
  • padding-bottom
  • shadow
• Toolbar
  • width
  • background
  • shadow
  • padding(l, r)
  • padding(t, b)
• AppBar
  • background
• Content
  • rows
  • background
  • padding
• Footer
  • background
  • height
  • shadow

[lidahuiSoftWare]

菜单的模式有三种，其中一种为类似于Ice Pro 针对简单后台的配置

[youluna]

@lidahuiSoftWare 这种应该是通过如下代码实现的，纵向菜单占据左侧Global Navigation (V) 的位置

<Shell.Navgation  collaspe={false} /> 

[myronliu347]

API 设计第二版

<Shell> 
  <Shell.Branding /> Box(row)
  <Shell.Navgation/>
  <Shell.Action /> Box(row)
  <Shell.LocaleNavgation /> Box(column)
  <Shell.Ancillary /> Box(column)
  <Shell.Toolbar /> Box(column)
  <Shell.AppBar /> Box(column)
  <Shell.Content /> Grid
  <Shell.Footer /> Box(column)
</Shell>

提供11个组件，每个组件有固定位置，其中 <Shell.Content /> 采用Grid布局， 其他均为 Flex布局

API

Shell

参数	说明	类型	默认值
device	预设屏幕宽度，会影响Navgation LocaleNavgation Ancillary等的展开收起状态 可选值: 'phone', 'tablet', 'desktop'	Enum	desktop
scrollHideHeader	Header滚动时隐藏	Boolean	false

Shell.Navgation

参数	说明	类型	默认值
collaspe	是否折叠	Boolean	false
direction	方向 可选值: 'hoz', 'ver'	Enum	hoz

Shell.LocaleNavgation

参数	说明	类型	默认值
collaspe	是否完全折叠	Boolean	false

Shell.Ancillary

参数	说明	类型	默认值
collaspe	是否完全折叠	Boolean	false

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

• Header (Fixed)

  • height
  • background
  • divider
  • shadow
  • padding(l, r)
  • navigation-margin
  • navigation-alignment

• Navigation (Fixed)

  • width(ver)
  • mini-width (ver)
  • background
  • padding-tb
  • shadow
  • divider

• LocaleNavigation (Fixed)

  • width
  • background
  • padding-tb
  • shadow
  • divider

• Ancillary

  • width
  • background
  • padding(t, b)
  • divider-color
  • shadow

• Toolbar

  • width
  • background
  • shadow
  • padding(t, b)
  • divider

• AppBar

  • background
  • min-height
  • padding (l, r)
  • shadow
  • divider

• Content

  • max-width
  • background
  • padding (l, r)
  • padding (t, b)
  • columns
  • column-gutter
  • row-gutter

• Footer

  • background
  • min-height

[myronliu347]

关于组件 Context 问题, Shell.navigation 是需要探测navigation 做更改direction 的操作，但是在这一点上觉得不太妥， 目前需要在navigation 上增加 type Mark 的机制做探测，而且子组件不可以是给予navigation 包装的组件，

建议处理方式，增加 Shell.Context 组件，自上向下传递， direction 与 collaspe 参数

[youluna]

组件的使用是采用单层级的平铺，还是多层级的嵌套（如下）。

• 平铺使用成本更低，用户直接丢代码块就可以。

• 多层级嵌套用户需要在一定程度上关心代码结构

  <Shell> 
  <Shell.Header>
      <Shell.Branding /> Box(row)
      <Shell.Navgation/>
      <Shell.Action /> Box(row)
  </Shell.Header>
  
  <Shell.Aside pos="left">
      <Shell.Navgation/>
      <Shell.LocaleNavgation /> Box(column)
  </Shell.Aside>
  
  <Shell.Aside pos="right">
      <Shell.Ancillary /> Box(column)
      <Shell.ToolDock /> Box(column)
  </Shell.Aside>
  
  <Shell.Section>
      <Shell.LocaleNavgation /> Box(column)
      <Shell.Section>
          <Shell.AppBar /> Box(column)
          <Shell.Content /> Grid
          <Shell.Footer /> Box(column)
      </Shell.Section>
      <Shell.Ancillary /> Box(column)
  </Shell.Section>
  </Shell>

[bindoon]

平铺在处理合并区块开放的时候会有问题，比如 这个时候需要嵌套才能解决。如果我们demo场景列举全面，copy代码成本也不高！

[nqdeng]

我认为Shell的所有组件之所以平铺的出发点是在于不希望用户去关注实际UI的嵌套关系，而只需要提供内容。另外上边说的合并区块的问题，可能确实需要依靠嵌套才能解决，但我觉得这是一个前端工程层面的问题，要求某个前端框架下的页面代码以嵌套的方式书写，不等于要求Shell组件自身按照嵌套的方式去设计。

[youluna]

与 @myronliu347 @bindoon 沟通后确认方案为鼓励用户采用单层嵌套。 若有开放合并区块的需求，用户可在Shell中嵌套Shell，即接受如下用法：

<Shell> 
  <Shell.Branding /> Box(row)
  <Shell.Navgation/>
  <Shell.Action /> Box(row)
  <Shell.LocaleNavgation /> Box(column)

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

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

<Shell> 
  <Shell.Branding /> Box(row)
  <Shell.Navgation/>
  <Shell.Action /> Box(row)
  <Shell>
    <Shell.LocaleNavgation /> Box(column)
    <Shell.AppBar /> Box(column)
    <Shell.Content /> Grid
    <Shell.Footer /> Box(column)
  </Shell>
  <Shell.Ancillary /> Box(column)
  <Shell.ToolDock /> Box(column)
</Shell>

代码实现上采用以下策略：

1. 在Shell的children中找出Branding Navgation(H) Action，放到头部（header）区域，并fixed
2. 找出LocaleNavgation Navgation(V) 放到左侧侧边栏，并fixed
3. 找出Ancillary ToolDock放到右侧侧边栏，并fixed
4. 找出AppBar放到中间区域的顶部，跟随文档流
5. 找出Footer放到中间区域的底部，跟随文档流
6. 找出Content放到中间区域的中部，跟随文档流
7. 找出Shell放到Content Footer中间，跟随文档流，其他元素直接忽略。

若组件缺失，则以页面中心元素为基准，上下左右撑满屏幕，代码中组件的排布顺序不影响渲染效果

[myronliu347]

第二种嵌套方式需要再调整, 如果是 Shell 嵌套Shell 会给用户错误的引导，可能会出现嵌套很多层的情况，第二层组件名需要更名为 Shell.Page

<Shell> 
  <Shell.Branding /> Box(row)
  <Shell.Navgation/>
  <Shell.Action /> Box(row)
  <Shell.Page>
    <Shell.LocaleNavgation /> Box(column)
    <Shell.AppBar /> Box(column)
    <Shell.Content /> Grid
    <Shell.Footer /> Box(column)
  </Shell.Page>
  <Shell.Ancillary /> Box(column)
  <Shell.ToolDock /> Box(column)
</Shell>