带有 django 框架的 MUI

问题描述 投票:0回答:1

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

django material-ui server-side
1个回答
5
投票

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 包/组件的完整列表。

© www.soinside.com 2019 - 2024. All rights reserved.