2023-09-22 21:50:55 +02:00
|
|
|
## Widgets
|
|
|
|
|
|
|
|
|
|
Widgets are the building blocks of our UI.
|
2023-09-22 23:03:37 +02:00
|
|
|
We are currently making all our
|
2023-09-22 21:50:55 +02:00
|
|
|
widgets [WebComponents](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)
|
2023-09-22 23:03:37 +02:00
|
|
|
based on [Lit](https://lit.dev/docs/). Many of our widgets use [Shoelace](https://shoelace.style) components as building
|
|
|
|
|
blocks.
|
2023-09-22 21:50:55 +02:00
|
|
|
|
2023-09-22 23:03:37 +02:00
|
|
|
If you just want to use existing widgets, you can put them in your .xet template file:
|
2023-09-22 21:50:55 +02:00
|
|
|
|
|
|
|
|
```xml
|
|
|
|
|
<?xml version="1.0" encoding="UTF-8"?>
|
|
|
|
|
<!DOCTYPE overlay PUBLIC "-//EGroupware GmbH//eTemplate 2.0//EN" "https://www.egroupware.org/etemplate2.0.dtd">
|
|
|
|
|
<overlay>
|
|
|
|
|
<template id="myapp.mytemplate">
|
|
|
|
|
<et2-vbox>
|
|
|
|
|
<et2-textbox id="name" label="Your name" class="et2-label-fixed"></et2-textbox>
|
|
|
|
|
<et2-select-number id="quantity" label="Quantity" class="et2-label-fixed"></et2-select-number>
|
|
|
|
|
</et2-vbox>
|
|
|
|
|
</template>
|
|
|
|
|
</overlay>
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
<img src="/assets/images/widgets_rendered_example.png" alt="Rendered example template">
|
