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
Close
Hashes for django-uicomponents-0.1.0.tar.gz
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 | b039788ef83779d5f80b10b5c8ad80d7f7b904d91afdb62af4c6c74448938b01 |
|
| MD5 | 1501d032dd4558c908429abdeb2a5e04 |
|
| BLAKE2b-256 | 3673901325fa73c97031047add490859acf4d2cf16035640fa8bae001f175d92 |
Close
Hashes for django_uicomponents-0.1.0-py3-none-any.whl
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 | 121247e33f513a50bb46ca1085611f9b64a9359fd39af0ed2e1d00322f452038 |
|
| MD5 | 8368d5e8e257b5eb0a43af697664233a |
|
| BLAKE2b-256 | bad55a4d40404fff1a716a4bc1858aa0c6f792fdd91cabae41361c398ede7087 |
