在 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-* 自定义样式！如果有任何问题或建议，欢迎在下方留言讨论。

---