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.
1 maintainer
Metadata
1 maintainer
Release files for django-uicomponents 0.1.0
For a detailed explanation of source distributions (sdists) and built distributions (wheels), please see the package formats documentation.
Source distribution (sdist)
| File | Size | Uploaded | Provenance | Actions |
|---|---|---|---|---|
| django-uicomponents-0.1.0.tar.gz | 4.6 kB | Without provenance | Details for django-uicomponents-0.1.0.tar.gz |
Built distribution (wheel)
| File | Interpreter | ABI | Platform | Actions Reset |
|---|---|---|---|---|
| django_uicomponents-0.1.0-py3-none-any.whl | Python 3 | none | any | Details for django_uicomponents-0.1.0-py3-none-any.whl |
Total release size: 10.5 kB
Release files / django-uicomponents-0.1.0.tar.gz
| Download URL | django-uicomponents-0.1.0.tar.gz |
|---|---|
| Size | 4.6 kB |
| Tags | Source |
|
SHA-256 checksum How to use checksums |
b039788ef83779d5f80b10b5c8ad80d7f7b904d91afdb62af4c6c74448938b01
|
|
BLAKE2b-256 checksum How to use checksums |
3673901325fa73c97031047add490859acf4d2cf16035640fa8bae001f175d92
|
| Upload date | |
|
Uploaded using Trusted Publishing? What is 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
|
Release files / django_uicomponents-0.1.0-py3-none-any.whl
| Download URL | django_uicomponents-0.1.0-py3-none-any.whl |
|---|---|
| Size | 5.9 kB |
| Tags | Python 3 |
|
SHA-256 checksum How to use checksums |
121247e33f513a50bb46ca1085611f9b64a9359fd39af0ed2e1d00322f452038
|
|
BLAKE2b-256 checksum How to use checksums |
bad55a4d40404fff1a716a4bc1858aa0c6f792fdd91cabae41361c398ede7087
|
| Upload date | |
|
Uploaded using Trusted Publishing? What is 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
|
Security for django-uicomponents 0.1.0
Provenance
Provenance describes where a file came from. On PyPI, provenance is shared via attestations, which provide a verifiable record of the build or publishing details. View details, limitations and caveats.
No provenance found
None of the files in this release were uploaded with provenance metadata.
A note on package security
PyPI is a repository for distributing packages, not a service for auditing them. While third-party security researchers and our staff do their best to detect and remove malicious packages, PyPI cannot guarantee the quality, security or suitability of any given package.
To learn more about protecting yourself from malicious actors, visit our package security documentation.
