Odoo 前端开发：你需要了解的常见 CSS 类

最新推荐文章于 2025-03-11 21:41:49 发布

山上春

最新推荐文章于 2025-03-11 21:41:49 发布

阅读量556

点赞数 18

分类专栏： # odoo 文章标签： css 前端 odoo

本文链接：https://blog.youkuaiyun.com/Min_Xiansen/article/details/144847631

版权

odoo 专栏收录该内容

5 篇文章

订阅专栏

在 Odoo 前端开发中，CSS 类扮演着至关重要的角色。Odoo 框架自带了一套强大的 CSS 类，它们不仅能提供一致的 UI 风格，还能简化开发过程。本文将为你介绍 Odoo 中最常用的 CSS 类，让你快速上手 Odoo 前端开发。

布局类 (Layout Classes)

这些类主要用于控制元素的布局和排列，它们通常应用于 <div>, <section> 等容器元素。

oe_title:
- 用途: 定义视图的标题区域样式。
- 效果: 通常用于包含视图的标题 (<h1>, <h2>, <h3> 等)，具有较大的字号、粗体和一些内边距，使其突出显示。
- 示例:
```
<div class="oe_title">
    <h1>My Title</h1>
</div>
```

o_address_format:

用途: 定义地址字段的布局格式。
效果: 将地址字段按 Odoo 预定义的格式进行排列，通常与 o_address_street、o_address_city 等类结合使用。它通常是一个 div 标签。

示例:

<div class="o_address_format">
    <field name="street" class="o_address_street"/>
    <field name="city" class="o_address_city"/>
    <field name="state_id" class="o_address_state"/>
    <field name="zip" class="o_address_zip"/>
    <field name="country_id" class="o_address_country"/>
</div>

o_kanban_view:
- 用途: 控制看板视图的样式。
- 效果: 通常用于包裹看板视图的卡片，提供卡片式的布局。
  - 通常包裹在 <div> 标签。
- 示例:
```
 <div class="o_kanban_view">
      
 </div>
```
o_list_view:
- 用途: 控制列表视图的样式。
- 效果: 通常用于包裹列表视图，提供列表的样式。
  - 通常包裹在 <div> 标签中, 位于 <tree> 标签的上一级。
- 示例:
```
   <div class="o_list_view">
       <tree>
           
       </tree>
    </div>
```
o_field_widget:
- 用途: 用于包裹字段部件 (通常是 <div> 标签)。
- 效果: 提供了字段部件的通用样式，例如间距。
- 示例:
```
    <div class="o_field_widget">
       <field name="name"/>
    </div>
```
row, col-x (如 col-6, col-12 等):
- 用途: 用于实现网格布局，与 Bootstrap 类似。
  - row: 表示一行。
  - col-x: 表示使用栅格系统，将容器分割成最多 12 列。 x 可以是 1 到 12 的整数。
- 效果: 在 Odoo 中，可以实现水平布局，并控制不同屏幕尺寸的显示效果。
- 示例:
```
    <div class="row">
        <div class="col-6">
            
        </div>
        <div class="col-6">
            
       </div>
    </div>
```
clearfix:
- 用途: 用于清除浮动元素的影响。
- 效果: 使得父元素可以正确地包裹浮动元素，防止布局混乱。
  - 通常包裹在 <div> 标签中。
- 示例:
```
    <div class="clearfix">
      <div style="float:left;">
        
      </div>
    </div>
```

字段相关类 (Field Related Classes)

这些类通常与 <field> 标签或包裹 <field> 的元素一起使用，用于控制字段的样式。

