Materialize is a simple implementation of materializecss for Django.
More information on materializecss
- Python >= 2.7
- Django >= 1.8
Download ZIP or clone this repository (https://github.com/yoowillns/django-materialize)
-
Install:
setup.py install -
Add "materialize" to your INSTALLED_APPS settings :
INSTALLED_APPS = [ ... 'materialize', ]
-
In your templates, load the
materializelibrary and use the{% load materialize %}
Create templates folder in project: /templates/layout/MainLayout.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Materialize Demo</title>
<!-- Include static files in project -->
{% include 'lib/materialize_static.html' %}
</head>
<body>
<div class="container">
{% block content %}
<!-- Content project -->
{% endblock %}
</div>
</body>
</html>{% extends 'layouts/MainLayout.html' %}
{% load materialize %}
{% block content %}
<div class="row">
<div class="col s6">
<form class="col s12" action="" method="post">
{% csrf_token %}
{% materialize_form form %}
<button class="btn waves-effect waves-light" type="submit" name="action">Register
</button>
</form>
</div>
</div>
{% endblock %}from django.db import models
class Product(models.Model):
name = models.CharField(max_length=10, verbose_name='Nombre', null=False)
category = models.ManyToManyField(Category, verbose_name='Categoria')
count = models.IntegerField(verbose_name='Cantidad')
date_buy = models.DateField(verbose_name='Fecha de Compra')
image = models.FileField(upload_to='uploads', verbose_name='Imagen')
description = models.TextField(verbose_name='Descripcion')
state = models.BooleanField(verbose_name='Estado', default=False)
date = models.DateTimeField(auto_now_add=True)
def __str__(self):
return self.name
class Meta:
verbose_name = 'Producto'
verbose_name_plural = 'Productos'from django import forms
from django.forms import ModelForm
from models import *
class ProductForm(forms.ModelForm):
class Meta:
model = Product
fields = '__all__'{% extends 'layouts/MainLayout.html' %}
{% load materialize %}
{% block content %}
<div class="row">
<div class="col s6">
<form class="col s12" action="" method="post" enctype="multipart/form-data">
{% csrf_token %}
{% materialize_form form form_title='Producto' data_success='Correcto' %}
<button class="btn waves-effect waves-light" type="submit" name="action">Register
</button>
</form>
</div>
</div>
{% endblock %}
Use class .label-error in css style in project