web-dev-qa-db-fra.com

Problème de NavBar sensible à Ant Design

Mise à jour:

Permettez-moi de me clarifier. Je ne veux pas de barre latérale (comme dans mon cas, c'est un petit site Web, pas beaucoup de pages). Tout ce que je veux, c'est d'avoir une barre de navigation supérieure lors du redimensionnement du menu. Les éléments peuvent se réduire et devenir une icône de hamburger. De plus, j'ai besoin de 2 éléments de menu sur le côté droit.

J'utilise AntD, je pensais que ce serait une configuration facile et rapide pour un NavBar réactif commun et standard, mais il s'est avéré qu'il ne répond pas par défaut:

squashed

Comme vous pouvez le voir, il est écrasé.

Voici le code:

<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>

J'ai donc relu le document et j'ai pensé que je devrais utiliser Grid dans le menu pour le rendre réactif. Cependant, cela m'a jeté des erreurs: errors

Voici le code:

<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>

Veuillez aider. Merci

reactjsantd
14
Franva

Je regardais cette question dans une décision de choisir la conception Ant pour un projet. La barre de navigation réactive est un scénario courant, mais je me demandais pourquoi il n'y a rien de tel dans Ant Design? Ensuite, j'ai recherché des problèmes dans le référentiel et trouvé le Ant Design Mobile en tant que commentaire d'un problème.

Ils ont un package séparé pour les appareils mobiles. Dans Ant Design Mobile, il y a une section séparée pour composants Web . Dans cette section, vous pouvez trouver un composant Men qui convient à l'icône de hamburger des appareils mobiles.

J'espère que cela sera utile pour les futurs lecteurs.

10
user158

Je cherchais également une telle fonctionnalité il n'y a pas longtemps et afin de rendre le menu Ant réactif, j'ai écrit un simple composant React.

Ce composant accepte le balisage du menu Ant comme accessoire et rend le menu conditionnel en fonction de la largeur de la fenêtre, soit tel quel (pour le bureau), soit dans un composant Popover qui encapsule le balisage de menu passé (pour mobile).

J'inclus des captures d'écran de ce à quoi cela peut ressembler une fois la fenêtre suffisamment étroite pour afficher uniquement l'icône du hamburger.

Default Ant MenuResponsive Ant Menu

Vous pouvez trouver un dépôt Github avec un exemple de travail ici .

Et afin de trouver des informations plus détaillées sur le fonctionnement sous le capot, consultez mon article - Responsive Menu with Ant Design

J'espère que ça aide.

4
Tom

Tout d'abord une clarification: ce que les documents antd entendent par "réactif" (dans cet exemple dans les documents) n'est pas pas que le les éléments de la barre de navigation redistribuent, mais plutôt que la barre latérale s'effondre dans un menu plus petit ou disparaît avec un bouton de déclenchement de hamburger apparaissant.

Deuxièmement: Mélanger le menu et la ligne/colonne est une mauvaise idée. Les erreurs se produisent parce que Menu.Item s'attend à être un élément enfant direct de Menu, et vous en faites un petit-enfant via Row/Col, qui ne passe pas les mêmes accessoires.

AntD ne prend pas en charge vos besoins, comme expliqué dans votre clarification. Un de mes sites basés sur AntD ( https://racefox.se ) fonctionne de manière similaire à ce que vous recherchez. Ce que je fais sur ce site est de rendre deux ensembles de menus, un pour une barre de navigation de bureau et un pour une petite barre latérale d'écran avec hamburger, puis utiliser des requêtes multimédia CSS pour masquer l'un ou l'autre de chaque côté du @screen-sm point d'arrêt.

2
Jesper We