การออกแบบวัสดุเป็นเทมเพลตการออกแบบที่ได้รับความนิยมในหมู่นักพัฒนา ใช้ที่ส่วนหน้าเป็น CDN ในบทความนี้ เราจะมาดูวิธีใช้ดีไซน์ Material ในวิดเจ็ตแบบฟอร์มและแสดงแบบฟอร์มดังกล่าวจากมุมมองของเรา
Django-material เป็นไลบรารี่ที่จะใช้การออกแบบวัสดุกับไฟล์ html ที่แสดงผลหรือวิดเจ็ตแบบฟอร์มโดยไม่ต้องใช้ CDN
ขั้นแรก ติดตั้ง django-material แพ็คเกจ
pip install django-material
ตั้งค่าโปรเจ็กต์และแอปและ URL
ใน settings.py −
INSTALLED_APPS+=['material']
ชื่อแอปของฉันคือ "myapp" .
ตัวอย่าง
ใน 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)
ที่นี่ เราได้สร้างโมเดล Django ง่ายๆ ที่เราจะใช้ในแบบฟอร์ม
ใน urls.py −
from django.urls import path
from . import views
urlpatterns = [
path('', views.home,name="home"),
] ที่นี่ เราแสดงมุมมองของเราใน URL หน้าแรก
ใน 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}) ที่นี่เราสร้างแบบฟอร์มและแสดงผลในส่วนหน้า
อย่าลืมสร้าง เทมเพลต โฟลเดอร์และ home.html ในนั้น
ใน 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>
ที่นี่ เราสร้างส่วนหน้าและโหลด CSS และ JS ของ Django Material ของเรา และจะเพิ่มการออกแบบในแบบฟอร์มของเราโดยอัตโนมัติ
ผลลัพธ์
คุณสามารถแทนที่ CSS วัสดุโดยใช้แท็ก