完全にantのデザインでサイドバーを隠す

Question

onCollapseの方法では、アリのデザインのサイドバーを完全に隠すためにとにかくありますか？ 1つの方法は、ディスプレイをnoneに設定することですが、私はそのアニメーションがonCollapseメソッドがデフォルトで提供するのと同じアニメーションをしたいと思っていません。

Answer 1

Antdはブートストラップに似たブレークポイントを使用しています。彼らの考えはモバイルファーストです。つまり、まずモバイルで考えるべきです。 これは、あなたのWebアプリケーションをデスクトップ用にデザインして、それを小さなビューで表示/非表示にしないでください。 代わりに、モバイルビュー用にデザインし、デスクトップビューに調整する必要があります。

最終的に、私は言いたいこと、display:noneとしてサイドバーのデフォルトの状態を設定し、the "Responsive" exampleで述べたように、あなたがより詳細antd hide on smaller view

Answer 2

のため、この質問を見ることができるように<Col md={2} />

としてグリッドブレークポイントを使用<Layout.Sider collapsedWidth={0} />を設定すると完全に非表示になります。

デフォルトでは、ハンバーガーアイコンが付いたトリガーボタンが表示されますが、trigger={null}を追加するとオフにすることができます。