带有 django 框架的 MUI

Question

是否可以将 mui 与 django 框架一起使用？我想使用 django 将其保留在服务器端。我知道 mui 通常是使用 React 库通过客户端渲染构建的。我确实在 muicss.com 中找到了一个 CDN 库，但我担心这个库已经过时了。我想使用当前版本 5.0 及其所有类/组件。有什么想法吗？

Answer 1

MUI 有一个官方 CDN 版本，它将帮助您使用服务器端渲染构建 HTML Web 组件。

• 网络材料组件
• 开始使用
• MDC-101 Web：材料组件 (MDC) 基础知识 (Web)
• Github 存储库

您可以通过将 CSS 和 JS“CDN 版本”添加到常规 HTML 模板中来受益，例如下面的“home.html”，然后使用 Django 视图渲染它；您肯定可以传递上下文变量，以及 Django 在渲染模板时可以提供的所有内容。

示例

home.html

：

!-- Required styles for Material Web -->
<link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
<!-- Render Django Context -->
<h1>Hello {{ dummy_context }}</h1> 
<!-- Render textfield component -->
<label class="mdc-text-field mdc-text-field--filled">
  <span class="mdc-text-field__ripple"></span>
  <span class="mdc-floating-label" id="my-label">Label</span>
  <input type="text" class="mdc-text-field__input" aria-labelledby="my-label">
  <span class="mdc-line-ripple"></span>
</label>

<!-- Required Material Web JavaScript library -->
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
<!-- Instantiate single textfield component rendered in the document -->
<script>
  mdc.textField.MDCTextField.attachTo(document.querySelector('.mdc-text-field'));
</script>

views.py

：

from django.views.generic.base import TemplateView

class HomePageView(TemplateView):

    template_name = "home.html"

    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        context['dummy_context'] = "This is a dummy context"
        return context

urls.py

：

from django.urls import path

from myapp.views import HomePageView

urlpatterns = [
    path('', HomePageView.as_view(), name='home'),
]

Github 存储库中有可用 MUI 包/组件的完整列表。