mirrors/django-components
1
0
Fork 0
mirror of https://github.com/django-components/django-components.git synced 2025-10-06 04:00:19 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

docs: add Form and Tabs examples (#1411)

Browse source
This commit is contained in:
Juro Oravec 2025-09-29 15:58:47 +02:00 • committed by GitHub
parent b3ea50572d
commit 9afc89ead1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
24 changed files with 1237 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

88
sampleproject/examples/pages/form.py Normal file
View file

@ -0,0 +1,88 @@
from django.http import HttpRequest
from django.utils.safestring import mark_safe
from django_components import Component, types
class FormPage(Component):
class Media:
js = (
# AlpineJS
mark_safe('<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>'),
# TailwindCSS
"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4",
)
template: types.django_html = """
<html>
<head>
<title>Form</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp,container-queries"></script>
</head>
<body>
<div x-data="{
onSubmit: () => {
alert('Submitted!');
}
}">
<div class="prose-xl p-6">
<h3>Submit form</h3>
</div>
{% component "form"
attrs:class="pb-4 px-4 pt-6 sm:px-6 lg:px-8 flex-auto flex flex-col"
attrs:style="max-width: 600px;"
attrs:@submit.prevent="onSubmit"
%}
{% fill "field:project" %}
<input
name="project"
required
class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
>
{% endfill %}
{% fill "field:option" %}
<select
name="option"
required
class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:max-w-xs sm:text-sm sm:leading-6"
>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
{% endfill %}
{# Defined both label and field because label name is different from field name #}
{% fill "label:description" %}
{% component "form_label" field_name="description" title="Marvelous description" / %}
{% endfill %}
{% fill "field:description" %}
<textarea
name="description"
id="description"
rows="5"
class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
></textarea>
{% endfill %}
{% fill "append" %}
<div class="flex justify-end items-center gap-x-6 border-t border-gray-900/10 py-4">
<button type="submit" class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
Submit
</button>
<button type="button" class="text-sm font-semibold leading-6 text-gray-900">
Cancel
</button>
</div>
{% endfill %}
{% endcomponent %}
</div>
</body>
</html>
""" # noqa: E501
class View:
def get(self, request: HttpRequest):
return FormPage.render_to_response(request=request)