7 |
11 | {% if field.errors and forloop.last and not inline_class %}
12 | {# include 'tailwind/layout/field_errors_block.html' <-- bs4 template adds this here. Currently this pack adds it in field.html #}
13 | {% endif %}
14 |
15 | {% endfor %}
16 |
--------------------------------------------------------------------------------
/crispy_tailwind/templates/tailwind/layout/checkboxselectmultiple_inline.html:
--------------------------------------------------------------------------------
1 | {% if field.is_hidden %}
2 | {{ field }}
3 | {% else %}
4 | <{% if tag %}{{ tag }}{% else %}div{% endif %} id="div_{{ field.auto_id }}" class="{% if wrapper_class %}{{ wrapper_class }} {% endif %}{% if field_class %}{{ field_class }}{% else %}mb-3{% endif %}">
5 |
6 | {% if field.label %}
7 |
10 | {% endif %}
11 |
12 |
13 | {% include 'tailwind/layout/checkboxselectmultiple.html' %}
14 |
8 | {% endfor %}
9 |
--------------------------------------------------------------------------------
/crispy_tailwind/templates/tailwind/whole_uni_form.html:
--------------------------------------------------------------------------------
1 | {% load crispy_forms_utils %}
2 |
3 | {% specialspaceless %}
4 | {% if form_tag %}{% endif %}
14 | {% endspecialspaceless %}
15 |
--------------------------------------------------------------------------------
/crispy_tailwind/templates/tailwind/whole_uni_formset.html:
--------------------------------------------------------------------------------
1 | {% load crispy_forms_tags %}
2 | {% load crispy_forms_utils %}
3 |
4 | {% specialspaceless %}
5 | {% if formset_tag %}
6 | {% endif %}
30 | {% endspecialspaceless %}
31 |
--------------------------------------------------------------------------------
/crispy_tailwind/templatetags/__init__.py:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/django-crispy-forms/crispy-tailwind/47075468f09c30272e5f9d59abd7154e5682c3d1/crispy_tailwind/templatetags/__init__.py
--------------------------------------------------------------------------------
/crispy_tailwind/templatetags/tailwind_field.py:
--------------------------------------------------------------------------------
1 | # This file is currently copied directly from django-crispy-forms
2 | # Changes to core form are highlighted. These are to add additional input classes
3 | # to meet requirements of Tailwind
4 |
5 | import re
6 |
7 | from django import forms, template
8 | from django.conf import settings
9 | from django.template import Context, loader
10 |
11 | from crispy_forms.utils import TEMPLATE_PACK, get_template_pack
12 | from crispy_tailwind.tailwind import CSSContainer
13 |
14 | register = template.Library()
15 |
16 |
17 | @register.filter
18 | def is_checkbox(field):
19 | return isinstance(field.field.widget, forms.CheckboxInput)
20 |
21 |
22 | @register.filter
23 | def is_password(field):
24 | return isinstance(field.field.widget, forms.PasswordInput)
25 |
26 |
27 | @register.filter
28 | def is_radioselect(field):
29 | return isinstance(field.field.widget, forms.RadioSelect)
30 |
31 |
32 | @register.filter
33 | def is_select(field):
34 | return isinstance(field.field.widget, forms.Select)
35 |
36 |
37 | @register.filter
38 | def is_checkboxselectmultiple(field):
39 | return isinstance(field.field.widget, forms.CheckboxSelectMultiple)
40 |
41 |
42 | @register.filter
43 | def is_file(field):
44 | return isinstance(field.field.widget, forms.FileInput)
45 |
46 |
47 | @register.filter
48 | def is_clearable_file(field):
49 | return isinstance(field.field.widget, forms.ClearableFileInput)
50 |
51 |
52 | @register.filter
53 | def is_multivalue(field):
54 | return isinstance(field.field.widget, forms.MultiWidget)
55 |
56 |
57 | @register.filter
58 | def classes(field):
59 | """
60 | Returns CSS classes of a field
61 | """
62 | return field.widget.attrs.get("class", None)
63 |
64 |
65 | @register.filter
66 | def css_class(field):
67 | """
68 | Returns widgets class name in lowercase
69 | """
70 | return field.field.widget.__class__.__name__.lower()
71 |
72 |
73 | def pairwise(iterable):
74 | """s -> (s0,s1), (s2,s3), (s4, s5), ..."""
75 | a = iter(iterable)
76 | return zip(a, a)
77 |
78 |
79 | class CrispyTailwindFieldNode(template.Node):
80 | base_input = (
81 | "bg-white focus:outline-none border border-gray-300 rounded-lg py-2 px-4 block w-full "
82 | "appearance-none leading-normal text-gray-700"
83 | )
84 |
85 | default_styles = {
86 | "text": base_input,
87 | "number": base_input,
88 | "radioselect": "",
89 | "email": base_input,
90 | "url": base_input,
91 | "password": base_input,
92 | "hidden": "",
93 | "multiplehidden": "",
94 | "file": "",
95 | "clearablefile": "",
96 | "textarea": base_input,
97 | "date": base_input,
98 | "datetime": base_input,
99 | "time": base_input,
100 | "checkbox": "",
101 | "select": "",
102 | "nullbooleanselect": "",
103 | "selectmultiple": "",
104 | "checkboxselectmultiple": "",
105 | "multi": "",
106 | "splitdatetime": "text-gray-700 bg-white focus:outline border border-gray-300 leading-normal px-4 "
107 | "appearance-none rounded-lg py-2 focus:outline-none mr-2",
108 | "splithiddendatetime": "",
109 | "selectdate": "",
110 | "error_border": "border-red-500",
111 | }
112 |
113 | default_container = CSSContainer(default_styles)
114 |
115 | def __init__(self, field, attrs):
116 | self.field = field
117 | self.attrs = attrs
118 | self.html5_required = "html5_required"
119 |
120 | def render(self, context): # noqa: C901
121 | # Nodes are not threadsafe so we must store and look up our instance
122 | # variables in the current rendering context first
123 | if self not in context.render_context:
124 | context.render_context[self] = (
125 | template.Variable(self.field),
126 | self.attrs,
127 | template.Variable(self.html5_required),
128 | )
129 |
130 | field, attrs, html5_required = context.render_context[self]
131 | field = field.resolve(context)
132 | try:
133 | html5_required = html5_required.resolve(context)
134 | except template.VariableDoesNotExist:
135 | html5_required = False
136 |
137 | # If template pack has been overridden in FormHelper we can pick it from context
138 | template_pack = context.get("template_pack", TEMPLATE_PACK)
139 |
140 | # There are special django widgets that wrap actual widgets,
141 | # such as forms.widgets.MultiWidget, admin.widgets.RelatedFieldWidgetWrapper
142 | widgets = getattr(field.field.widget, "widgets", [getattr(field.field.widget, "widget", field.field.widget)])
143 |
144 | if isinstance(attrs, dict):
145 | attrs = [attrs] * len(widgets)
146 |
147 | converters = {}
148 | converters.update(getattr(settings, "CRISPY_CLASS_CONVERTERS", {}))
149 |
150 | for widget, attr in zip(widgets, attrs):
151 | class_name = widget.__class__.__name__.lower()
152 | class_name = converters.get(class_name, class_name)
153 | css_class = widget.attrs.get("class", "")
154 | if css_class:
155 | if css_class.find(class_name) == -1:
156 | css_class += " %s" % class_name
157 | else:
158 | css_class = class_name
159 |
160 | # Added additional code for Tailwind if class has not been passed in via the tag in the template
161 | if template_pack == "tailwind" and '"class"' not in attr.keys():
162 | css_container = context.get("css_container", self.default_container)
163 | if css_container:
164 | css = " " + css_container.get_input_class(field)
165 | css_class += css
166 | if field.errors:
167 | error_border_class = css_container.error_border
168 | css_class = re.sub(r"border-\S+", error_border_class, css_class)
169 |
170 | widget.attrs["class"] = css_class
171 |
172 | # HTML5 required attribute
173 | if html5_required and field.field.required and "required" not in widget.attrs:
174 | if field.field.widget.__class__.__name__ != "RadioSelect":
175 | widget.attrs["required"] = "required"
176 |
177 | # classes passed in via the template are added here
178 | for attribute_name, attribute in attr.items():
179 | attribute_name = template.Variable(attribute_name).resolve(context)
180 |
181 | if attribute_name in widget.attrs:
182 | widget.attrs[attribute_name] += " " + template.Variable(attribute).resolve(context)
183 | else:
184 | widget.attrs[attribute_name] = template.Variable(attribute).resolve(context)
185 |
186 | return str(field)
187 |
188 |
189 | @register.tag(name="tailwind_field")
190 | def tailwind_field(parser, token):
191 | """
192 | {% tailwind_field field attrs %}
193 | """
194 | token = token.split_contents()
195 | field = token.pop(1)
196 | attrs = {}
197 |
198 | # We need to pop tag name, or pairwise would fail
199 | token.pop(0)
200 | for attribute_name, value in pairwise(token):
201 | attrs[attribute_name] = value
202 |
203 | return CrispyTailwindFieldNode(field, attrs)
204 |
205 |
206 | @register.simple_tag()
207 | def crispy_addon(field, append="", prepend="", form_show_labels=True):
208 | """
209 | Renders a form field using bootstrap's prepended or appended text::
210 |
211 | {% crispy_addon form.my_field prepend="$" append=".00" %}
212 |
213 | You can also just prepend or append like so
214 |
215 | {% crispy_addon form.my_field prepend="$" %}
216 | {% crispy_addon form.my_field append=".00" %}
217 | """
218 | if field:
219 | context = Context({"field": field, "form_show_errors": True, "form_show_labels": form_show_labels})
220 | template = loader.get_template("%s/layout/prepended_appended_text.html" % get_template_pack())
221 | context["crispy_prepended_text"] = prepend
222 | context["crispy_appended_text"] = append
223 |
224 | if not prepend and not append:
225 | raise TypeError("Expected a prepend and/or append argument")
226 |
227 | context = context.flatten()
228 |
229 | return template.render(context)
230 |
--------------------------------------------------------------------------------
/crispy_tailwind/templatetags/tailwind_filters.py:
--------------------------------------------------------------------------------
1 | from functools import lru_cache
2 |
3 | from django import template
4 | from django.conf import settings
5 | from django.forms import boundfield
6 | from django.forms.formsets import BaseFormSet
7 | from django.template import Context
8 | from django.template.loader import get_template
9 | from django.utils.safestring import mark_safe
10 |
11 | from crispy_forms.exceptions import CrispyError
12 | from crispy_forms.utils import TEMPLATE_PACK, flatatt
13 |
14 |
15 | @lru_cache()
16 | def uni_formset_template(template_pack=TEMPLATE_PACK):
17 | return get_template("%s/uni_formset.html" % template_pack)
18 |
19 |
20 | @lru_cache()
21 | def uni_form_template(template_pack=TEMPLATE_PACK):
22 | return get_template("%s/uni_form.html" % template_pack)
23 |
24 |
25 | register = template.Library()
26 |
27 |
28 | @register.filter(name="crispy")
29 | def as_crispy_form(
30 | form, template_pack=TEMPLATE_PACK, label_class="block text-gray-700 text-sm font-bold mb-2", field_class="mb-3"
31 | ):
32 | """
33 | The original and still very useful way to generate a div elegant form/formset::
34 |
35 | {% load tailwind_filters %}
36 |
37 |
41 |
42 | or, if you want to explicitly set the template pack::
43 |
44 | {{ myform|crispy:"bootstrap" }}
45 |
46 | In ``bootstrap3`` or ``bootstrap4`` for horizontal forms you can do::
47 |
48 | {{ myform|label_class:"col-lg-2",field_class:"col-lg-8" }}
49 | """
50 | c = Context(
51 | {
52 | "field_class": field_class,
53 | "field_template": "%s/field.html" % template_pack,
54 | "form_show_errors": True,
55 | "form_show_labels": True,
56 | "label_class": label_class,
57 | }
58 | ).flatten()
59 | if isinstance(form, BaseFormSet):
60 | template = uni_formset_template(template_pack)
61 | c["formset"] = form
62 | else:
63 | template = uni_form_template(template_pack)
64 | c["form"] = form
65 |
66 | return template.render(c)
67 |
68 |
69 | @register.filter(name="as_crispy_errors")
70 | def as_crispy_errors(form, template_pack=TEMPLATE_PACK):
71 | """
72 | Renders only form errors the same way as django-crispy-forms::
73 |
74 | {% load crispy_forms_tags %}
75 | {{ form|as_crispy_errors }}
76 |
77 | or::
78 |
79 | {{ form|as_crispy_errors:"bootstrap" }}
80 | """
81 | if isinstance(form, BaseFormSet):
82 | template = get_template("%s/errors_formset.html" % template_pack)
83 | c = Context({"formset": form}).flatten()
84 | else:
85 | template = get_template("%s/errors.html" % template_pack)
86 | c = Context({"form": form}).flatten()
87 |
88 | return template.render(c)
89 |
90 |
91 | @register.filter(name="as_crispy_field")
92 | def as_crispy_field(field, template_pack=TEMPLATE_PACK, label_class="", field_class=""):
93 | """
94 | Renders a form field like a django-crispy-forms field::
95 |
96 | {% load crispy_forms_tags %}
97 | {{ form.field|as_crispy_field }}
98 |
99 | or::
100 |
101 | {{ form.field|as_crispy_field:"tailwind" }}
102 | """
103 | if not isinstance(field, boundfield.BoundField) and settings.DEBUG:
104 | raise CrispyError("|as_crispy_field got passed an invalid or inexistent field")
105 |
106 | attributes = {
107 | "field": field,
108 | "form_show_errors": True,
109 | "form_show_labels": True,
110 | "label_class": label_class,
111 | "field_class": field_class,
112 | }
113 | helper = getattr(field.form, "helper", None)
114 |
115 | template_path = None
116 | if helper is not None:
117 | attributes.update(helper.get_attributes(template_pack))
118 | template_path = helper.field_template
119 | if not template_path:
120 | template_path = "%s/field.html" % template_pack
121 | template = get_template(template_path)
122 |
123 | c = Context(attributes).flatten()
124 | return template.render(c)
125 |
126 |
127 | @register.filter(name="flatatt")
128 | def flatatt_filter(attrs):
129 | return mark_safe(flatatt(attrs))
130 |
131 |
132 | @register.filter
133 | def build_attrs(field):
134 | """
135 | Build HTML attributes for a form field, also checking for a
136 | ``widget.allow_multiple_selected`` attribute and adding ``multiple`` to the
137 | attributes if it is set to ``True``.
138 | """
139 | attrs = field.field.widget.attrs
140 | attrs.setdefault("id", field.auto_id)
141 |
142 | field_built_widget_attrs = field.build_widget_attrs(attrs)
143 | attrs.update(field_built_widget_attrs)
144 |
145 | # Some custom widgets (e.g. Select2) may add additional attributes to the
146 | # widget attrs dict. We need to add those to the attrs dict as well calling
147 | # the widget's build_attrs method.
148 |
149 | built_widget_attrs = field.field.widget.build_attrs(attrs)
150 | attrs.update(built_widget_attrs)
151 |
152 | if hasattr(field.field.widget, "allow_multiple_selected"):
153 | attrs["multiple"] = attrs.get("multiple", field.field.widget.allow_multiple_selected)
154 | return mark_safe(flatatt(attrs))
155 |
--------------------------------------------------------------------------------
/docs/Makefile:
--------------------------------------------------------------------------------
1 | # Minimal makefile for Sphinx documentation
2 | #
3 |
4 | # You can set these variables from the command line, and also
5 | # from the environment for the first two.
6 | SPHINXOPTS ?=
7 | SPHINXBUILD ?= sphinx-build
8 | SOURCEDIR = .
9 | BUILDDIR = _build
10 |
11 | # Put it first so that "make" without argument is like "make help".
12 | help:
13 | @$(SPHINXBUILD) -M help "$(SOURCEDIR)" "$(BUILDDIR)" $(SPHINXOPTS) $(O)
14 |
15 | .PHONY: help Makefile
16 |
17 | # Catch-all target: route all unknown targets to Sphinx using the new
18 | # "make mode" option. $(O) is meant as a shortcut for $(SPHINXOPTS).
19 | %: Makefile
20 | @$(SPHINXBUILD) -M $@ "$(SOURCEDIR)" "$(BUILDDIR)" $(SPHINXOPTS) $(O)
21 |
--------------------------------------------------------------------------------
/docs/conf.py:
--------------------------------------------------------------------------------
1 | # Configuration file for the Sphinx documentation builder.
2 | #
3 | # This file only contains a selection of the most common options. For a full
4 | # list see the documentation:
5 | # https://www.sphinx-doc.org/en/master/usage/configuration.html
6 |
7 | # -- Path setup --------------------------------------------------------------
8 |
9 | # If extensions (or modules to document with autodoc) are in another directory,
10 | # add these directories to sys.path here. If the directory is relative to the
11 | # documentation root, use os.path.abspath to make it absolute, like shown here.
12 | #
13 | # import os
14 | # import sys
15 | # sys.path.insert(0, os.path.abspath('.'))
16 |
17 |
18 | # -- Project information -----------------------------------------------------
19 |
20 | project = "crispy-tailwind"
21 | copyright = "2020, David Smith"
22 | author = "David Smith"
23 |
24 | # The full version, including alpha/beta/rc tags
25 | release = "0.5"
26 |
27 |
28 | # -- General configuration ---------------------------------------------------
29 |
30 | # Add any Sphinx extension module names here, as strings. They can be
31 | # extensions coming with Sphinx (named 'sphinx.ext.*') or your custom
32 | # ones.
33 | extensions = []
34 |
35 | # Add any paths that contain templates here, relative to this directory.
36 | templates_path = ["_templates"]
37 |
38 | # List of patterns, relative to source directory, that match files and
39 | # directories to ignore when looking for source files.
40 | # This pattern also affects html_static_path and html_extra_path.
41 | exclude_patterns = ["_build", "Thumbs.db", ".DS_Store", "requirements.txt"]
42 |
43 |
44 | # -- Options for HTML output -------------------------------------------------
45 |
46 | # The theme to use for HTML and HTML Help pages. See the documentation for
47 | # a list of builtin themes.
48 | #
49 | html_theme = "sphinx_rtd_theme"
50 |
51 | # Add any paths that contain custom static files (such as style sheets) here,
52 | # relative to this directory. They are copied after the builtin static files,
53 | # so a file named "default.css" will overwrite the builtin "default.css".
54 | # html_static_path = ["_static"]
55 |
56 | # The suffix of source filenames.
57 | source_suffix = ".txt"
58 |
--------------------------------------------------------------------------------
/docs/contributing.txt:
--------------------------------------------------------------------------------
1 | ============
2 | Contributing
3 | ============
4 |
5 | Contributions to ``crispy-tailwind`` are very welcome!
6 |
7 | Here are some notes on how to get setup with a development environment.
8 |
9 | 1. Clone the ``crispy-tailwind`` repo from GitHub.
10 | 2. Create a new virtual environment and install the development requirements
11 | from ``requirements.txt``.
12 | 3. Install ``crispy-tailwind`` as well. ::
13 |
14 | pip install -e .
15 |
16 |
17 | 4. Make sure you can run the test suite locally. ::
18 |
19 | pytest --ds=tests.test_settings
20 |
21 | 5. After making documentation changes, build the HTML and review the rendered
22 | output via http://localhost:8000 in your browser. ::
23 |
24 | cd docs && make html
25 | cd _build/html && python -m http.server
26 |
27 | 6. You may find the ``crispy-test-project`` helpful to see the rendered output
28 | of the package.
29 |
30 | - Clone the ``tailwind`` branch of that project.
31 | - Install the dependencies.
32 | - Install ``crispy-tailwind``. ::
33 |
34 | pip install -e path/to/crispy-tailwind
35 |
--------------------------------------------------------------------------------
/docs/custom.txt:
--------------------------------------------------------------------------------
1 | =============
2 | Custom Styles
3 | =============
4 |
5 | With Tailwind being a utility framework there is much more ability to customise
6 | your site than with many of the other CSS frameworks such as Bootstrap.
7 |
8 | While our opinionated Tailwind styles may get you so far you may wish to change these.
9 |
10 | The Tailwind template pack aims to help you customise your form in a DRY way. This
11 | template pack comes with a utility class called `CSSContainer` which can be attached to your
12 | form helper.
13 |
14 | ------------
15 | CSSContainer
16 | ------------
17 |
18 | `CSSContainer` is imported from `crispy_tailwind.tailwind`. This is a class which holds the
19 | CSS style for your form. Currently it holds the classes for the `` tags within your form.
20 | The class expects a dict of Django widgets and class styles::
21 |
22 | >>> from crispy_tailwind.tailwind import CSSContainer
23 |
24 | >>> css = CSSContainer({
25 | "text": "border border-gray-300",
26 | "number": "border border-gray-300",
27 | ...
28 | })
29 |
30 | As there are many Django widgets, there is the option to pass in classes to a "base" key
31 | which will then be applied to all of the widgets::
32 |
33 | >>> css = CSSContainer({
34 | "base": "bg-white"
35 | })
36 | >>> css
37 | {
38 | 'text': 'bg-white',
39 | 'number': 'bg-white',
40 | 'email': 'bg-white',
41 | ...
42 | }
43 |
44 | You can also update add and remove styles::
45 |
46 | >>> css += {
47 | "text": "text more styles",
48 | "number": "number style"
49 | }
50 | >>> css
51 | {
52 | 'text': 'bg-white text more styles',
53 | 'number': 'bg-white number style',
54 | 'email': 'bg-white',
55 | ...
56 | }
57 | >>> css -= {
58 | "text": "bg-white",
59 | "number": "bg-white"
60 | }
61 | >>> css
62 | {
63 | 'text': 'text more styles',
64 | 'number': 'number style',
65 | 'email': 'bg-white',
66 | ...
67 | }
68 |
--------------------------------------------------------------------------------
/docs/examples.txt:
--------------------------------------------------------------------------------
1 | ==============
2 | Example Images
3 | ==============
4 |
5 | Here are some example images of how forms are rendered using the Tailwind
6 | template Pack
7 |
8 | Formsets
9 | ========
10 |
11 | A formset with ``non_form_errors`` and a field error. See the
12 | "test_formset_with_errors" test for configuration of the ``FormHelper`` and
13 | ``Layout`` the rendered this form.
14 |
15 | .. image:: img/formset_failing.png
16 | :width: 50%
17 |
--------------------------------------------------------------------------------
/docs/getting_started.txt:
--------------------------------------------------------------------------------
1 | ===============
2 | Getting Started
3 | ===============
4 |
5 | Installation
6 | ============
7 |
8 | Install via pip. ::
9 |
10 | pip install crispy-tailwind
11 |
12 | You will need to update your project's settings file to add ``crispy_forms``
13 | and ``crispy_tailwind`` to your project's ``INSTALLED_APPS`` setting. Also set
14 | ``tailwind`` as an allowed template pack and as the default template pack for
15 | your project::
16 |
17 | INSTALLED_APPS = (
18 | ...
19 | "crispy_forms",
20 | "crispy_tailwind",
21 | ...
22 | )
23 |
24 | CRISPY_ALLOWED_TEMPLATE_PACKS = "tailwind"
25 |
26 | CRISPY_TEMPLATE_PACK = "tailwind"
27 |
28 | If you use `Tailwind CLI `_, you have to provide the path to your
29 | templates. Since this package contains templates which are within your Pythons `site-packages`, it's hard to tell
30 | Tailwind where these templates live.
31 |
32 | Thanks to Carlton Gibson's blog, you can implement (aka copy & paste) a Django management command and the corresponding
33 | Tailwind configuration:
34 |
35 | https://noumenal.es/notes/tailwind/django-integration/
36 |
37 | Usage
38 | =====
39 |
40 | There are a number of ways you can use ``crispy-tailwind``. The method
41 | requiring the least amount of effort involves using the ``|crispy`` filter.
42 | This will add an opinionated `Tailwind` style to your form. If you require more
43 | control, you can use the ``crispy`` tags and utilise the full power of the
44 | ``crispy-forms`` through its ``FormHelper`` and ``Layout`` capabilities.
45 |
46 | ``|crispy`` filter
47 | ------------------
48 |
49 | The ``|crispy`` filter is the method requiring the least amount of effort to
50 | add `Tailwind` style to your form. It avoids the complexity of ``FormHelper``,
51 | and it comes with an opinionated form style.
52 |
53 | 1. Load the ``tailwind_filters`` in your template::
54 |
55 | {% load tailwind_filters %}
56 |
57 | 2. Apply the ``|crispy`` filter to your form::
58 |
59 | {{ form|crispy }}
60 |
61 | Here are two examples. The first shows the default rendering. The second shows
62 | rendering of server-side errors:
63 |
64 | .. image:: img/crispy_form.png
65 | :width: 49%
66 | .. image:: img/crispy_failing.png
67 | :width: 49%
68 |
69 | ``{% crispy %}`` tags
70 | ---------------------
71 |
72 | Using the ``{% crispy %}`` tag allows you to use the core crispy-form_
73 | functionality.
74 |
75 | 1. Load the crispy tag: ``{% load crispy_forms_tags %}``
76 | 2. Add ``FormHelper`` to your form and use crispy-forms to configure your form.
77 | 3. Use the crispy tag ``{% crispy form %}`` in your template.
78 |
79 | This will render a form with the same opinionated style as the ``|crispy``
80 | filter.
81 |
82 | The classes are largely held in a ``CSSContainer`` class. This can be changed
83 | to meet your needs. Docs and functionality for this area continue to be
84 | developed.
85 |
86 | .. _crispy-form: https://django-crispy-forms.readthedocs.io/en/latest/index.html
87 |
88 | Crispy-addon
89 | ============
90 |
91 | There is a template tag called ``crispy-addon``. It can be used to render a
92 | single field (including label) with prepended and appended text::
93 |
94 | {% load tailwind_field %}
95 | {% crispy_addon form.my_field prepend="$" append=".00" %}
96 |
97 | You can also prepend or append like so::
98 |
99 | {% crispy_addon form.my_field prepend="$" %}
100 | {% crispy_addon form.my_field append=".00" %}
101 |
--------------------------------------------------------------------------------
/docs/img/Buttons.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/django-crispy-forms/crispy-tailwind/47075468f09c30272e5f9d59abd7154e5682c3d1/docs/img/Buttons.png
--------------------------------------------------------------------------------
/docs/img/alert.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/django-crispy-forms/crispy-tailwind/47075468f09c30272e5f9d59abd7154e5682c3d1/docs/img/alert.png
--------------------------------------------------------------------------------
/docs/img/crispy_failing.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/django-crispy-forms/crispy-tailwind/47075468f09c30272e5f9d59abd7154e5682c3d1/docs/img/crispy_failing.png
--------------------------------------------------------------------------------
/docs/img/crispy_form.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/django-crispy-forms/crispy-tailwind/47075468f09c30272e5f9d59abd7154e5682c3d1/docs/img/crispy_form.png
--------------------------------------------------------------------------------
/docs/img/custom_button.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/django-crispy-forms/crispy-tailwind/47075468f09c30272e5f9d59abd7154e5682c3d1/docs/img/custom_button.png
--------------------------------------------------------------------------------
/docs/img/field_with_buttons.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/django-crispy-forms/crispy-tailwind/47075468f09c30272e5f9d59abd7154e5682c3d1/docs/img/field_with_buttons.png
--------------------------------------------------------------------------------
/docs/img/fieldset.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/django-crispy-forms/crispy-tailwind/47075468f09c30272e5f9d59abd7154e5682c3d1/docs/img/fieldset.png
--------------------------------------------------------------------------------
/docs/img/formset_failing.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/django-crispy-forms/crispy-tailwind/47075468f09c30272e5f9d59abd7154e5682c3d1/docs/img/formset_failing.png
--------------------------------------------------------------------------------
/docs/img/inline_field.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/django-crispy-forms/crispy-tailwind/47075468f09c30272e5f9d59abd7154e5682c3d1/docs/img/inline_field.png
--------------------------------------------------------------------------------
/docs/img/prepended.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/django-crispy-forms/crispy-tailwind/47075468f09c30272e5f9d59abd7154e5682c3d1/docs/img/prepended.png
--------------------------------------------------------------------------------
/docs/img/row_col.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/django-crispy-forms/crispy-tailwind/47075468f09c30272e5f9d59abd7154e5682c3d1/docs/img/row_col.png
--------------------------------------------------------------------------------
/docs/index.txt:
--------------------------------------------------------------------------------
1 | .. crispy-tailwind documentation master file, created by
2 | sphinx-quickstart on Sat May 2 20:32:30 2020.
3 | You can adapt this file completely to your liking, but it should at least
4 | contain the root `toctree` directive.
5 |
6 | Welcome to crispy-tailwind's documentation!
7 | ===========================================
8 |
9 | This is a Tailwind template pack for django-crispy-forms_.
10 |
11 | .. _django-crispy-forms: https://django-crispy-forms.readthedocs.io/en/latest/index.html
12 |
13 |
14 | .. toctree::
15 | :maxdepth: 2
16 | :caption: Contents:
17 |
18 | getting_started
19 | layout_objects
20 | custom
21 | examples
22 | contributing
23 |
24 |
25 | Indices and tables
26 | ==================
27 |
28 | * :ref:`genindex`
29 | * :ref:`modindex`
30 | * :ref:`search`
31 |
--------------------------------------------------------------------------------
/docs/layout_objects.txt:
--------------------------------------------------------------------------------
1 | ==============
2 | Layout Objects
3 | ==============
4 |
5 | This template pack renders Django widgets with the Tailwind CSS framework. This
6 | page shows examples of how these widgets look when rendered with the default
7 | styling. For these objects we have given an opinion on how they should look.
8 |
9 | If you are using the ``|crispy`` filter the form will be styled using the
10 | default layout. If you wish to customise the form you can use ``{% crispy %}``
11 | tags and ``FormHelper`` to control the layout of your form.
12 |
13 | Wherever possible layout objects are used from ``crispy-forms`` itself (either
14 | core or bootstrap). Where these can not be used Tailwind versions are included
15 | within this template pack. This means that the layout objects may be found
16 | within one of three files.
17 |
18 | - ``crispy_forms.layout`` (``Layout`` and other standard objects)
19 | - ``crispy_forms.bootstrap`` (Some bootstrap objects work out of the box, so we
20 | will use these)
21 | - ``crispy_tailwind.layout`` (Customised versions for Tailwind are found here)
22 |
23 | Knowledge for crispy-forms ``Layout`` class is assumed. Please see
24 | https://django-crispy-forms.readthedocs.io/en/latest/layouts.html for further
25 | information.
26 |
27 | crispy_forms.layout
28 | ===================
29 |
30 | Layout
31 | ------
32 |
33 | The core Layout_ class which provides the ability to control the rendering of your form. This is the parent which will
34 | wrap individual layout objects.
35 |
36 | .. _Layout: https://django-crispy-forms.readthedocs.io/en/latest/layouts.html?#fundamentals
37 |
38 | Column
39 | ------
40 |
41 | The Column_ layout object wraps fields in a ``div`` so it can be used as a
42 | column. The Tailwind template adds no css class to this wrapper by default. If
43 | required classes can be added::
44 |
45 | Column('form_field_1', 'form_field_2', css_class='additional classes',)
46 |
47 | .. _column: https://django-crispy-forms.readthedocs.io/en/latest/api_layout.html?#layout.Column
48 |
49 | Row
50 | ---
51 |
52 | The Row_ layout object wraps fields in a ``div`` so it can be used as a
53 | row. The Tailwind template adds ``flex flex-row`` to this wrapper by default.
54 | If required this default can be replaced by custom css classes::
55 |
56 | Row('form_field_1', 'form_field_2', css_class='additional classes',)
57 |
58 | Row and Column layouts are typically used together. Here is an example layout
59 | with an image showing how the form is rendered::
60 |
61 | Row(
62 | Column(Field("first_name"), Field("last_name"), css_class="px-2"),
63 | Column("email", css_class="px-2"),
64 | )
65 |
66 | .. image:: img/row_col.png
67 | :width: 50%
68 |
69 | .. _Row : https://django-crispy-forms.readthedocs.io/en/latest/api_layout.html?#layout.Row
70 |
71 | Field
72 | -----
73 |
74 | The Field_ layout object allows attributes to be easily added to a single
75 | field.
76 |
77 | .. _Field: https://django-crispy-forms.readthedocs.io/en/latest/api_layout.html?#layout.Field
78 |
79 | Div
80 | ---
81 |
82 | The Div_ layout object wraps fields in a `Div`. No classes are added by default.
83 |
84 | .. _Div: https://django-crispy-forms.readthedocs.io/en/latest/api_layout.html?#layout.Div
85 |
86 | HTML
87 | ----
88 |
89 | Used to render pure HTML code and behaves like a Django template. See the django-crispy-forms HTML_ docs for more
90 | information.
91 |
92 | The HTML_: https://django-crispy-forms.readthedocs.io/en/latest/layouts.html?#universal-layout-objects
93 |
94 | .. _HTML:
95 |
96 | Hidden
97 | ------
98 |
99 | Used to create a hidden_ input.
100 |
101 | .. _Hidden: https://django-crispy-forms.readthedocs.io/en/latest/api_layout.html?#layout.Hidden
102 |
103 | Fieldset
104 | --------
105 |
106 | Wraps fields in a ``