|
| 1 | +<script> |
| 2 | +import Basic from './basic' |
| 3 | +import CustomTrigger from './custom-trigger' |
| 4 | +import FixedSider from './fixed-sider' |
| 5 | +import Fixed from './fixed' |
| 6 | +import Responsive from './responsive' |
| 7 | +import Side from './side' |
| 8 | +import TopSide2 from './top-side-2' |
| 9 | +import TopSide from './top-side' |
| 10 | +import Top from './top' |
| 11 | +
|
| 12 | +import CN from '../index.zh-CN.md' |
| 13 | +import US from '../index.en-US.md' |
| 14 | +
|
| 15 | +const md = { |
| 16 | + cn: `# 布局 |
| 17 | + 协助进行页面级整体布局。 |
| 18 | +
|
| 19 | +## 设计规则 |
| 20 | +
|
| 21 | +### 尺寸 |
| 22 | +
|
| 23 | +一级导航项偏左靠近 logo 放置，辅助菜单偏右放置。 |
| 24 | +
|
| 25 | +- 顶部导航（大部分系统）：一级导航高度 \`64px\`，二级导航 \`48px\`。 |
| 26 | +- 顶部导航（展示类页面）：一级导航高度 \`80px\`，二级导航 \`56px\`。 |
| 27 | +- 顶部导航高度的范围计算公式为：\`48+8n\`。 |
| 28 | +- 侧边导航宽度的范围计算公式：\`200+8n\`。 |
| 29 | +
|
| 30 | +### 交互 |
| 31 | +
|
| 32 | +- 一级导航和末级的导航需要在可视化的层面被强调出来； |
| 33 | +- 当前项应该在呈现上优先级最高； |
| 34 | +- 当导航收起的时候，当前项的样式自动赋予给它的上一个层级； |
| 35 | +- 左侧导航栏的收放交互同时支持手风琴和全展开的样式，根据业务的要求进行适当的选择。 |
| 36 | +
|
| 37 | +### 视觉 |
| 38 | +
|
| 39 | +导航样式上需要根据信息层级合理的选择样式： |
| 40 | +
|
| 41 | +- **大色块强调** |
| 42 | +
|
| 43 | + 建议用于底色为深色系时，当前页面父级的导航项。 |
| 44 | +
|
| 45 | +- **高亮火柴棍** |
| 46 | +
|
| 47 | + 当导航栏底色为浅色系时使用，可用于当前页面对应导航项，建议尽量在导航路径的最终项使用。 |
| 48 | +
|
| 49 | +- **字体高亮变色** |
| 50 | +
|
| 51 | + 从可视化层面，字体高亮的视觉强化力度低于大色块，通常在当前项的上一级使用。 |
| 52 | +
|
| 53 | +- **字体放大** |
| 54 | +
|
| 55 | + \`12px\`、\`14px\` 是导航的标准字号，14 号字体用在一、二级导航中。字号可以考虑导航项的等级做相应选择。 |
| 56 | +
|
| 57 | +## 组件概述 |
| 58 | +
|
| 59 | +- \`Layout\`：布局容器，其下可嵌套 \`Header\` \`Sider\` \`Content\` \`Footer\` 或 \`Layout\` 本身，可以放在任何父容器中。 |
| 60 | +- \`Header\`：顶部布局，自带默认样式，其下可嵌套任何元素，只能放在 \`Layout\` 中。 |
| 61 | +- \`Sider\`：侧边栏，自带默认样式及基本功能，其下可嵌套任何元素，只能放在 \`Layout\` 中。 |
| 62 | +- \`Content\`：内容部分，自带默认样式，其下可嵌套任何元素，只能放在 \`Layout\` 中。 |
| 63 | +- \`Footer\`：底部布局，自带默认样式，其下可嵌套任何元素，只能放在 \`Layout\` 中。 |
| 64 | +
|
| 65 | +> 注意：采用 flex 布局实现，请注意[浏览器兼容性](http://caniuse.com/#search=flex)问题。 |
| 66 | +
|
| 67 | + ## 代码演示`, |
| 68 | + us: `# Layout |
| 69 | + Handling the overall layout of a page. |
| 70 | +
|
| 71 | +## Specification |
| 72 | +
|
| 73 | +### Size |
| 74 | +
|
| 75 | +The first level navigation is inclined left near a logo, and the secondary menu is inclined right. |
| 76 | +
|
| 77 | +- Top Navigation (almost systems): the height of the first level navigation \`64px\`, the second level navigation \`48px\`. |
| 78 | +- Top Navigation(contents page): the height of the first level navigation \`80px\`, the second level navigation \`56px\`. |
| 79 | +- Calculation formula of a top navigation: \`48+8n\`. |
| 80 | +- Calculation formula of an aside navigation: \`200+8n\`. |
| 81 | +
|
| 82 | +### Interaction rules |
| 83 | +
|
| 84 | +- The first level navigation and the last level navigation should be distincted by visualization; |
| 85 | +- The current item should have the highest priority of visualization; |
| 86 | +- When the current navigation item is collapsed, the stlye of the current navigation item will be applied to its parent level; |
| 87 | +- The left side navigation bar has support for both the accordion and expanding styles, you can choose the one that fits your case best. |
| 88 | +
|
| 89 | +## Visualization rules |
| 90 | +
|
| 91 | + Style of a navigation should conform to its level. |
| 92 | +
|
| 93 | +- **Emphasis by colorblock** |
| 94 | +
|
| 95 | + When background color is a deep color, you can use this pattern for the parent level navigation item of current page. |
| 96 | +
|
| 97 | +- **The highlight match stick** |
| 98 | +
|
| 99 | + When background color is a light color, you can use this pattern for the current page navigation item, we recommed using it for the last item of the navigation path. |
| 100 | +
|
| 101 | +- **Hightlighted font** |
| 102 | +
|
| 103 | + From the visualization aspect, hightlighted font is stronger than colorblock, this pattern is often used for the parent level of the current item. |
| 104 | +
|
| 105 | +- **Enlarge the size of the font** |
| 106 | +
|
| 107 | + \`12px\`、\`14px\` is a standard font size of navigations，\`14px\` is used for the first and the second level of the navigation. You can choose a appropriate font size in terms of the level of your navigation. |
| 108 | +
|
| 109 | +## Component Overview |
| 110 | +
|
| 111 | +- \`Layout\`: The layout wrapper, in which \`Header\` \`Sider\` \`Content\` \`Footer\` or \`Layout\` itself can be nested, and can be placed in any parent container. |
| 112 | +- \`Header\`: The top layout with default style, in which any element can be nested, and must be placed in \`Layout\`. |
| 113 | +- \`Sider\`: The sidebar with default style and basic functions, in which any element can be nested, and must be placed in \`Layout\`. |
| 114 | +- \`Content\`: The content layout with default style, in which any element can be nested, and must be placed in \`Layout\`. |
| 115 | +- \`Footer\`: The bottom layout with default style, in which any element can be nested, and must be placed in \`Layout\`. |
| 116 | +
|
| 117 | +> Based on \`flex layout\`, please pay attention to the [compatibility](http://caniuse.com/#search=flex). |
| 118 | +
|
| 119 | + ## Examples |
| 120 | + `, |
| 121 | +} |
| 122 | +export default { |
| 123 | + category: 'Components', |
| 124 | + subtitle: '布局', |
| 125 | + type: 'Layout', |
| 126 | + cols: 1, |
| 127 | + title: 'Layout', |
| 128 | + props: { |
| 129 | + iframeName: String, |
| 130 | + }, |
| 131 | + provide () { |
| 132 | + return { |
| 133 | + iframeDemo: !this.iframeName ? { |
| 134 | + 'fixed-sider': '/ant-design/iframe/layout/#fixed-sider', |
| 135 | + 'fixed-header': '/ant-design/iframe/layout/#fixed-header', |
| 136 | + 'sider': '/ant-design/iframe/layout/#sider', |
| 137 | + } : {}, |
| 138 | + } |
| 139 | + }, |
| 140 | + render () { |
| 141 | + const iframeName = this.iframeName |
| 142 | + if (iframeName === 'fixed-sider') { |
| 143 | + return <FixedSider/> |
| 144 | + } else if (iframeName === 'fixed-header') { |
| 145 | + return <Fixed /> |
| 146 | + } else if (iframeName === 'sider') { |
| 147 | + return <Side /> |
| 148 | + } |
| 149 | + return ( |
| 150 | + <div> |
| 151 | + <md cn={md.cn} us={md.us}/> |
| 152 | + <Basic /> |
| 153 | + <CustomTrigger /> |
| 154 | + <TopSide2/> |
| 155 | + <TopSide/> |
| 156 | + <Top/> |
| 157 | + <Responsive /> |
| 158 | + <FixedSider /> |
| 159 | + <Fixed /> |
| 160 | + <Side/> |
| 161 | + <api> |
| 162 | + <template slot='cn'> |
| 163 | + <CN/> |
| 164 | + </template> |
| 165 | + <US/> |
| 166 | + </api> |
| 167 | + </div> |
| 168 | + ) |
| 169 | + }, |
| 170 | +} |
| 171 | +</script> |
0 commit comments