feat: Add form ui example
Test css grid system for form fields.
This commit is contained in:
parent
79ad6f452d
commit
ad150fadf2
3 changed files with 80 additions and 1 deletions
45
source/screens/demo/examples/ui/form.njk
Normal file
45
source/screens/demo/examples/ui/form.njk
Normal 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 %}
|
||||
Loading…
Add table
Add a link
Reference in a new issue