hippie/source/screens/demo/examples/ui/form.njk
sthag ad150fadf2 feat: Add form ui example
Test css grid system for form fields.
2025-05-14 19:00:13 +02:00

45 lines
No EOL
833 B
Text

---
title: Form
tags:
- demoExample
- ui
---
{% extends "demo/_app.njk" %}
{% block title %}{{ title }}
{% endblock %}
{% block links %}
<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block body %}
<div id="head">
<h1>Formulare</h1>
<button data-action="add">Hinzufügen</button>
</div>
<div id="grid">
<div>a</div>
<div>b</div>
</div>
{% endblock %}
{%- block script %}
{{ super() }}
<script>
const add = document.querySelector('[data-action=add]');
add.addEventListener('click', (e) => {
const grid = document.getElementById('grid');
const item = document.createElement('div');
item.style.backgroundColor = '#f0f';
item.textContent = 'c'
grid.appendChild(item);
});
</script>
{% endblock %}