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; +} +````