o_address_street, o_address_city, o_address_state, o_address_zip, o_address_country:
- 用途: 用于地址字段，它们通常与 o_address_format 类结合使用。
- 效果: o_address_street, o_address_city, o_address_state, o_address_zip 和 o_address_country 定义了地址字段的输入框的默认样式和排版。
oe_avatar:
- 用途: 通常用于图片类型的字段。
- 效果: 将图片显示成头像，通常会使用圆角的样式，并且限定图片尺寸。
oe_right, oe_left:
* 用途: 用于控制文本的对齐方式。
* 效果: oe_right 使文本右对齐，oe_left 使文本左对齐。
oe_read_only:
- 用途: 用于只读的字段 ( 通常是 <div> 标签)。
- 效果: 提供只读字段的样式，例如禁用输入框，并使用灰色背景。
oe_edit_only:
- 用途: 用于编辑模式下的字段 ( 通常是 <div> 标签)。
- 效果: 当在编辑模式下，该字段才会显示。
oe_bold:
- 用途: 用于强调文本 ( 通常是 <span> 标签)。
- 效果: 将文本设置为粗体。
oe_italic:
- 用途: 用于强调文本 ( 通常是 <span> 标签)。
- 效果: 将文本设置为斜体。
oe_underline:
- 用途: 用于强调文本 ( 通常是 <span> 标签)。
- 效果: 将文本添加下划线。
oe_inline:
- 用途: 用于使元素在同一行显示 ( 通常是 <span> 标签)。
- 效果: 使元素变成行内元素。

按钮和链接类 (Button and Link Classes)

这些类用于按钮和链接的样式。它们通常应用在 <a> 或者 <button> 标签中。

oe_button, oe_link:
- 用途: 用于按钮或链接，提供 Odoo 默认的按钮或链接的样式。
- 效果: 使元素看起来像是按钮或链接，并且具备基本的样式，例如背景色，边框和鼠标悬浮效果等。
oe_stat_button:
- 用途: 通常用于显示统计信息的按钮。
- 效果: 看起来像带有图标和数字的按钮，并可以设置不同的状态，例如成功，警告或者错误。

其他常用类 (Other Common Classes)

oe_view_nocontent_create:
- 用途: 用于在没有数据时显示提示信息。
- 效果: 通常用于显示 “Create…” 按钮和提示信息，引导用户创建数据。
o_form_sheet_bg:
- 用途: 用于表单的背景，通常包裹在 <sheet> 标签外层。
- 效果: 提供表单视图背景的样式。
o_list_table:
* 用途: 用于列表视图的表格元素。
* 效果: 提供列表视图表格的样式，例如行高，字体大小等。

o_notebook:

用途: 用于包裹选项卡。
效果: 提供选项卡切换的功能，通常和 <page> 配合使用。

示例:

   <div class="o_notebook">
        <page string="Tab 1">
           <!-- 内容 -->
        </page>
          <page string="Tab 2">
            <!-- 内容 -->
        </page>
   </div>

o_form_view:
* 用途: 用于定义表单视图。
* 效果: 提供表单视图的默认样式，通常应用于 <form> 标签的上一级。

如何使用这些类

在 XML 视图中使用: 你可以直接在 XML 视图中使用这些 CSS 类，例如 class="oe_title", class="o_address_street", class="o_list_view" 等。
结合 HTML 标签使用: 这些类通常与 HTML 标签（如 <div>, <span>, <a>, <button>， <table> 等）结合使用。
自定义样式: 你可以使用浏览器的开发者工具来检查这些 CSS 类的具体定义，也可以在 Odoo 的自定义模块中使用这些 CSS 类。你也可以在这些内置类基础上，添加一些自定义的样式，例如设置 style="color:red" 等。

总结

本文详细介绍了 Odoo 中常见的 CSS 类，覆盖了布局，字段，按钮/链接和其他常用类。它们提供了 Odoo 应用所需的标准样式和布局，可以帮助你快速开发 Odoo 的前端。记住，你应该尽可能使用这些内置的 CSS 类，并了解它们的使用场景。熟悉这些内置的 CSS 类，可以让你更好地理解 Odoo 的 UI 结构，并构建出更符合 Odoo 风格的应用。