Python/Flask/Jinja2不适用于Web的材质设计组件

Question

我一直在尝试将Python Flask/Flask-Bootstrap/Jinja2 webapp转换为使用Material Design Components for Web，以及应用程序的一部分工作-我正在尝试将webapp的演示尽可能地作为客户端。

我有最新版本的material-components-web.min.js和material-components-web.min.css加载到网页模板中，用于生成所有由Flask提供的页面。

MDC for Web似乎完全依赖于Node.js的使用，我不确定我在上一段中找到并提到的.js和.css文件是否只是随意使用的(这是一个本地Web应用程序，所以大小不是问题)，并且没有任何容易编译的.css文件用于所有子组件，只有.sass。

无论如何，尽管一些样式是正确的，但动态功能，如文本字段上的浮动标签，验证等都不起作用，并且许多元素的位置都是错误的。

我确信我漏掉了一些小东西，但是它是什么呢？

Answer 1

事实证明，我在web上使用MDC时遗漏的是我的文本字段周围的div组件中的data-mdc-auto-init="MDCTextField“属性。

这些信息可以在https://material.io/components/web/catalog/auto-init/页面上找到，但并不容易找到

因此，对于Flask，我的Jinja HTML模板中的表单生成代码是：

{% if field.errors %}
    {% set css_class = 'has_error ' + kwargs.pop('class', '') %}
    <div class="mdc-text-field">
             {{ field(class=css_class, **kwargs) }}
             {{ field.label(class="mdc-text-field__label") }} 
             <div class="mdc-text-field__bottom-line"></div>
             <ul class="errors">{% for error in field.errors %}<li>{{ error|e }}</li>{% endfor %}</ul>
    </div>
{% else %}
    <div class="mdc-text-field">    
            {{ field(**kwargs) }}
            {{ field.label(class="mdc-text-field__label") }}
            <div class="mdc-text-field__bottom-line"></div>
    </div>
{% endif %}

它应该是：

{% if field.errors %}
    {% set css_class = 'has_error ' + kwargs.pop('class', '') %}
    <div class="mdc-text-field" data-mdc-auto-init="MDCTextField">
             {{ field(class=css_class, **kwargs) }}
             {{ field.label(class="mdc-text-field__label") }} 
             <div class="mdc-text-field__bottom-line"></div>
             <ul class="errors">{% for error in field.errors %}<li>{{ error|e }}</li>{% endfor %}</ul>
    </div>
{% else %}
    <div class="mdc-text-field" data-mdc-auto-init="MDCTextField">  
            {{ field(**kwargs) }}
            {{ field.label(class="mdc-text-field__label") }}
            <div class="mdc-text-field__bottom-line"></div>
    </div>
{% endif %}

我花了大约两天的时间才解决了一个非常简单的问题，所以我希望我能为你们中的一些人省去同样的工作。