在 Odoo 中使用 decoration-* 自定义样式
在 Odoo 中使用 decoration-* 自定义样式
在 Odoo 的开发中，视觉效果与用户体验息息相关。使用 decoration-* 属性可以方便地为 tree 视图中的行应用条件样式。本文将介绍如何使用这些装饰类来自定义样式，以提高界面的可读性和美观性。
什么是 decoration-*？
decoration-* 是 Odoo 中用于条件格式化的属性，允许你根据模型字段的值来改变行的样式。Odoo 提供了几种内置的装饰类，例如：
decoration-danger: 表示危险状态，通常用于高亮显示需要关注的行。decoration-success: 表示成功状态，通常用于展示成功的操作结果。decoration-info: 表示信息状态，用于展示普通的信息。
使用步骤
1. 定义自定义 CSS 样式
首先，在你的 Odoo 模块中创建一个 CSS 文件（如 custom_styles.css），并在其中定义你的自定义样式。例如，以下样式将定义 decoration-danger 的外观：
/* <your_module_name>\static\src\scss\custom.css */
.o_data_row.decoration-danger {background-color: #f5c6cb !important; /* 自定义背景颜色 */color: #721c24 !important; /* 自定义文字颜色 */
}
2. 在 XML 视图中使用 decoration 属性
接下来，在你的 tree 视图中使用 decoration-* 属性。例如，当某个字段的值超过特定值时，你希望整行显示为危险状态：
<record id="loss_table_view_tree" model="ir.ui.view"><field name="name"><your_module_name>.view.tree</field><field name="model"><your_module_name></field><field name="arch" type="xml"><tree decoration-danger="age > 18"><field name="age"/><field name="create_date" string="创建时间"/></tree></field>
</record>
在这个例子中，当 age 字段的值大于 18 时，该行将应用 decoration-danger 样式。
3. 确保加载 CSS 文件
确保你的 CSS 文件被正确加载。你可以在模块的 assets 中声明这个文件：
<template id="assets_backend" name="Custom Styles" inherit_id="web.assets_backend"><xpath expr="." position="inside"><link rel="stylesheet" type="text/css" href="/your_module_name/static/src/css/custom.css"/></xpath>
</template>
4. 测试效果
启动 Odoo 并访问你定义的 tree 视图。如果一切正常，当 age 大于18 时，行应该会变为你定义的样式。
结论
使用 decoration-* 属性在 Odoo 的 tree 视图中应用自定义样式是一种有效的方式，可以提高界面的可读性和用户体验。通过结合自定义的 CSS 样式，你可以灵活地展示数据状态，帮助用户快速识别需要注意的内容。
希望这篇教程能帮助你在 Odoo 开发中更好地使用 decoration-* 自定义样式！如果有任何问题或建议，欢迎在下方留言讨论。