103 lines
3.8 KiB
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>
|