是否可以将 mui 与 django 框架一起使用?我想使用 django 将其保留在服务器端。我知道 mui 通常是使用 React 库通过客户端渲染构建的。我确实在 muicss.com 中找到了一个 CDN 库,但我担心这个库已经过时了。我想使用当前版本 5.0 及其所有类/组件。有什么想法吗?
MUI 有一个官方 CDN 版本,它将帮助您使用服务器端渲染构建 HTML Web 组件。
您可以通过将 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 包/组件的完整列表。