Django中基于Material Design Bootstrap实现类Google表单扩展面板方案咨询

嘿，我懂你想要的那种Google表单风格的展开交互——点击行/ div后展开内容、左侧弹出彩色装饰条，还得能在不同页面甚至项目里轻松复用对吧？结合你正在用的Django+Bootstrap+Material Design，其实有几个标准又省心的方案，能把这个交互做成通用组件，不用每次都重复造轮子：

Bootstrap自带的Collapse组件本身就支持展开收起，我们只要给它加一点Google风格的样式，再封装成Django模板片段，就能随处调用了。

第一步：写通用的模板片段（比如存为_expandable_row.html） #

这个片段可以接收参数，灵活配置每个行的颜色、标题和展开内容：

<div class="expandable-row-container mb-3">
  <!-- 可点击的头部 -->
  <div class="expandable-row-header d-flex align-items-center p-3 cursor-pointer" 
       data-bs-toggle="collapse" data-bs-target="#{{ collapse_id }}">
    <!-- 左侧彩色条 -->
    <div class="expandable-color-bar me-3" 
         style="background-color: {{ color }}; width: 4px; height: 40px; border-radius: 2px;"></div>
    <!-- 标题内容 -->
    <div class="flex-grow-1">{{ header_content }}</div>
    <!-- 展开箭头 -->
    <i class="material-icons expandable-icon">expand_more</i>
  </div>
  <!-- 展开的内容区域 -->
  <div id="{{ collapse_id }}" class="collapse expandable-content">
    <div class="p-3 border-top border-light">
      {{ expanded_content|safe }}
    </div>
  </div>
</div>

这里用了Material Design的图标，如果你用Bootstrap图标也可以换成对应的类名。

第二步：加一点自定义CSS（贴合Material Design风格） #

给交互加上平滑过渡和hover效果，让体验更像Google产品：

.cursor-pointer {
  cursor: pointer;
}
.expandable-row-header:hover {
  background-color: rgba(0,0,0,0.05); /* Material Design的浅灰hover效果 */
  transition: background-color 0.2s ease;
}
.expandable-icon {
  transition: transform 0.2s ease;
}
/* 展开时箭头旋转 */
.expandable-row-header[aria-expanded="true"] .expandable-icon {
  transform: rotate(180deg);
}
/* 展开时才显示彩色条 */
.expandable-color-bar {
  opacity: 0;
  transition: opacity 0.2s ease;
}
.expandable-row-header[aria-expanded="true"] .expandable-color-bar {
  opacity: 1;
}

第三步：在任意页面复用 #

只要在需要的模板里引入这个片段，传入参数就搞定：

{% include '_expandable_row.html' with collapse_id="form-row-1" color="#4285F4" header_content="用户基本信息" expanded_content="<div><input class='form-control' placeholder='姓名'><button class='btn btn-primary mt-2'>保存</button></div>" %}

{% include '_expandable_row.html' with collapse_id="form-row-2" color="#EA4335" header_content="联系方式" expanded_content="<div><input class='form-control' placeholder='手机号'></div>" %}

循环生成的话，用forloop.counter给collapse_id加序号就行，比如form-row-{{ forloop.counter }}。

既然你已经在用Material Design的CSS/JS，MDB的Accordion组件本身就自带Google风格的交互，稍微改改就能实现左侧彩色条，省不少自定义CSS的功夫：

<div class="accordion" id="google-style-accordion">
  <div class="accordion-item">
    <h2 class="accordion-header" id="heading-1">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-1">
        <span class="me-3" style="background-color: #FBBC05; width: 4px; height: 30px; border-radius: 2px;"></span>
        表单标题
      </button>
    </h2>
    <div id="collapse-1" class="accordion-collapse collapse" data-bs-parent="#google-style-accordion">
      <div class="accordion-body">
        这里是展开后的内容，比如输入框、按钮都可以放进来
      </div>
    </div>
  </div>
</div>

同样可以把这个封装成模板片段，参数化颜色和内容，方便复用。

如果想在多个Django项目里直接用，把这个做成自定义模板标签更方便：

1. 在你的app下创建templatetags/expandable_tags.py：

from django import template

register = template.Library()

@register.inclusion_tag('expandable_row.html')
def expandable_row(collapse_id, color, header_content, expanded_content):
    return {
        'collapse_id': collapse_id,
        'color': color,
        'header_content': header_content,
        'expanded_content': expanded_content,
    }

2. 在模板里加载标签后直接调用：

{% load expandable_tags %}

{% expandable_row collapse_id="row-3" color="#34A853" header_content="偏好设置" expanded_content="<div><select class='form-select'><option>选项1</option></select></div>" %}

这样不管哪个项目，只要复制这个标签文件和模板片段，就能直接用了。

• 彩色条用Google的品牌色（蓝#4285F4、红#EA4335、黄#FBBC05、绿#34A853），风格更统一。
• 确保Bootstrap的JS（尤其是Collapse组件）和Material Design的JS都正确引入，不然交互会失效。
• 如果需要动态绑定事件（比如展开后加载数据），可以给展开的内容区域加个data-expand-trigger属性，用JS监听shown.bs.collapse事件处理。

这种方式既贴合你现有的技术栈，又能做到真正的通用复用，比之前复杂的实现简洁太多啦~

内容的提问来源于stack exchange，提问作者Marko Zadravec