web-dev-qa-db-ja.com

レイアウト内のAntd固定ヘッダー

Ant.designを使用して、 接辞 を レイアウトのヘッダー に適用して、スクロール中に上部に固定されたままにする正しい方法は何ですか？以下はレイアウト例です。

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

ReactDOM.render(
<div>
  <Layout>
    <Header>Header</Header>
    <Layout>
      <Sider>Sider</Sider>
      <Content>Content</Content>
    </Layout>
    <Footer>Footer</Footer>
  </Layout>
</div>
, mountNode);
javascriptreactjsantd
6
cannin

@benjycuiのanwserのデモは、現在ant.designサイトで公開されています： https://ant.design/components/layout/#components-layout-demo-fixed

5
afc163

必要なのはこれを達成するためのCSSだけです

#header {
    position:fixed;
    width:100%;
    left:0;
    top:0;
    right: 0;
    z-index: 1000;
}
4
Vilas Kumkar

公式デモをご覧ください。 https://github.com/ant-design/ant-design/pull/5119

1
benjycui

私は遅れていることを知っていますが、私は同じ状況にいることに気づきました。 cannin が彼の コメント で言うように：

「...私が望んでいたのは、切り替え可能なサイドバーがある場合の固定ヘッダーでした」

私の解決策は、新しいLayoutをContentにネストし、Siderを親レイアウトに、Headerを子に配置してから、に適用することでした。子ソリューションはすでに指摘しています： https://ant.design/components/layout/#components-layout-demo-fixed

ReactDOM.render(
<div>
  <Layout>

    <Sider>Sider</Sider>  <- ***

    <Content>

      <Layout>
        <Header>Header</Header>  <- ***
        <Content>Content</Content>
      </Layout>

    </Content>

    <Footer>Footer</Footer>

  </Layout>
</div>
, mountNode);

また、position: fixedを使用する代わりにposition: stickyを使用する必要がありました。そうしないと、トップバーの右側が立ち入り禁止になります。

<Header style={{ position: 'sticky', zIndex: 1, width: '100%' }}>
0
equalium