Material Design là một mẫu thiết kế rất phổ biến giữa các nhà phát triển. Nó được sử dụng ở giao diện người dùng như CDN. Trong bài viết này, chúng ta sẽ xem cách sử dụng material design trên các widget biểu mẫu của chúng tôi và hiển thị biểu mẫu đó từ chế độ xem của chúng tôi.
Django-material là một thư viện sẽ áp dụng material design cho tệp html được hiển thị hoặc tiện ích biểu mẫu mà không có CDN.
Trước tiên, hãy cài đặt django-material gói hàng.
pip install django-material
Thiết lập dự án và ứng dụng và url.
Trong settings.py -
INSTALLED_APPS+=['material']
Tên ứng dụng của tôi là "myapp" .
Ví dụ
Trong models.py -
from django.db import models # Create your models here. class Data(models.Model): Name=models.CharField(max_length=100) salary = models.CharField(max_length=20)
Ở đây, chúng tôi đã tạo một mô hình Django đơn giản mà chúng tôi sẽ sử dụng trong các biểu mẫu.
Trong urls.py -
from django.urls import path
from . import views
urlpatterns = [
path('', views.home,name="home"),
] Tại đây, chúng tôi đã hiển thị chế độ xem của mình trong url trang chủ.
Trong view.py -
from django.shortcuts import render
from django import forms
from .models import Data
class SalaryForm(forms.ModelForm):
class Meta:
model=Data
fields="__all__"
def home(request):
if request.method=='POST':
form=SalaryForm(request.POST)
if form.is_valid():
form.save()
else:
form=SalaryForm()
return render(request,'home.html',{'form':form}) Ở đây, chúng tôi đã tạo một biểu mẫu và hiển thị nó trên giao diện người dùng.
Đừng quên tạo mẫu thư mục và home.html trong đó.
Trong home.html -
{% include 'material/includes/material_css.html' %} #These
two include
{% include 'material/includes/material_js.html' %} # will
import material design
<!DOCTYPE html>
<html>
<head>
<title>
TUT
</title>
<style>
</style>
</head>
<body>
<h2>FORM</h2>
<form action="/" method="post">
{% csrf_token %}
{{ form }}
<input type="submit" value="Submit">
</form>
</body>
Ở đây, chúng tôi đã tạo giao diện người dùng và tải CSS và JS của Django Material của chúng tôi và nó sẽ tự động thêm thiết kế trên biểu mẫu của chúng tôi.
Đầu ra
Bạn có thể ghi đè CSS material bằng thẻ