82 lines
7.5 KiB
Markdown
82 lines
7.5 KiB
Markdown
# Attributes
|
|
|
|
| dj-attr | Dynamically assign attributes using Django template variables. |
|
|
|----------------|---------------------------------------------------------------------------------------|
|
|
| Syntax | `<element dj-attr="attribute1;value1~attribute2;value2~attribute3;value3"></element>` |
|
|
| Example Input | `<div dj-attr="class;my-class~id;my-id"></div>` |
|
|
| Example Output | `<div class="{{ my-class }}" id="{{ my-id }}"></div>` |
|
|
|
|
| dj-block | Replace the element with Django block tags. |
|
|
|----------------|-----------------------------------------------------|
|
|
| Syntax | `<element dj-block="blockname">Content</element>` |
|
|
| Example Input | `<div dj-block="content">Content</div>` |
|
|
| Example Output | `{% block content %}Content{% endblock %}` |
|
|
|
|
| dj-command | Replace the element with a Django template command. |
|
|
|----------------|-------------------------------------------------------------|
|
|
| Syntax | `<element dj-command="command"></element>` |
|
|
| Example Input | `<div dj-command="url 'index'"></div>` |
|
|
| Example Output | `{% url 'index' %}` |
|
|
|
|
| dj-for | Replace the element with a Django template for loop. |
|
|
|----------------|--------------------------------------------------------------|
|
|
| Syntax | `<element dj-for="item in list">Content</element>` |
|
|
| Example Input | `<div dj-for="item in list"><p>Hello</p></div>` |
|
|
| Example Output | `{% for item in list %}<p>Hello</p>{% endfor %}` |
|
|
|
|
| dj-for-wrap | Wrap the element within a Django template for loop. |
|
|
|----------------|-------------------------------------------------------------|
|
|
| Syntax | `<element dj-for-wrap="item in list">Content</element>` |
|
|
| Example Input | `<div dj-for-wrap="item in list">Content</div>` |
|
|
| Example Output | `{% for item in list %}<div>Content</div>{% endfor %}` |
|
|
|
|
| dj-if, dj-elif, dj-else | Replace the elements with a Django template if-elif-else structure. |
|
|
|-------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------|
|
|
| Syntax | `<element dj-if="condition">Content</element>`<br/>`<element dj-elif="condition">Content</element>`<br/>`<element dj-else="condition">Content</element>` |
|
|
| Note | The `dj-elif` and `dj-else` attributes are optional. Multiple `dj-elif` attributes are allowed. |
|
|
| Example Input | `<div dj-if="condition1">Test</div><div dj-elif="condition2">Test2</div><div dj-else>Test3</div>` |
|
|
| Example Output | `{% if condition1 %}Test{% elif condition2 %}Test2{% else %}Test3{% endif %}` |
|
|
|
|
| dj-include | Replace the content of the element with a Django template include command. |
|
|
|----------------|----------------------------------------------------------------------------|
|
|
| Syntax | `<element dj-include="template_name"></element>` |
|
|
| Example Input | `<div dj-include="template_name.html"></div>` |
|
|
| Example Output | `{% include "template_name.html" %}` |
|
|
|
|
| dj-remove-default | Removing the Doctype, "head" element, and "script" element within the "body" element. It also unwraps the "body" and "html" elements, leaving only the remaining content of the "body" element. |
|
|
|-------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
|
|
| Syntax | `<html dj-remove-default>...</html>` |
|
|
| Note | This is meant to remove all the default html wrapper code most static html generators produce. |
|
|
| Example Input | `<!DOCTYPE html><html dj-remove-default><head>...</head><body>Content<script>...</script></body></html>` |
|
|
| Example Output | `Content` |
|
|
|
|
| dj-static | Replace the value of the specified tag with a Django template static command, using the specified static file path. |
|
|
|----------------|---------------------------------------------------------------------------------------------------------------------|
|
|
| Syntax | `<element dj-static="tag;static_file_path"></element>` |
|
|
| Example Input | `<img dj-static="src;images/pic.jpg">` |
|
|
| Example Output | `<img src="{% static 'images/pic.jpg' %}">` |
|
|
|
|
| dj-style | Modify the style attribute of a element with django variables. |
|
|
|----------------|--------------------------------------------------------------------------------------------|
|
|
| Syntax | `<element dj-style="property1;value1;value_type1~property2;value2;value_type2"></element>` |
|
|
| Note | The `value_type` is optional. If not included still add the `;` after the value. |
|
|
| Example Input | `<div style="color:red" dj-style="background-color;color;~padding;padding;px">` |
|
|
| Example Output | `<div style="color:red;background-color:{{ color }};padding:{{ padding }}px">` |
|
|
|
|
| dj-style-raw | Modify the style attribute of a element. The value will be inserted as is. |
|
|
|----------------|----------------------------------------------------------------------------------|
|
|
| Syntax | `<element dj-style-raw="property1;value1~property2;value2"></element>` |
|
|
| Example Input | `<div style="color:red" dj-style-raw="background-color;blue~color:{{ color }}">` |
|
|
| Example Output | `<div style="color:{{ color }};background-color:blue">` |
|
|
|
|
| dj-unwrap | Remove the element's tags but keeps its content. |
|
|
|----------------|--------------------------------------------------|
|
|
| Syntax | `<element dj-unwrap>Content</element>` |
|
|
| Example Input | `<div dj-unwrap><p>Hello, world!</p></div>` |
|
|
| Example Output | `<p>Hello, world!</p>` |
|
|
|
|
| dj-var | Replace the element's content with a Django template variable. |
|
|
|----------------|----------------------------------------------------------------|
|
|
| Syntax | `<element dj-var="variable_name">Content</element>` |
|
|
| Example Input | `<p dj-var="greeting">Hello, world!</p>` |
|
|
| Example Output | `<p>{{ greeting }}</p>` | |