Question

我希望响应式Sider组件能够在不引起Content组件中元素重排的情况下进行扩展，而不像我的render方法那样。

import 'antd/dist/antd.css';

// ...skipped

render() {
  return (
    <Layout>
      <Sider
        breakpoint="sm"
        collapsedWidth="0"
        onCollapse={(collapsed, type) => { console.log(collapsed, type); }}
        style={{ minHeight: "100vh" }}
      >
        <Menu theme="dark" mode="inline" selectedKeys={['1']}>
          <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>
      </Sider>
      <Layout>
        <Content style={{ margin: '10px', padding: "15px" }}>
          <ListOfData />
        </Content>
      </Layout>
    </Layout>
  );
}

我想要实现的是在使用移动视图端口访问时Ant Design's documentations site中应用的Sider效果，该端口可视地将页面内容推向右侧。

我用反应检查工具看了上面提到的网站，但是我不知道使用哪个官方组件来做到这一点。但是，我猜它在Ant Design Mobile中混合了Drawer组件，因为抽屉类就在那里。

是否可以仅使用Ant Design中的组件来实现这一目标？

pic 1: What I want

pic 2: My collapsed Sider

pic 3: My expanded Sider

Answer 1

好。我们再过一年。当我使用https://ant.design/components/layout/上链接的CodePen并添加：

@JvmStatic fun getEpochNumberFromDate(date: Date):String{

        var calendar : Calendar = Calendar.getInstance()
        calendar.isLenient = false
        calendar.set(date.year, date.day,date.month,date.hours,date.minutes)

        Log.d("zzz","calendar date : "+calendar.timeInMillis.toString())

        Log.d("zzz","year: "+date.year+", month:"+date.month+",  date.time.toString():"+date.time.toString())


        return date.time.toString()
    }

它只是为我工作。

如何使用Ant Design的响应式Sider避免内容重排

1 个答案: