Template tags and filters¶
Note
All the following examples it is understood that you have already loaded the propeller
template tag library, placing the code below in the beginning that each template that propeller
template tag library will be used. Read the Installation and Quickstart sections on how
to accomplish this.
propeller_form¶
Render a form
Tag name:
propeller_form
Parameters:
- form
- The form that is to be rendered
- exclude
- A list of field names (comma separated) that should not be rendered E.g. exclude=subject,bcc
See propeller_field for other arguments
Usage:
{% propeller_form form %}
Example:
{% propeller_form form layout='inline' %}
propeller_form_errors¶
Render form errors
Tag name:
propeller_form_errors
Parameters:
- form
- The form that is to be rendered
- type
Control which type of errors should be rendered.
One of the following values:
'all'
'fields'
'non_fields'
default: 'all'
- layout
- Context value that is available in the template
propeller/form_errors.html
aslayout
.
Usage:
{% propeller_form_errors form %}
Example:
{% propeller_form_errors form layout='inline' %}
propeller_formset¶
Render a formset
Tag name:
propeller_formset
Parameters:
- formset
- The formset that is being rendered
See propeller_field for other arguments
Usage:
{% propeller_formset formset %}
Example:
{% propeller_formset formset layout='horizontal' %}
propeller_formset_errors¶
Render formset errors
Tag name:
propeller_formset_errors
Parameters:
- formset
- The formset that is being rendered
- layout
- Context value that is available in the template
propeller/form_errors.html
aslayout
.
Usage:
{% propeller_formset_errors formset %}
Example:
{% propeller_formset_errors formset layout='inline' %}
propeller_field¶
Render a field
Tag name:
propeller_field
Parameters:
- field
- The form field to be rendered
- layout
- If set to
'horizontal'
then the field and label will be rendered side-by-side, as long as there is nofield_class
set as well. - form_group_class
CSS class of the
div
that wraps the field and label.default: 'form-group'
- field_class
- CSS class of the
div
that wraps the field. - label_class
- CSS class of the
label
element. Will always havecontrol-label
as the last CSS class. - show_help
Show the field’s help text, if the field has help text.
default: True
- show_label
Whether the show the label of the field.
default: True
- exclude
- A list of field names that should not be rendered
- set_required
When set to
True
and the field is required then therequired
attribute is set on the rendered field. This only works up to Django 1.8. Higher Django versions handlerequired
natively.default: True
- set_disabled
When set to
True
then thedisabled
attribute is set on the rendered field. This only works up to Django 1.8. Higher Django versions handledisabled
natively.default: False
- size
Controls the size of the rendered
div.form-group
through the use of CSS classes.One of the following values:
'small'
'medium'
'large'
- placeholder
- Sets the placeholder text of a textbox
- horizontal_label_class
Class used on the label when the
layout
is set tohorizontal
.default: 'col-md-3'
. Can be changed in Settings- horizontal_field_class
Class used on the field when the
layout
is set tohorizontal
.default: 'col-md-9'
. Can be changed in Settings- addon_before
- Text that should be prepended to the form field. See the propeller docs <http://getpropeller.com/components/#input-groups-basic> for an example.
- addon_after
- Text that should be appended to the form field. See the propeller docs <http://getpropeller.com/components/#input-groups-basic> for an example.
- addon_before_class
Class used on the span when
addon_before
is used.One of the following values:
'input-group-addon'
'input-group-btn'
default: input-group-addon
- addon_after_class
Class used on the span when
addon_after
is used.One of the following values:
'input-group-addon'
'input-group-btn'
default: input-group-addon
- error_css_class
CSS class used when the field has an error
default: 'has-error'
. Can be changed Settings- required_css_class
CSS class used on the
div.form-group
to indicate a field is requireddefault: ''
. Can be changed Settings- bound_css_class
CSS class used when the field is bound
default: 'has-success'
. Can be changed Settings
Usage:
{% propeller_field field %}
Example:
{% propeller_field field show_label=False %}
propeller_label¶
Render a label
Tag name:
propeller_label
Parameters:
- content
- The label’s text
- label_for
- The value that will be in the
for
attribute of the rendered<label>
- label_class
- The CSS class for the rendered
<label>
- label_title
- The value that will be in the
title
attribute of the rendered<label>
Usage:
{% propeller_label content %}
Example:
{% propeller_label "Email address" label_for="exampleInputEmail1" %}
propeller_button¶
Render a button
Tag name:
propeller_button
Parameters:
- content
- The text to be displayed in the button
- button_type
Optional field defining what type of button this is.
Accepts one of the following values:
'submit'
'reset'
'button'
'link'
- style
Optional field defining which style button should have.
Accepts one of the following values:
'default'
'raised'
'flat'
'outline'
- icon
- Name of an icon to render in the button’s visible content. See propeller_icon for acceptable values.
- button_class
- The class of button to use. If none is given, btn-default will be used.
- extra_classes
- Any extra CSS classes that should be added to the button.
- size
Optional field to control the size of the button.
Accepts one of the following values:
'xs'
'sm'
'small'
'md'
'medium'
'lg'
'large'
- href
- Render the button as an
<a>
element. Thehref
attribute is set with this value. - name
- Value of the
name
attribute of the rendered element. - value
- Value of the
value
attribute of the rendered element.
Usage:
{% propeller_button content %}
Example:
{% propeller_button "Save" button_type="submit" button_class="btn-primary" %}
propeller_icon¶
Render an icon
Tag name:
propeller_iconParameters:
- icon
- Icon name. See the Propeller docs for all icons.
- size
- Size of the icon. Must be one of ‘xs’, ‘sm’, ‘md’, or ‘lg’. Default: ‘sm’
- extra_classes
- Extra CSS classes to add to the icon HTML. Optional
- title
- A title for the icon (HTML title attrivute). Optional
Usage:
{% propeller_icon icon %}
Example:
{% propeller_icon "star" %}
propeller_bootstrap_icon¶
Render an icon
Tag name:
propeller_bootstrap_iconParameters:
- icon
- Icon name. See the Bootstrap docs for all icons.
- extra_classes
- Extra CSS classes to add to the icon HTML. Optional
- title
- A title for the icon (HTML title attrivute). Optional
Usage:
{% propeller_bootstrap_icon icon %}
Example:
{% propeller_bootstrap_icon "star" %}
propeller_alert¶
Render an alert
Tag name:
propeller_alert
Parameters:
- content
- HTML content of alert
- alert_type
'info'
'warning'
'danger'
'success'
default: 'info'
- dismissable
boolean, is alert dismissable
default: True
Usage:
{% propeller_alert content %}
Example:
{% propeller_alert "Something went wrong" alert_type='error' %}
buttons¶
-
django2_propeller.templatetags.propeller.
propeller_button
(*args, **kwargs) Render a button
Tag name:
propeller_button
Parameters:
- content
- The text to be displayed in the button
- button_type
Optional field defining what type of button this is.
Accepts one of the following values:
'submit'
'reset'
'button'
'link'
- style
Optional field defining which style button should have.
Accepts one of the following values:
'default'
'raised'
'flat'
'outline'
- icon
- Name of an icon to render in the button’s visible content. See propeller_icon for acceptable values.
- button_class
- The class of button to use. If none is given, btn-default will be used.
- extra_classes
- Any extra CSS classes that should be added to the button.
- size
Optional field to control the size of the button.
Accepts one of the following values:
'xs'
'sm'
'small'
'md'
'medium'
'lg'
'large'
- href
- Render the button as an
<a>
element. Thehref
attribute is set with this value. - name
- Value of the
name
attribute of the rendered element. - value
- Value of the
value
attribute of the rendered element.
Usage:
{% propeller_button content %}
Example:
{% propeller_button "Save" button_type="submit" button_class="btn-primary" %}
Render a floating action button
Tag name:
propeller_fab
Parameters:
- content
- The text to be displayed in the button
- button_type
Optional field defining what type of button this is.
Accepts one of the following values:
'submit'
'reset'
'button'
'link'
- style
Optional field defining which style button should have.
Accepts one of the following values:
'default'
'raised'
'flat'
'outline'
- icon
- Name of an icon to render in the button’s visible content. See propeller_icon for acceptable values.
- button_class
- The class of button to use. If none is given, btn-default will be used.
- extra_classes
- Any extra CSS classes that should be added to the button.
- size
Optional field to control the size of the button.
Accepts one of the following values:
'xs'
'sm'
'small'
'md'
'medium'
'lg'
'large'
- href
- Render the button as an
<a>
element. Thehref
attribute is set with this value. - name
- Value of the
name
attribute of the rendered element. - value
- Value of the
value
attribute of the rendered element.
Usage:
{% propeller_fab content %}
Example:
{% propeller_fab "Save" button_type="submit" button_class="btn-primary" %}
propeller_messages¶
Show django.contrib.messages Messages in propeller alert containers.
In order to make the alerts dismissable (with the close button), we have to set the jquery parameter too when using the propeller_javascript tag.
Uses the template
propeller/messages.html
.Tag name:
propeller_messages
Parameters:
None.Usage:
{% propeller_messages %}
Example:
{% propeller_javascript jquery=1 %} {% propeller_messages %}
propeller_pagination¶
Render pagination for a page
Tag name:
propeller_pagination
Parameters:
- page
- The page of results to show.
- pages_to_show
Number of pages in total
default: 11
- url
URL to navigate to for pagination forward and pagination back.
default: None
- size
Controls the size of the pagination through CSS. Defaults to being normal sized.
One of the following:
'small'
'large'
default: None
- extra
Any extra page parameters.
default: None
- parameter_name
Name of the paging URL parameter.
default: 'page'
Usage:
{% propeller_pagination page %}
Example:
{% propeller_pagination lines url="/pagination?page=1" size="large" %}
propeller_card¶
Hint
See also Card for how to create card instances
Render a propeller card.
Tag name:
propeller_card
Parameters:
- card
- The previously defined card instance
Usage:
{% propeller_card card_instance %}
propeller_textfilters¶
Render text as a Propeller display text (heading).
Tag name:
pmd_display_text
Parameters:
size Controls the size of the heading. An integer from 1 (normal) to 4 (very large) :default: ``1``
Usage:
{{ text_variable|pmd_display_text:size }}
Example:
{{ my_text|pmd_display_text:3 }}
Render a muted text (secondary heading).
Tag name:
pmd_muted_text
Usage:
{{ text_variable|pmd_muted_text }}
Render text as a Propeller lead text (intro).
Tag name:
pmd_lead_text
Usage:
{{ text_variable|pmd_lead_text }}
Render highligthed text.
Tag name:
pmd_mark_text
Usage:
{{ text_variable|pmd_mark_text }}
Render striked text.
Tag name:
pmd_strike_text
Usage:
{{ text_variable|pmd_strike_text }}
Render underlined text.
Tag name:
pmd_underline_text
Usage:
{{ text_variable|pmd_underline_text }}
Render bold text.
Tag name:
pmd_bold_text
Usage:
{{ text_variable|pmd_bold_text }}
Render italic text.
Tag name:
pmd_italic_text
Usage:
{{ text_variable|pmd_italic_text }}
propeller_jquery_url¶
Return the full url to jQuery file to use
Default value:
//code.jquery.com/jquery.min.js
This value is configurable, see Settings section
Tag name:
propeller_jquery_url
Usage:
{% propeller_jquery_url %}
Example:
{% propeller_jquery_url %}
propeller_javascript_url¶
Return the full url to the Propeller JavaScript library
Default value:
None
This value is configurable, see Settings section
Tag name:
propeller_javascript_url
Usage:
{% propeller_javascript_url %}
Example:
{% propeller_javascript_url %}
propeller_css_url¶
Return the full url to the Propeller CSS library
Default value:
None
This value is configurable, see Settings section
Tag name:
propeller_css_url
Usage:
{% propeller_css_url %}
Example:
{% propeller_css_url %}
propeller_css¶
Return HTML for Propeller CSS.
Adjust url in settings. If no url is returned, we don’t want this statement to return any HTML. This is intended behavior.
Default value:
None
This value is configurable, see Settings section
Tag name:
propeller_css
Usage:
{% propeller_css %}
Example:
{% propeller_css %}
propeller_javascript¶
Return HTML for Propeller JavaScript.
Adjust url in settings. If no url is returned, we don’t want this statement to return any HTML. This is intended behavior.
Default value:
None
This value is configurable, see Settings section
Tag name:
propeller_javascript
Parameters:
jquery: Truthy to include jQuery as well as propeller Usage:
{% propeller_javascript %}
Example:
{% propeller_javascript jquery=1 %}