“Kanban卡布局”的版本间的差异
来自Odoo大V社-odoo中文开发手册
| 第1行： | 第1行： | ||
看板卡片的主要内容区域是在kanban-box模板中定义的。此内容区域还可以有页脚子容器。 | 看板卡片的主要内容区域是在kanban-box模板中定义的。此内容区域还可以有页脚子容器。 | ||
| − | <nowiki>一个单一的页脚，通过oe_kanban_footer CSS类我们将在kanban box的底部使用<div> | + | <nowiki>一个单一的页脚，通过oe_kanban_footer CSS类我们将在kanban box的底部使用<div>元素。这个类将自动分割其内部元素适应空间，实现左右对齐。</nowiki> |
打开一个动作菜单的按钮也可以在卡的右上角。作为替代方案，Bootstrap提供pull-left和pullright类，可以用来在卡的任何地方添加左对齐或右对齐元素，包括在oe_kanban_footer页脚。 | 打开一个动作菜单的按钮也可以在卡的右上角。作为替代方案，Bootstrap提供pull-left和pullright类，可以用来在卡的任何地方添加左对齐或右对齐元素，包括在oe_kanban_footer页脚。 | ||
| 第61行： | 第61行： | ||
<!-- Right hand footer... --> | <!-- Right hand footer... --> | ||
<field name="kanban_state" widget="kanban_state_selection"/> | <field name="kanban_state" widget="kanban_state_selection"/> | ||
| − | <img | + | <img t-att-src="kanban_image( |
'res.users', 'image_small', record.user_id.raw_value)" width="24" height="24" class="oe_kanban_avatar pull-right" /> | 'res.users', 'image_small', record.user_id.raw_value)" width="24" height="24" class="oe_kanban_avatar pull-right" /> | ||
</div> | </div> | ||
2018年5月29日 (二) 12:04的最新版本
看板卡片的主要内容区域是在kanban-box模板中定义的。此内容区域还可以有页脚子容器。
一个单一的页脚，通过oe_kanban_footer CSS类我们将在kanban box的底部使用<div>元素。这个类将自动分割其内部元素适应空间，实现左右对齐。
打开一个动作菜单的按钮也可以在卡的右上角。作为替代方案，Bootstrap提供pull-left和pullright类，可以用来在卡的任何地方添加左对齐或右对齐元素，包括在oe_kanban_footer页脚。
这是我们为我们的看板卡Qweb模板第一次循环：
<!-- Define the kanban-box template -->
<t t-name="kanban-box">
<!-- Set the Kanban Card color: -->
<div t-attf-class="#{kanban_color(record.color.raw_value)} oe_kanban_global_click">
<div class="o_dropdown_kanban dropdown">
<!-- Top-right drop down menu here... -->
</div>
<div class="oe_kanban_content">
<div class="oe_kanban_footer">
<div>
<!-- Left hand footer... -->
</div>
<div>
<!-- Right hand footer... -->
</div>
</div>
</div><!-- oe_kanban_content -->
<div class="oe_clear"/>
</div><!-- kanban color -->
</t>
这就列出了看板卡的总体结构。您可能注意到，color颜色字段正在使用在顶部元素中，以动态设置卡片的颜色。我们将在下一个章节解释t-attf Qweb指令。
现在让我们来研究主要内容区域，并选择在那里放置什么内容：
<!-- Content elements and fields go here... --> <div> <field name="tag_ids" /></div> <div> <strong> <a type="open"><field name="name" /></a> </strong></div> <ul> <li><field name="user_id" /></li> <li><field name="date_deadline" /></li></ul>
大多数模板是常规的HTML，但我们也看到了用于渲染字段值的<field>元素，以及在常规窗体视图按钮中使用的type属性，在此用作<a>锚定标记。 在左边的页脚，我们要插入一个优先级（priority）部件:
<div> <!-- Left hand footer... --> <field name="priority" widget="priority"/> </div>
这里我们可看到priority字段被增加，与在表单视图做的一样。
在右边页脚，我们放置看板状态（state）部件和代办任务的所有者的头像：
<div>
<!-- Right hand footer... -->
<field name="kanban_state" widget="kanban_state_selection"/>
<img t-att-src="kanban_image(
'res.users', 'image_small', record.user_id.raw_value)" width="24" height="24" class="oe_kanban_avatar pull-right" />
</div>
使用<field>元素添加看板状态，就像在常规窗体视图中一样。用户头像图片插入使用HTML<img> 标记。图像的内容是使用Qweb的 t-att-指令动态生成的，我们将在稍后解释。
有时我们希望有一个小的代表性的图像显示在卡上，如同联系人的例子。作为参考，可以通过添加以下内容作为第一个内容元素：
<img t-att-src="kanban_image( 'res.partner', 'image_medium', record.id.value)" class="o_kanban_image"/>
上一节：Kanban卡元素 下一节：添加Kanban卡选项菜单