Today's date is {{ date }}
``` ```py title="components/calendar/calendar.py" from django_components import Component, register @register("calendar") class Calendar(Component): template_file = "calendar.html" ``` Or a combination of Django template, Python, CSS, and Javascript: ```htmldjango title="components/calendar/calendar.html"Today's date is {{ date }}
``` ```css title="components/calendar/calendar.css" .calendar { width: 200px; background: pink; } ``` ```js title="components/calendar/calendar.js" document.querySelector(".calendar").onclick = () => { alert("Clicked calendar!"); }; ``` ```py title="components/calendar/calendar.py" from django_components import Component, register @register("calendar") class Calendar(Component): template_file = "calendar.html" js_file = "calendar.js" css_file = "calendar.css" def get_template_data(self, args, kwargs, slots, context): return {"date": kwargs["date"]} ``` Use the component like this: ```htmldjango {% component "calendar" date="2024-11-06" %}{% endcomponent %} ``` And this is what gets rendered: ```htmlToday's date is 2024-11-06
``` Read on to learn about all the exciting details and configuration possibilities! (If you instead prefer to jump right into the code, [check out the example project](https://github.com/django-components/django-components/tree/master/sampleproject)) ## Features ### Modern and modular UI - Create self-contained, reusable UI elements. - Each component can include its own HTML, CSS, and JS, or additional third-party JS and CSS. - HTML, CSS, and JS can be defined on the component class, or loaded from files. ```djc_py from django_components import Component @register("calendar") class Calendar(Component): template = """Today's date is {{ date }}
""" css = """ .calendar { width: 200px; background: pink; } """ js = """ document.querySelector(".calendar") .addEventListener("click", () => { alert("Clicked calendar!"); }); """ # Additional JS and CSS class Media: js = ["https://cdn.jsdelivr.net/npm/htmx.org@2/dist/htmx.min.js"] css = ["bootstrap/dist/css/bootstrap.min.css"] # Variables available in the template def get_template_data(self, args, kwargs, slots, context): return { "date": kwargs["date"] } ``` ### Composition with slots - Render components inside templates with [`{% component %}`](https://django-components.github.io/django-components/latest/reference/template_tags#component) tag. - Compose them with [`{% slot %}`](https://django-components.github.io/django-components/latest/reference/template_tags#slot) and [`{% fill %}`](https://django-components.github.io/django-components/latest/reference/template_tags#fill) tags. - Vue-like slot system, including [scoped slots](https://django-components.github.io/django-components/latest/concepts/fundamentals/slots/#scoped-slots). ```htmldjango {% component "Layout" bookmarks=bookmarks breadcrumbs=breadcrumbs %} {% fill "header" %} {{ project.name }}{{ project.start_date }} - {{ project.end_date }}
{% endfill %} {# Access data passed to `{% slot %}` with `data` #} {% fill "tabs" data="tabs_data" %} {% component "TabItem" header="Project Info" %} {% component "ProjectInfo" project=project project_tags=project_tags attrs:class="py-5" attrs:width=tabs_data.width / %} {% endcomponent %} {% endfill %} {% endcomponent %} ``` ### Extended template tags `django-components` is designed for flexibility, making working with templates a breeze. It extends Django's template tags syntax with: - Literal lists and dictionaries in the template - [Self-closing tags](https://django-components.github.io/django-components/latest/concepts/fundamentals/template_tag_syntax#self-closing-tags) `{% mytag / %}` - [Multi-line template tags](https://django-components.github.io/django-components/latest/concepts/fundamentals/template_tag_syntax#multiline-tags) - [Spread operator](https://django-components.github.io/django-components/latest/concepts/fundamentals/template_tag_syntax#spread-operator) `...` to dynamically pass args or kwargs into the template tag - [Template tags inside literal strings](https://django-components.github.io/django-components/latest/concepts/fundamentals/template_tag_syntax#template-tags-inside-literal-strings) like `"{{ first_name }} {{ last_name }}"` - [Pass dictonaries by their key-value pairs](https://django-components.github.io/django-components/latest/concepts/fundamentals/template_tag_syntax#pass-dictonary-by-its-key-value-pairs) `attr:key=val` ```htmldjango {% component "table" ...default_attrs title="Friend list for {{ user.name }}" headers=["Name", "Age", "Email"] data=[ { "name": "John"|upper, "age": 30|add:1, "email": "john@example.com", "hobbies": ["reading"], }, { "name": "Jane"|upper, "age": 25|add:1, "email": "jane@example.com", "hobbies": ["reading", "coding"], }, ], attrs:class="py-4 ma-2 border-2 border-gray-300 rounded-md" / %} ``` You too can define template tags with these features by using [`@template_tag()`](https://django-components.github.io/django-components/latest/reference/api/#django_components.template_tag) or [`BaseNode`](https://django-components.github.io/django-components/latest/reference/api/#django_components.BaseNode). Read more on [Custom template tags](https://django-components.github.io/django-components/latest/concepts/advanced/template_tags/). ### Full programmatic access When you render a component, you can access everything about the component: - Component input: [args, kwargs, slots and context](https://django-components.github.io/django-components/latest/concepts/fundamentals/render_api/#component-inputs) - Component's template, CSS and JS - Django's [context processors](https://django-components.github.io/django-components/latest/concepts/fundamentals/render_api/#request-and-context-processors) - Unique [render ID](https://django-components.github.io/django-components/latest/concepts/fundamentals/render_api/#component-id) ```python class Table(Component): js_file = "table.js" css_file = "table.css" template = """{{ variable }}
""" def get_template_data(self, args, kwargs, slots, context): # Access component's ID assert self.id == "djc1A2b3c" # Access component's inputs and slots assert self.args == [123, "str"] assert self.kwargs == {"variable": "test", "another": 1} footer_slot = self.slots["footer"] some_var = self.context["some_var"] # Access the request object and Django's context processors, if available assert self.request.GET == {"query": "something"} assert self.context_processors_data['user'].username == "admin" return { "variable": kwargs["variable"], } # Access component's HTML / JS / CSS Table.template Table.js Table.css # Render the component rendered = Table.render( kwargs={"variable": "test", "another": 1}, args=(123, "str"), slots={"footer": "MY_FOOTER"}, ) ``` ### Granular HTML attributes Use the [`{% html_attrs %}`](https://django-components.github.io/django-components/latest/concepts/fundamentals/html_attributes/) template tag to render HTML attributes. It supports: - Defining attributes as whole dictionaries or keyword arguments - Merging attributes from multiple sources - Boolean attributes - Appending attributes - Removing attributes - Defining default attributes ```djangoRetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4