54 lines
1.9 KiB
Twig
54 lines
1.9 KiB
Twig
|
{% extends 'base.html.twig' %}
|
||
|
|
|
||
|
|
{% block body %}
|
||
|
|
<h1>H1 Hello World</h1>
|
||
|
|
<h2>H2 Hello World</h2>
|
||
|
|
<h3>H3 Hello World</h3>
|
||
|
|
<h4>H4 Hello World</h4>
|
||
|
|
<h5>H5 Hello World</h5>
|
||
|
|
<h6>H6 Hello World</h6>
|
||
|
|
<p>P Lorem ipsum dolor sit amet, consectetur adipisicing elit.
|
||
|
|
Ad consectetur consequuntur culpa debitis dignissimos
|
||
|
|
dolore est ex illo iure maxime, molestiae pariatur recusandae,
|
||
|
|
reiciendis saepe similique temporibus voluptatum? Eos,
|
||
|
|
repudiandae!
|
||
|
|
</p>
|
||
|
|
<a href="">A Link</a>
|
||
|
|
<button>Button</button>
|
||
|
|
<input type="text">
|
||
|
|
<input type="checkbox" name="" id="">
|
||
|
|
<button id="dropdownButton" data-dropdown-toggle="dropdownMenu" class="shadow" type="button">
|
||
|
|
Select an option
|
||
|
|
</button>
|
||
|
|
<ul id="dropdownMenu" class="hidden border-red-300 shadow">
|
||
|
|
<li>
|
||
|
|
<a href="#" class="block hover:bg-red-500" data-value="1">Option 1</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="#" class="block hover:bg-green-500" data-value="2">Option 2</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="#" class="block hover:bg-blue-500" data-value="3">Option 3</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<script>
|
||
|
|
document.querySelectorAll('#dropdownMenu a').forEach(function (option) {
|
||
|
|
option.addEventListener('click', function (event) {
|
||
|
|
event.preventDefault();
|
||
|
|
console.log(this.dataset.value);
|
||
|
|
document.getElementById('dropdownButton').textContent = this.textContent;
|
||
|
|
console.log('close');
|
||
|
|
document.getElementById('dropdownMenu').classList.add('hidden');
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
document.getElementById('dropdownButton').addEventListener('click', function () {
|
||
|
|
let menu = document.getElementById('dropdownMenu');
|
||
|
|
console.log('open', menu);
|
||
|
|
menu.classList.remove('hidden');
|
||
|
|
console.log('open2', menu);
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
{% endblock %}
|