ln.vue/controls.html

103 lines
3.8 KiB
HTML

<div>
<h1>Controls</h1>
<div>{{ LNVue.Version() }}</div>
<br>
<table id="controls">
<thead style="font-style: italic;border-bottom: 1px solid black;">
<tr>
<td style="font-style: italic;border-bottom: 1px solid black;">Control</td>
<td style="font-style: italic;border-bottom: 1px solid black;"></td>
<td style="font-style: italic;border-bottom: 1px solid black;">currentValue</td>
</tr>
</thead>
<tbody>
<tr>
<td>ln-textfield</td>
<td><ln-textfield v-model="controls.textfield" v-tooltip="'Ein einzeiliges Textfeld'"></ln-textfield></td>
<td>{{ controls.textfield }}</td>
</tr>
<tr>
<td>ln-textarea</td>
<td><ln-textarea class="long" v-model="controls.textarea" v-tooltip="'Ein mehrzeiliges Textfeld'"></ln-textarea></td>
<td>{{ controls.textarea }}</td>
</tr>
<tr>
<td>ln-number (integer)</td>
<td><ln-number v-model="controls.integer"></ln-number></td>
<td>{{ controls.integer }}</td>
</tr>
<tr>
<td>ln-number (float)</td>
<td><ln-number
v-model="controls.float"
:float="true"
></ln-number></td>
<td>{{ controls.float }}</td>
</tr>
<tr>
<td>ln-select<br>using object for <i>items</i></td>
<td><ln-select
v-bind:items="controls.items"
:empty="false"
v-model:value="controls.selectedItem"
></ln-select>
</td>
<td>{{ controls.selectedItem }}</td>
</tr>
<tr>
<td>ln-select<br>using array for <i>items</i></td>
<td><ln-select
v-bind:items="slideItems"
v-model:value="controls.selectedNumericalItem"
></ln-select>
</td>
<td>{{ controls.selectedNumericalItem }}</td>
</tr>
<tr>
<td>ln-upload</td>
<td><ln-upload class="long" v-model="controls.files"></ln-upload><br></td>
<td>{{ controls.files }}</td>
</tr>
<tr>
<td>ln-slider</td>
<td>
<ln-slider
class="long"
:min="0"
:max="1000"
v-model="controls.slide1000"
v-tooltip="'Ein einfacher Schieberegler'"
></ln-slider>
</td>
<td>{{ controls.slide1000 }}</td>
</tr>
<tr>
<td>ln-slider<br>using list of items</td>
<td>
<ln-slider
class="long"
:values="slideItems"
v-model="controls.selectedNumericalItem"
></ln-slider>
</td>
<td>{{ controls.selectedNumericalItem }}</td>
</tr>
<tr>
<td>ln-slider<br>using object as values</td>
<td>
<ln-slider
class="long"
:values="controls.items"
v-model="controls.selectedItem"
></ln-slider>
</td>
<td>{{ controls.selectedItem }}</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>