feat: Add form ui example

Test css grid system for form fields.
This commit is contained in:
sthag 2025-05-14 19:00:13 +02:00
parent 79ad6f452d
commit ad150fadf2
3 changed files with 80 additions and 1 deletions

View file

@ -0,0 +1,45 @@
---
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 %}