Я хотел бы создать базовый фрагмент, из которого я могу вставить контент, чтобы убедиться, что весь контент центрирован и имеет определенный размер. В настоящее время у меня есть следующее:
<div th:fragment = "centerColumn(content)" class = "columns is-centered">
<div class = "column is-three-quarters">
<div th:insert = "${content}"></div>
</div>
</div>
и я бы назвал:
<div th:insert = "fragments :: centerColumn( ~{fragments :: couponList(${coupons})} )"></div>
в моем index.html. Однако это работает только для передачи фрагмента в другой фрагмент. Я хотел бы передать html, который не является фрагментом тимелеафа, то есть формой, показанной ниже:
<body class = "has-navbar-fixed-top">
<div th:replace = "fragments :: navbar(${loggedIn})">Insert Navbar/Menu here</div>
<div th:replace = "fragments :: displayCenter(${displayText})"></div>
<br>
<div th:insert = "centerColumn(content)">
<div>form here</div>
</div>
<form method = "post">
<input type = "text" name = "username" placeholder = "Username">
<input type = "password" name = "password" placeholder = "Password">
<input type = "submit" value = "Submit">
</form>
</body>
Я не уверен, как передать либо форму html в содержимое, чтобы передать фрагмент centerColumn, либо включить его, вложенный в div.
html-метаданные:
<!DOCTYPE html>
<html xlmns:th = "http://www.thymeleaf.org">
<!-- fragment for the html head tag. Helps with reusability of a css stylesheet provided -->
<head th:fragment = "html_head">
<meta charset = "ISO-8859-1">
<title>[[${pageTitle}]]</title>
<!-- USE th:text = "${pageTitle}" OR [[${pageTitle}]] -->
<!-- pageTitle: GO TO Controller and check Model -->
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
<style>
.equal-height {
display: flex;
flex-direction: column;
height: 100%;
}
</style>
</head>
Я решил это, но это кажется хакерским. Я поместил форму внутри div, который заменяется, и ссылаюсь на идентификатор формы внутри div и передаю его в качестве параметра фрагменту centerColumn, который заменяет div. *signup относится к имени файла, в котором находится следующий html
<body class = "has-navbar-fixed-top">
<div th:replace = "fragments :: navbar(${loggedIn})">Insert Navbar/Menu here</div>
<div th:replace = "fragments :: displayCenter(${displayText})"></div>
<br>
<div th:replace = "centerColumn(~{signup :: #content})">
<form method = "post" id = "content">
<input type = "text" name = "username" placeholder = "Username">
<input type = "password" name = "password" placeholder = "Password">
<input type = "submit" value = "Submit">
</form>
</div>
</body>