मटेरियल डिज़ाइन एक डिज़ाइन टेम्पलेट है जो डेवलपर्स के बीच बहुत लोकप्रिय है। इसका उपयोग फ्रंटएंड पर CDN के रूप में किया जाता है। इस लेख में, हम देखेंगे कि अपने फॉर्म विजेट्स पर मटेरियल डिज़ाइन का उपयोग कैसे करें और उस फॉर्म को अपने व्यूज से रेंडर करें।
Django-material एक लाइब्रेरी है जो CDN के बिना रेंडर्ड HTML फाइल या फॉर्म विजेट पर मटेरियल डिज़ाइन लागू करेगी।
सबसे पहले, django-material पैकेज इंस्टॉल करें।
pip install django-material
प्रोजेक्ट और ऐप सेट करें और urls।
settings.py में:
INSTALLED_APPS += ['material']
मेरा ऐप नाम "myapp" है।
उदाहरण
models.py में:
from django.db import models
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})
यहां हमने एक फॉर्म बनाया और इसे फ्रंटएंड पर रेंडर किया।
template फोल्डर और इसमें home.html बनाना न भूलें।
home.html में:
{% include 'material/includes/material_css.html' %} {# ये दो इन्क्लूड #}
{% include 'material/includes/material_js.html' %} {# मटेरियल डिज़ाइन इम्पोर्ट करेंगे #}
<!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>
</html>
यहां, हमने फ्रंटएंड बनाया और अपने Django Material के CSS और JS लोड किए और यह ऑटोमैटिकली हमारे फॉर्म पर डिज़ाइन जोड़ देगा।
आउटपुट
आप <style> टैग का उपयोग करके मटेरियल CSS को ओवरराइड कर सकते हैं।
