web-dev-qa-db-fra.com

Comment aligner à droite les éléments de menu dans Ant Design?

Il y a un problème ouvert Git demandant des accessoires pour l'alignement des éléments du menu. En attendant, quelle est la bonne façon de déplacer certains éléments de la barre de navigation (par exemple, connexion, déconnexion) vers la droite?

Voici un exemple de code pour un menu, où tous les éléments du menu sont sur le côté gauche.

import { Menu, Icon } from 'antd';
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;

class App extends React.Component {
  state = {
    current: 'mail',
  }
  handleClick = (e) => {
    console.log('click ', e);
    this.setState({
      current: e.key,
    });
  }
  render() {
    return (
      <Menu
        onClick={this.handleClick}
        selectedKeys={[this.state.current]}
        mode="horizontal"
      >
        <Menu.Item key="mail">
          <Icon type="mail" />Navigation One
        </Menu.Item>
        <Menu.Item key="app" disabled>
          <Icon type="appstore" />Navigation Two
        </Menu.Item>
        <SubMenu title={<span><Icon type="setting" />Navigation Three - Submenu</span>}>
          <MenuItemGroup title="Item 1">
            <Menu.Item key="setting:1">Option 1</Menu.Item>
            <Menu.Item key="setting:2">Option 2</Menu.Item>
          </MenuItemGroup>
          <MenuItemGroup title="Item 2">
            <Menu.Item key="setting:3">Option 3</Menu.Item>
            <Menu.Item key="setting:4">Option 4</Menu.Item>
          </MenuItemGroup>
        </SubMenu>
        <Menu.Item key="alipay">
          <a href="https://ant.design" target="_blank" rel="noopener noreferrer">Navigation Four - Link</a>
        </Menu.Item>
      </Menu>
    );
  }
}

ReactDOM.render(<App />, mountNode);
reactjsantd
8
rampatowl

Essayez de donner les éléments de menu que vous voulez à droite float: right Via le style JSX ou une classe CSS.

Exemple en tirant l'élément Navigation Three vers la droite avec le style en ligne JSX, style={{float: 'right'}}:

    <SubMenu style={{float: 'right'}} title={<span><Icon type="setting" />Navigation Three - Submenu</span>}>
      <MenuItemGroup title="Item 1">
        <Menu.Item key="setting:1">Option 1</Menu.Item>
        <Menu.Item key="setting:2">Option 2</Menu.Item>
      </MenuItemGroup>
      <MenuItemGroup title="Item 2">
        <Menu.Item key="setting:3">Option 3</Menu.Item>
        <Menu.Item key="setting:4">Option 4</Menu.Item>
      </MenuItemGroup>
    </SubMenu>

MISE À JOUR: (pour Firefox):

Si vous avez droit et éléments de menu gauche, vous devez ajouter
style={{float: 'right'}} À droite MenuItem et
style={{float: 'left'}} À gauche.

Si vous omettez ce dernier, certains navigateurs (Firefox) afficheront les balises <li> Sous-jacentes avec une pause entre eux.

11
Paul