Dashboard-2 ui-template

Dashboard
,
1

I am becoming nuts !

This is the configuraton of a simple ui-template

image
image377×593 21 KB

And this is the result

image
image118×139 1.21 KB

HTML interpretation does not work !

Did I do somethng wrong ? Is there something special to configure ?

Thanks for your answer !

2

When you first go into the template config there is some sample content. The relevant bit here is to include your template between <template> and </template> tags.

3

template nodes use the Vuetify framework. I'm not sure if it supports all pure HTML tags.
Best is to use the Vuetify classes, which offer rich built-in formatting options, and ability to bind the HTML objects to your data.
for example:

<template>
  <v-list>
    <v-list-item-title>• chapter 1</v-list-item-title>
      <v-list class="ml-4">
        <v-list-item-title>- section 1.1</v-list-item-title>
        <v-list-item-title>- section 1.2</v-list-item-title>
      </v-list> 
    <v-list-item-title>• chapter 2</v-list-item-title>
  </v-list>
</template>

Or if you want to bind it to your data:

<template>
  <v-list>
    <v-list-item v-for="(item, index) in items" :key="index">
      <v-list-item-content>
        <v-list-item-title>• {{ item }}</v-list-item-title>
      </v-list-item-content>
    </v-list-item>
  </v-list>
</template>

<script>
export default {
  data() {
    return {
      items: ['Item One', 'Item Two', 'Item Three']
    };
  }
};
</script>
4

Thanks for your answer but t does not change anything. I already tried ….

5

Thanks ! I think it s a good explanation …

I am going to study Vue …

6

It will support all vanilla Javascript and HTML. Vuetify will give you nicely styled widgets out of the box though.

The missing piece here is the <template> tags as specified in the documentation. You will also need to specify the relevent styling you want to see with some CSS, e.g:

<style>
    ul {
       list-style: disc;
    }
</style>
7

Thanks Joe.
So I understand that in such cases, the Vuetify CSS needs to be reset back to the HTML default.

BTW, in the current example, it seems that the style should include padding.

<style>
    ul {
       padding-left: 1.5rem;
    }
</style>

image
image132×174 1.68 KB

8

Vuetify clears default styling, and then adds it’s own for the Vuetify widgets only. If you’re using vanilla HTML, there will be no default styling applied, hence you need to define your own.