如何在你的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。

更新於:2021年8月26日

2K+ 次瀏覽

開啟你的職業生涯

透過完成課程獲得認證

開始學習
廣告
© . All rights reserved.