Package: django-crispy-bulma
django-crispy-bulmaThis project is an early work in progress. You should not use this package yet, as it is poorly documented and is missing many important features. We'll remove this header when it's ready to use.AboutThis is a Django application to adddjango-crispy-formslayout objects forBulma.
It is a fork ofcrispy-forms-bulmaby Jure Hotujec, with the intention
of adding support for Django 2.0+, as well as for components found in the bulma-extensions library.InstallationYou can installdjango-crispy-bulmafromPyPIby runningpip install django-crispy-bulma. Make sure you also havedjango-crispy-formsinstalled, as it will not work without it. In order to activate it, you'll need to modify your projectssettings.pyfile.First, adddjango-crispy-bulmato yourINSTALLED_APPS:INSTALLED_APPS=['crispy_forms','django_crispy_bulma',# ...]Next, add the following to the bottom of the file in order to configurecrispy_formsto use thebulmatemplate pack:CRISPY_ALLOWED_TEMPLATE_PACKS=("bootstrap","uni_form","bootstrap3","bootstrap4","bulma",)CRISPY_TEMPLATE_PACK="bulma"You may also need to use Layout objects or form objects fromdjango_crispy_bulmain order to build certain objects, like the UploadField. See the documentation below for specifics on objects like these.EmailFieldThe EmailField looks like this:An EmailField can be created simply, like any other field in your form. For example:fromdjango.formsimportFormfromdjango_crispy_bulma.formsimportEmailFieldclassMyForm(Form):my_email=EmailField(label="email",required=True)IconFieldIf you'd like to render a field with an icon in it, you'll need to make use of the Crispy Forms layout object,
and theIconFieldfrom our package. See below for an example:fromcrispy_forms.helperimportFormHelperfromcrispy_forms.layoutimportLayoutfromdjango.formsimportForm,CharFieldfromdjango_crispy_bulma.layoutimportIconFieldclassSetupForm(Form):def__init__(self,*args,**kwargs):super().__init__(*args,**kwargs)self.helper=FormHelper(self)self.helper.layout=Layout(IconField("username",icon_prepend="user"),)username=CharField(label="Username",required=True,)Note thatIconFieldalso supports anicon_appendkeyword argument. This field only supports font-awesome icons.UploadFieldThe 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.fromcrispy_forms.helperimportFormHelperfromcrispy_forms.layoutimportLayoutfromdjangoimportformsfromdjango_crispy_bulma.layoutimportUploadFieldfromdjango_crispy_bulma.formsimportImageField,FileFieldclassMyForm(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 fieldsconstupload_fields=document.querySelectorAll(".file");for(leti=0;i<upload_fields.length;i++){letinput=upload_fields[i].querySelector(".file-input");letfilename=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.