mirror of
https://github.com/django-components/django-components.git
synced 2025-09-18 03:39:43 +00:00
594c0689ba
* Move docs-folder form src to root * Avoid mkdocs package / module name clash * Update location of docs & add Windows compatibility * Update requirements-docs * Update generated file to current state
37 lines
1.3 KiB
Markdown
37 lines
1.3 KiB
Markdown
---
|
|
title: Single-file components
|
|
weight: 2
|
|
---
|
|
|
|
Components can also be defined in a single file, which is useful for small components. To do this, you can use the `template`, `js`, and `css` class attributes instead of the `template_name` and `Media`. For example, here's the calendar component from above, defined in a single file:
|
|
|
|
```python title="[project root]/components/calendar.py"
|
|
# In a file called [project root]/components/calendar.py
|
|
from django_components import Component, register, types
|
|
|
|
@register("calendar")
|
|
class Calendar(Component):
|
|
def get_context_data(self, date):
|
|
return {
|
|
"date": date,
|
|
}
|
|
|
|
template: types.django_html = """
|
|
<div class="calendar-component">Today's date is <span>{{ date }}</span></div>
|
|
"""
|
|
|
|
css: types.css = """
|
|
.calendar-component { width: 200px; background: pink; }
|
|
.calendar-component span { font-weight: bold; }
|
|
"""
|
|
|
|
js: types.js = """
|
|
(function(){
|
|
if (document.querySelector(".calendar-component")) {
|
|
document.querySelector(".calendar-component").onclick = function(){ alert("Clicked calendar!"); };
|
|
}
|
|
})()
|
|
"""
|
|
```
|
|
|
|
This makes it easy to create small components without having to create a separate template, CSS, and JS file.
|