mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-12-26 18:08:34 +08:00
Code Issues Actions 26 Packages Projects Releases Wiki Activity
f02cd9cd52
ant-design/components/layout/demo/fixed-sider.md
偏右 2bced36f0c New component styles (#7731) 
* Tweak button padding

* upgrade input and button size

* update form controls size

* update components size

* Add lemon color and update rate color

* Add new icons

* update layout style

* breadcrumb and dropdown

* update menu arrow width

* update layout and menu

* update steps

* fix var name

* update cascasder style

* Update DatePicker

* update InputNumber and Mention

* radio and switch

* select and transfer

* TimePicker & Upload

* more components

* calendar and list

* Tree Timeline Popover Tag

* divider modal popover

* update search input

* update card style

* update switch disabled opacity

* update shoadow and mask

* Add v2-compatible-reset.less

* Fix undefined className

* update snahshotssssssssssssssssss 👻
2017-09-27 22:32:49 +08:00

2.7 KiB
Raw Blame History

order iframe title
7 360
zh-CN en-US
固定侧边栏 Fixed Sider

zh-CN

当内容较长时，使用固定侧边栏可以提供更好的体验。

en-US

When dealing with long content, a fixed sider can provide a better user experience.

import { Layout, Menu, Icon } from 'antd';
const { Header, Content, Footer, Sider } = Layout;

ReactDOM.render(
  <Layout>
    <Sider style={{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0 }}>
      <div className="logo" />
      <Menu theme="dark" mode="inline" defaultSelectedKeys={['4']}>
        <Menu.Item key="1">
          <Icon type="user" />
          <span className="nav-text">nav 1</span>
        </Menu.Item>
        <Menu.Item key="2">
          <Icon type="video-camera" />
          <span className="nav-text">nav 2</span>
        </Menu.Item>
        <Menu.Item key="3">
          <Icon type="upload" />
          <span className="nav-text">nav 3</span>
        </Menu.Item>
        <Menu.Item key="4">
          <Icon type="bar-chart" />
          <span className="nav-text">nav 4</span>
        </Menu.Item>
        <Menu.Item key="5">
          <Icon type="cloud-o" />
          <span className="nav-text">nav 5</span>
        </Menu.Item>
        <Menu.Item key="6">
          <Icon type="appstore-o" />
          <span className="nav-text">nav 6</span>
        </Menu.Item>
        <Menu.Item key="7">
          <Icon type="team" />
          <span className="nav-text">nav 7</span>
        </Menu.Item>
        <Menu.Item key="8">
          <Icon type="shop" />
          <span className="nav-text">nav 8</span>
        </Menu.Item>
      </Menu>
    </Sider>
    <Layout style={{ marginLeft: 200 }}>
      <Header style={{ background: '#fff', padding: 0 }} />
      <Content style={{ margin: '24px 16px 0', overflow: 'initial' }}>
        <div style={{ padding: 24, background: '#fff', textAlign: 'center' }}>
          ...
          <br />
          Really
          <br />...<br />...<br />...<br />
          long
          <br />...<br />...<br />...<br />...<br />...<br />...
          <br />...<br />...<br />...<br />...<br />...<br />...
          <br />...<br />...<br />...<br />...<br />...<br />...
          <br />...<br />...<br />...<br />...<br />...<br />...
          <br />...<br />...<br />...<br />...<br />...<br />...
          <br />...<br />...<br />...<br />...<br />...<br />...
          <br />...<br />...<br />...<br />...<br />...<br />
          content
        </div>
      </Content>
      <Footer style={{ textAlign: 'center' }}>
        Ant Design ©2016 Created by Ant UED
      </Footer>
    </Layout>
  </Layout>
, mountNode);

#components-layout-demo-fixed-sider .logo {
  height: 32px;
  background: rgba(255,255,255,.2);
  margin: 16px;
}