Я делаю приложение для редактора с макетом, например, google sheet, или любое простое веб-приложение с тонкой, широкоэкранной панелью инструментов вверху и другими элементами ниже.Но ... У меня проблемы с позиционированием элементов на панели инструментов.Я планирую разместить:
- логотип в левом углу
- что-то посередине
- две кнопки с правой стороны в определенном порядке (например, кнопка A иB, где B находится ближе к правому краю экрана)
И самое главное, я хочу расположить эти элементы внутри панели инструментов, чтобы они были вертикально в центре .
Я пробовал так много вещей, но на самом деле ничего не получалось, за исключением базовой системы, в которой я хочу разместить элементы:
.layout {
height: 100vh;
display: grid;
grid-template-columns: 34% 33% auto;
grid-template-rows: 50px auto;
grid-template-areas:
"toolbar toolbar toolbar"
"searchbox resultbox editorbox";
}
.toolbar {
grid-area: toolbar;
}
.searchbox {
grid-area: searchbox;
}
.resultbox {
grid-area: resultbox;
}
.manju-editor {
grid-area: editorbox;
}
Можете ли вы сказать мне, как я могу расположить элементыописанный выше способ?
Редактировать: для каждого запроса также добавляется HTML, приложение создается с помощью create-реагировать на приложение, поэтому html является его стандартным index.html, а приложение «назначается» корню:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
метод визуализации из app.js:
<div className={userSession.layout.name}>
{userSession.layout.toolbar.active && <div className="toolbar">
{this.generateComponents("toolbar")}
</div>}
{userSession.layout.search.active && <div className="searchbox">
search
</div>}
{userSession.layout.results.active && <div className="resultbox">
result
</div>}
{userSession.layout.editor.active && <div className="editor">
editor
</div>}
</div>