Django application to add 'django-crispy-forms' layout objects for Bulma.io
Project description
django-crispy-bulma
This project is a work in progress. We'll remove this header when it's ready to use.
Release 0.0.1 is simply a structural/branding change.
About
This is a Django
application to add django-crispy-forms
layout objects for Bulma.
It is a fork of crispy-forms-bulma by Jure Hotujec, with the intention
of adding support for Django 2.0+, as well as for components found in the bulma-extensions library.
Installation
Clone it from github. Installation via pip
coming soon!
Add package settings to your project settings file
from crispy_forms_bulma.settings import *
#TODO: Find a linter-friendly way to do this
UploadField
The UploadField looks like this:
To create these with CrispyForms, you'll need both a form object and a layout object from our package. Here's an example of how to use them.
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout
from django import forms
from django_crispy_bulma.layout import UploadField
from django_crispy_bulma.forms import ImageField, FileField
class MyForm(forms.Form):
my_image = ImageField(
label="Upload an image of your dog",
required=False
)
my_file = FileField(
label="Upload your actual dog in .dog format",
required=True
)
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.helper = FormHelper()
self.helper.layout = Layout(
UploadField("my_image"),
UploadField("my_file"),
)
A little bit of javascript is needed in order to get the filename to display after a file upload is successful.
Written in vanilla JS, this might look something like this:
window.onload = function() {
// Apply this to all upload fields
const upload_fields = document.querySelectorAll(".file");
for (let i = 0; i < upload_fields.length; i++) {
let input = upload_fields[i].querySelector(".file-input");
let filename = upload_fields[i].querySelector(".file-name");
input.onchange = function() {
filename.textContent = input.files[0].name;
}
}
};
For your convenience, we provide a script that handles this in our companion package, django-simple-bulma. We highly recommend you use these two packages together.
Project details
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Built Distribution
Hashes for django-crispy-bulma-0.0.1.tar.gz
Algorithm | Hash digest | |
---|---|---|
SHA256 | 09dffe4492accd98fbf39380e03218618a8f2905fa0967824cfcebf04f42a7af |
|
MD5 | f175c55ff2f4385934223cadd67c8905 |
|
BLAKE2b-256 | a2877c2e9dff491f48f486821b4d2ecae88220902597650b14302178a4a32fa4 |
Hashes for django_crispy_bulma-0.0.1-py3-none-any.whl
Algorithm | Hash digest | |
---|---|---|
SHA256 | 8580677ce3403ea0aa32cc45a85438c9bc01fb97ad3c300c824e7f2ee1660e00 |
|
MD5 | 38a9cdef66ad2471df7b2d6784901ebb |
|
BLAKE2b-256 | d33c491bfaa3ae327446192937f75a269698a7daa29a1a2437cbd83d1d382bd3 |