Thymeleaf как «вставлять» фрагменты и html в другой фрагмент

Я хотел бы создать базовый фрагмент, из которого я могу вставить контент, чтобы убедиться, что весь контент центрирован и имеет определенный размер. В настоящее время у меня есть следующее:

<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>
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
0
170
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я решил это, но это кажется хакерским. Я поместил форму внутри 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>

Другие вопросы по теме