From 69f7cf0c55478dd8450eb467e716754e3cf9f3d0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B9=90=E4=BB=AA?= Date: Fri, 7 Apr 2017 16:13:35 +0800 Subject: [PATCH] add fixed sider --- components/layout/demo/fixed-sider.md | 92 +++++++++++++++++++++++++++ 1 file changed, 92 insertions(+) create mode 100644 components/layout/demo/fixed-sider.md diff --git a/components/layout/demo/fixed-sider.md b/components/layout/demo/fixed-sider.md new file mode 100644 index 0000000000..8b94821ca8 --- /dev/null +++ b/components/layout/demo/fixed-sider.md @@ -0,0 +1,92 @@ +--- +order: 7 +iframe: 360 +title: + zh-CN: 固定侧边栏 + en-US: Fixed Sider +--- + +## zh-CN + +当内容较长时，使用固定侧边栏可以提供更好的体验。 + +## en-US + +In dealing with long content, a fixed sider can provide a better user experience. + +````jsx +import { Layout, Menu, Icon } from 'antd'; +const { Header, Content, Footer, Sider } = Layout; + +ReactDOM.render( + +
+ + + + nav 1 + + + + nav 2 + + + + nav 3 + + + + nav 4 + + + + nav 5 + + + + nav 6 + + + + nav 7 + + + + nav 8 + + + + +
+ +
+ ... +
+ Really +
...
...
...
+ long +
...
...
...
...
...
... +
...
...
...
...
...
... +
...
...
...
...
...
... +
...
...
...
...
...
... +
...
...
...
...
...
... +
...
...
...
...
...
... +
...
...
...
...
...
+ content +
+ + + +, mountNode); +```` + +````css +#components-layout-demo-fixed-sider .logo { + height: 32px; + background: #333; + border-radius: 6px; + margin: 16px; +} +````