Reusable UI components for your Django templates
- Create a component file, such as
./templates/components/button.html.
<button class="px-4 py-2 font-semibold rounded-lg shadow text-sm text-white
{% if variant == 'danger' %}
bg-red-500 hover:bg-red-400
{% elif variant == 'success' %}
bg-green-500 hover:bg-green-400
{% else %}
bg-blue-500 hover:bg-blue-400
{%endif%}
">
{{ text }}
</button>- Load
componentsat the top of your template and include the UI component by using thecomponenttemplate tag possibly with keyword arguments.
{% load static %}
{% load components %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Django UI Components</title>
<link rel="stylesheet" href="{% static 'css/styles.css' %}">
<link rel="icon" type="image/x-icon" href="{% static 'favicon.ico' %}">
</head>
<body class="bg-gray-50 flex items-center min-h-screen justify-center">
{% component 'button.html' text="Delete" variant="danger" %}
{% component 'button.html' text="Save" variant="success" %}
{% component 'button.html' text="Ok" %}
</body>
</html>- This results in three button variations.
Install the package from pypi.
$ pip install django-uicomponents
Add django_uicomponents to your INSTALLED_APPS.
# settings.py
INSTALLED_APPS = [
...
'django_uicomponents',
...
]| Option | Description | Default |
|---|---|---|
COMPONENTS_DIR |
Directory inside your template dir from which components are loaded. | 'components' |
Released under the MIT license.