自定义 CSS 和 t-att-class 的使用

一、创建css文件

<model_name>\static\src\scss\custom.css

css 复制代码
.color_loss_red {
    color: red !important;
}

二、声明css文件

__manifest__.py

xml 复制代码
'assets': {
        'web.assets_backend': [
        	...
            '<model_name>/static/src/scss/custom.css',
        ]
    },

三、引用自定义的css文件

views.xml

xml 复制代码
<?xml version='1.0' encoding='utf-8'?>
<odoo>
	<!-- 引用自定义的css文件 -->
	<template id="assets_backend" name="<model_name> assets" >
	    <xpath expr="." position="inside">
	        <link rel="stylesheet" type="text/css" href="/<model_name>/static/src/scss/custom.css"/>
	    </xpath>
	</template>

	<!-- tree view -->
    <record id="<实际模型名称>_view_tree" model="ir.ui.view">
        <field name="name"><实际模型名称>.view.tree</field>
        <field name="model"><实际模型名称></field>
        <field name="arch" type="xml">
            <tree>
                <field name="age" t-att-class="age > 18? 'color_loss_red' : ''"/>
            </tree>
        </field>
    </record>
</odoo>

三、介绍t-att-class

t-att-class 是 Odoo 的 QWeb 模板引擎中的一个动态属性,用于在 XML 视图中根据条件动态添加 CSS 类。这种机制允许你在视图渲染时根据模型字段的值或其他逻辑条件,动态应用不同的样式。

基本语法:

xml 复制代码
<element t-att-class="condition ? 'class-if-true' : 'class-if-false'">
    <!-- content -->
</element>
  • condition : 条件表达式。如果条件为 True,会使用 'class-if-true';否则使用 'class-if-false'。如果不需要 class-if-false,可以留空。
  • 'class-if-true''class-if-false': 要应用的 CSS 类名。

使用场景:

  • 根据字段值动态应用样式
  • 控制显示逻辑和样式的条件变化
  • 基于状态、数量等的动态样式变化

示例用法

1. 基于条件动态添加样式

假设你有一个 qty_loss 字段,并且你希望在值大于 500 时显示红色背景,在其他情况下保持默认样式:

xml 复制代码
<field name="qty_loss" t-att-class="qty_loss > 500 ? 'red-bg' : ''"/>

在这个例子中:

  • qty_loss 的值大于 500 时,red-bg 类会被应用。
  • qty_loss 的值小于等于 500 时,不会应用任何类(即保持默认样式)。
2. 应用多个类

你还可以同时添加多个类,例如根据条件决定是否应用多个类:

xml 复制代码
<field name="qty_loss" t-att-class="qty_loss > 500 ? 'red-bg bold-text' : ''"/>

这个例子中:

  • 如果 qty_loss 大于 500,则会同时添加 red-bgbold-text 两个类。
  • 否则不添加任何类。
3. 更复杂的条件表达式

你可以使用更复杂的条件逻辑,例如根据多个字段值来动态应用样式:

xml 复制代码
<field name="status" t-att-class="status == 'done' ? 'green-text' : (status == 'cancelled' ? 'red-text' : '')"/>

在这个例子中:

  • 如果 status'done',则应用 green-text 类。
  • 如果 status'cancelled',则应用 red-text 类。
  • 否则,不应用任何类。
4. 应用 CSS 类和保留已有类

你可以使用 t-attf-class 来动态添加类并且保留已经定义的类,类似于字符串格式化功能:

xml 复制代码
<field name="qty_loss" t-attf-class="qty_loss > 500 and 'red-bg' or ''"/>
5. 结合 t-if 使用

如果你需要更加精确地控制什么时候显示某个字段或元素,可以将 t-att-classt-if 结合使用。

xml 复制代码
<field name="qty_loss" t-if="qty_loss > 0" t-att-class="qty_loss > 500 ? 'red-bg' : ''"/>

在这个例子中,只有在 qty_loss > 0 时才会渲染该字段,并且动态应用背景颜色。

注意事项:

  • 确保 CSS 类存在:你需要在自定义 CSS 文件中预先定义这些动态类,否则它们将不起作用。
  • 简洁条件:条件表达式可以非常灵活,但应保持简洁,避免嵌套过深的逻辑。
  • 在不同视图中使用t-att-class 可用于 treeform 等不同视图,适合根据不同数据在不同视图中动态设置样式。

小结:

t-att-class 是 Odoo QWeb 模板中非常实用的动态属性,允许你根据模型数据的值动态应用 CSS 类,从而改变元素的外观。通过这种方式,视图可以实现更加灵活和动态的呈现。

相关推荐
golang学习记2 分钟前
从0死磕全栈之Next.js 应用中的认证与授权:从零实现安全用户系统
前端
苏打水com8 分钟前
携程前端业务:在线旅游生态下的「复杂行程交互」与「高并发预订」实践
前端·状态模式·旅游
Darenm1119 分钟前
深入理解CSS BFC:块级格式化上下文
前端·css
Darenm11120 分钟前
JavaScript事件流:冒泡与捕获的深度解析
开发语言·前端·javascript
@大迁世界25 分钟前
第03章: Vue 3 组合式函数深度指南
前端·javascript·vue.js·前端框架·ecmascript
小白640229 分钟前
前端梳理体系从常问问题去完善-框架篇(react生态)
前端·css·html·reactjs
Hy行者勇哥29 分钟前
数据中台的数据源与数据处理流程
大数据·前端·人工智能·学习·个人开发
JarvanMo37 分钟前
Riverpod 3.0 关键变化与实战用法
前端
二十雨辰1 小时前
vite与ts的结合
开发语言·前端·vue.js
我是日安1 小时前
从零到一打造 Vue3 响应式系统 Day 25 - Watch:清理 SideEffect
前端·javascript·vue.js