当前位置：网站首页>Thymeleaf th:classappend attribute append th:styleappend style append th:data- custom attribute

Thymeleaf th:classappend attribute append th:styleappend style append th:data- custom attribute

2022-07-05 14:18:00 【fengyehongWorld】

Catalog

One . `th:classappend`
Two . `th:styleappend`
3、 ... and . ` Custom properties `
Four . `data-th- How to write the attribute name `

Background data preparation

public ZTestEntity init3() {
    
	ZTestEntity zTestEntity = new ZTestEntity();
	zTestEntity.setIsAdmin(true);
	zTestEntity.setName(" Jia Feitian ");
	return  zTestEntity;
}
// ------------------------------------------------

@GetMapping("/init3")
public ModelAndView init3() {
    
    ModelAndView modelAndView = new ModelAndView();
    ZTestEntity entity = service.init3();
    modelAndView.addObject("entity", entity);
    modelAndView.setViewName("test3");
    return  modelAndView;
}

The front desk

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <style> .content {
       color: red; } .preAttr {
       margin-top: 10px; } .test3 {
       border: 1px solid yellow; } </style>
    <title>test3 Title of the page </title>
</head>
<body>
	<div id="container" th:object="${entity}">
	    <!-- //  Omit ...... -->
	</div>
</body>
</html>

One . `th:classappend`

<!--  When isAdmin by true when , Additional test3 attribute ; Otherwise, nothing will be done  -->
<div class="content" th:classappend="*{isAdmin} ? test3 : _">th:classappend Test content </div>

After rendering
Insert picture description here

Two . `th:styleappend`

<!--  When isAdmin by true when , Additional  margin-top:50px  The style of ; Otherwise, do nothing  -->
<div style="color: pink;" th:styleappend="*{isAdmin} ? 'margin-top:50px' : _">th:styleappend Test content </div>

After rendering
Insert picture description here

3、 ... and . `Custom properties`

<!-- data-  Custom attributes can be directly accessed through  th:  In the form of  -->
<div th:data-custom-name="*{name}">th:data- Property test content </div>

<!-- th: Any attribute name   The way , You can add any attribute  -->
<div th:haha="*{name}">th: Any attribute test content </div>
<hr>

After rendering
Insert picture description here

Four . `data-th- How to write the attribute name`

<!-- data-th- Property name   and  th: Attribute names work the same , It's just that the writing is different  -->
<div data-th-class="*{name}">data-th- Test content </div>
<div th:class="*{name}">th:class Test content </div>