Material design UI component library for Django based on AlpineJS and Vuetify.
🚧🚧 Alpinui is still under development 🚧🚧
Click on the image to watch the video:
-
Install dependencies
pip install django_alpinui django_components
-
Add
django_alpinuianddjango_componentstoINSTALLED_APPSin yoursettings.pyINSTALLED_APPS = [ "django_components", "django_components.safer_staticfiles", "django_alpinui", ... ]
-
Follow the installation instructions for
django_components, so you can use its tags from within Django templates. -
Add Alpinui JS and CSS dependencies
<!DOCTYPE html> <html lang="en"> <head> {% component "AlpinuiCss" %}{% endcomponent %} {% component "AlpinuiJs" %}{% endcomponent %} </head> <body> </body> </html>
from typing import Any, Dict
from django_components import component, types
class AlpinuiDemo(component.Component):
def get(self, request, *args, **kwargs):
return self.render_to_response()
def get_context_data(self, *args, **kwargs) -> Dict[str, Any]:
return {}
template: types.django_html = """
{% component "Alpinui" %}
{% component "ADivider" opacity=0.3 attrs:style="margin:20px" %}
My content hello!
{% endcomponent %}
{% endcomponent %}
"""