web-dev-qa-db-ja.com

AntデザインレスポンシブNavBarの問題

更新：

はっきりさせてください。サイドバーは必要ありません（私の場合は、小さなWebサイトであり、多くのページはありません）。私が欲しいのは、Menu.Itemsのサイズを変更するときに最上部のNavBarを持っていることです。アイテムは折りたたまれてハンバーガーアイコンになります。また、右側に2つのmenu.itemsが必要です。

私はAntDを使用しています。これは一般的で標準的なレスポンシブNavBarの簡単で迅速なセットアップだと思いましたが、デフォルトではレスポンシブではないことがわかりました。

squashed

ご覧のとおり、つぶれています。

コードは次のとおりです。

<Menu
                        theme="dark"
                        mode="horizontal"
                        defaultSelectedKeys={["1"]}
                        style={{ lineHeight: '64px' }}
                        breakpoint="lg"
                        collapsedWidth="0"
                    >
                                <Menu.Item key="1">nav 1</Menu.Item>
                                <Menu.Item key="2">nav 2</Menu.Item>
                                <Menu.Item key="3">nav 3</Menu.Item>
                                <Menu.Item key="4"><Icon spin={true} type="plus-circle" className="publish-btn" /></Menu.Item>
                                <Menu.Item key="5"><Icon spin={true} type="login" className="loggin-btn" /></Menu.Item>
                    </Menu>

そのため、ドキュメントをもう一度読み、レスポンシブにするためにメニュー内でグリッドを使用する必要があると考えました。ただし、エラーが発生しました： errors

コードは次のとおりです。

<Menu
                        theme="dark"
                        mode="horizontal"
                        defaultSelectedKeys={["1"]}
                        style={{ lineHeight: '64px' }}
                        breakpoint="lg"
                        collapsedWidth="0"
                    >

                        <Row key="1" Gutter={16}>
                            <Col span={3} key="1">
                                <Menu.Item key="1">nav 1</Menu.Item>
                            </Col>
                            <Col span={3} key="2">
                                <Menu.Item key="2">nav 2</Menu.Item>
                            </Col>
                            <Col span={3} key="3">
                                <Menu.Item key="3">nav 3</Menu.Item>
                            </Col>
                            <Col span={3} offset={9} key="4">
                                <Menu.Item key="4"><Icon spin={true} type="plus-circle" className="publish-btn" /></Menu.Item>
                            </Col>
                            <Col span={3} key="5">
                                <Menu.Item key="5"><Icon type="login" className="loggin-btn" /></Menu.Item>
                            </Col>
                        </Row>
                    </Menu>

助けてください。ありがとう

reactjsantd
14
Franva

プロジェクトのAnt設計を選択する決定において、私はこの質問を見ていました。レスポンシブなnavbarは一般的なシナリオですが、Ant Designにそのようなものがないのはなぜだろうと思っていましたか？次に、レポで問題を検索し、問題へのコメントとして Ant Design Mobile を見つけました。

モバイルデバイス用に個別のパッケージがあります。 Ant Design Mobileには、 web components の個別のセクションがあります。そのセクションでは、モバイルデバイスのハンバーガーアイコンに適した Men コンポーネントを見つけることができます。

これが将来の読者に役立つことを願っています。

10
user158

私もそのような機能を探していましたが、Ant Menuをレスポンシブにするために、シンプルなReactコンポーネントを作成しました。

このコンポーネントは、Ant Menuマークアップをプロップとして受け入れ、そのまま（デスクトップの場合）、または渡されたメニューマークアップをラップするPopoverコンポーネント（モバイルの場合）のいずれかで、ビューポート幅に基づいてメニューを条件付きでレンダリングします。

ビューポートがハンバーガーアイコンだけをレンダリングするのに十分狭い場合の外観のスクリーンショットを含めています。

Default Ant MenuResponsive Ant Menu

Githubリポジトリは、実例 here で見つけることができます。

そして、フードチェックアウトでどのように機能するかについてより詳細な情報を見つけるために、私の投稿- Antデザインのレスポンシブメニュー

それが役に立てば幸い。

4
Tom

最初の説明：antd docsの「レスポンシブ」（ この例 のドキュメント内）の意味は、not navbarアイテムはリフローしますが、sidebarは小さなメニューに折りたたまれるか、ハンバーガートリガーボタンが表示されて消えます。

2番目：メニューと行/列を混在させることは悪い考えです。 Menu.ItemはMenuの直接の子要素であると想定しており、Row/Colを介して同じ小道具を渡さない孫にするため、エラーが発生しています。

明確化で説明されているように、AntDでは要件をサポートしていません。私のAntDベースのサイトの1つ（ https://racefox.se ）は、探しているものと同様の方法で機能します。そのサイトで行っているのは、デスクトップナビゲーションバー用とハンバーガー付きの小さな画面サイドバー用の2つのメニューセットをレンダリングし、CSSメディアクエリを使用して@screen-smブレークポイント。

2
Jesper We