Блог

Главная - Вопросы по программированию - Как сделать так, чтобы текст отображался на правой стороне компонента панели приложений/панели инструментов mui?

Как сделать так, чтобы текст отображался на правой стороне компонента панели приложений/панели инструментов mui?

#css #material-ui #tailwind-css

Вопрос:

Как сделать следующую строку меню такой же, но с log out кнопкой на правой стороне? введите описание изображения здесь

Код:

     <main>
      <AppBar>
        <Toolbar>
        <Typography style={{ marginRight: 16 }} variant="h6" className="text-lg cursor-pointer" onClick={() => redirect("/")}>
            Home
          </Typography> 
          <Typography style={{ marginRight: 16 }} variant="h6" className="text-lg cursor-pointer" onClick={() => redirect("/projects")}>
            Projects
          </Typography> 
          <Typography style={{ marginRight: 16 }} variant="h6" className="text-lg cursor-pointer" onClick={() => redirect("/team")}>
            Goals
          </Typography> 
          {!session amp;amp;
            <Typography style={{ marginRight: 16 }} variant="h6" className="text-lg cursor-pointer" onClick={() => redirect("/login")}>
              Log in
            </Typography> 
          }
          {session amp;amp;
            <Typography  variant="h6" className="text-lg cursor-pointer right-0" onClick={() => signOut()}>
              log out
            </Typography> 
          }
        </Toolbar>
      </AppBar>
      <Toolbar />
    </main>

Я очень устал, так как последние 1,5 часа боролся с этой дурацкой ошибкой

Комментарии:

1. Используете ли вы версию 5 material-ui ?

Ответ №1:

вы можете добавить такие дивы и использовать justify-between и flex для добавления пространства между ними.

 <main>
  <AppBar>
    <Toolbar>
       <div className="flex justify-between">
         <div>
          <Typography style={{ marginRight: 16 }} variant="h6" className="text-lg cursor-pointer" onClick={() => redirect("/")}>
        Home
      </Typography> 
      <Typography style={{ marginRight: 16 }} variant="h6" className="text-lg cursor-pointer" onClick={() => redirect("/projects")}>
        Projects
      </Typography> 
      <Typography style={{ marginRight: 16 }} variant="h6" className="text-lg cursor-pointer" onClick={() => redirect("/team")}>
        Goals
      </Typography> 
      {!session amp;amp;
        <Typography style={{ marginRight: 16 }} variant="h6" className="text-lg cursor-pointer" onClick={() => redirect("/login")}>
          Log in
        </Typography> 
      }
      </div>
      <div>
        {session amp;amp;
        <Typography  variant="h6" className="text-lg cursor-pointer right-0" onClick={() => signOut()}>
          log out
        </Typography> 
      }
      </div>
       </div>
    </Toolbar>
  </AppBar>
  <Toolbar />
</main>

Ответ №2:

Просто добавьте это в свой CSS. Он выберет последнее <Typography> (которое в вашем случае является выходом из системы) в вашем <Toolbar> и отправит его в крайнюю правую часть.

 Toolbar Typography:last-child {
  float: right;
}

Комментарии:

1. @ProPoop пожалуйста, попробуйте подход, описанный выше, и дайте мне знать, если у вас возникнут какие-либо сомнения/ разъяснения.

Ответ №3:

Моя реализация заключается в использовании css flexbox. Я группирую три элемента с помощью коробки и внедряю в нее CSS flexbox.

 import React from "react";
import { AppBar, Box, Toolbar, Typography } from "@mui/material";

function App() {
  return (
    <AppBar>
      <Toolbar sx={{ display: "flex" }}>
        <Box sx={{ display: "flex", flex: "1 1 0" }}>
          <Typography
            style={{ marginRight: 16 }}
            variant="subtitle2"
            className="text-lg cursor-pointer"
            // onClick={() => redirect("/")}
          >
            Home
          </Typography>
          <Typography
            style={{ marginRight: 16 }}
            variant="subtitle2"
            className="text-lg cursor-pointer"
            // onClick={() => redirect("/projects")}
          >
            Projects
          </Typography>
          <Typography
            style={{ marginRight: 16 }}
            variant="subtitle2"
            className="text-lg cursor-pointer"
            // onClick={() => redirect("/team")}
          >
            Goals
          </Typography>
        </Box>
        {/* session */}
        {false amp;amp; (
          <Typography
            style={{ marginRight: 16 }}
            variant="subtitle2"
            className="text-lg cursor-pointer"
            // onClick={() => redirect("/login")}
          >
            Log in
          </Typography>
        )}
        {/* lets assume that session is true */}
        {true amp;amp; (
          <Typography
            variant="subtitle2"
            className="text-lg cursor-pointer right-0"
            // onClick={() => signOut()}
          >
            log out
          </Typography>
        )}
      </Toolbar>
    </AppBar>
  );
}

export default App;

Вы можете взаимодействовать с моей собственной реализацией в поле codesandbox, просто нажмите здесь

Метки: ,