如何在你的Django專案中實現django-material?
Material Design是一種在開發者中非常流行的設計模板。它在前端作為CDN使用。在這篇文章中,我們將瞭解如何在表單部件上使用Material Design,並從檢視中渲染該表單。
Django-material是一個庫,它將Material Design應用於渲染的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中渲染了我們的檢視。
在**views.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})在這裡,我們建立了一個表單並在前端渲染它。
不要忘記建立一個**templates**資料夾和其中的**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>
在這裡,我們建立了前端並載入了Django Material的CSS和JS,它將自動為我們的表單新增設計。
輸出

你可以使用<style>標籤覆蓋Material CSS。
廣告
資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP