Reusable UI components for your Django templates
Project description
Django UI Components
Reusable UI components for your Django templates
Usage
- 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
Install the package from pypi.
$ pip install django-uicomponents
Add django_uicomponents to your INSTALLED_APPS.
# settings.py
INSTALLED_APPS = [
...
'django_uicomponents',
...
]
Settings
| Option | Description | Default |
|---|---|---|
COMPONENTS_DIR |
Directory inside your template dir from which components are loaded. | 'components' |
License
Released under the MIT license.
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Built Distribution
Filter files by name, interpreter, ABI, and platform.
If you're not sure about the file name format, learn more about wheel file names.
Copy a direct link to the current filters
File details
Details for the file django-uicomponents-0.1.0.tar.gz.
File metadata
- Download URL: django-uicomponents-0.1.0.tar.gz
- Upload date:
- Size: 4.6 kB
- Tags: Source
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/3.1.1 pkginfo/1.5.0.1 requests/2.22.0 setuptools/45.2.0 requests-toolbelt/0.9.1 tqdm/4.46.0 CPython/3.8.5
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
b039788ef83779d5f80b10b5c8ad80d7f7b904d91afdb62af4c6c74448938b01
|
|
| MD5 |
1501d032dd4558c908429abdeb2a5e04
|
|
| BLAKE2b-256 |
3673901325fa73c97031047add490859acf4d2cf16035640fa8bae001f175d92
|
File details
Details for the file django_uicomponents-0.1.0-py3-none-any.whl.
File metadata
- Download URL: django_uicomponents-0.1.0-py3-none-any.whl
- Upload date:
- Size: 5.9 kB
- Tags: Python 3
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/3.1.1 pkginfo/1.5.0.1 requests/2.22.0 setuptools/45.2.0 requests-toolbelt/0.9.1 tqdm/4.46.0 CPython/3.8.5
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
121247e33f513a50bb46ca1085611f9b64a9359fd39af0ed2e1d00322f452038
|
|
| MD5 |
8368d5e8e257b5eb0a43af697664233a
|
|
| BLAKE2b-256 |
bad55a4d40404fff1a716a4bc1858aa0c6f792fdd91cabae41361c398ede7087
|
