MUI с фреймворком django

Возможно ли использовать mui с фреймворком django? Я бы хотел, чтобы он был на стороне сервера, используя django. Я знаю, что обычно mui строится с рендерингом на стороне клиента с помощью библиотеки react. Я нашел библиотеку cdn на muicss.com, но боюсь, что эта библиотека устарела. Я хотел бы использовать текущую версию 5.0 и все ее классы/компоненты. Есть идеи?

Существует официальный проект MUI для веб, который поможет вам создать HTML веб-компоненты Server-Side Rendering, используя CDN версию MUI, например:

Пример home.html:

!-- Required styles for Material Web -->
<link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
<h1>Hello {{ dummy_context }}</h1> <!-- Render Django Context -->
<!-- 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>

Вы можете извлечь из этого пользу, добавив HTML "home.html" в ваше визуализированное представление и получив гибридный механизм рендеринга, который может использовать MUI и язык шаблонов Django.

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'),
]

Ссылки на компоненты материалов для полотна:

Вернуться на верх