Separator & Heading

[altezza04]

How to add a separator like or some heading in the middle of the form ?

[mesqueeb]

you can just use stuff like this in your schema:

const schema = [
  {
    component: 'h6',
    slot: 'a heading',
    span: true // makes sure it takes full width if you have multiple columns
  }
]

or for a line

const schema = [
  {
    component: 'div',
    componentStyle: 'border-bottom: thin solid lightgrey',
    span: true // makes sure it takes full width if you have multiple columns
  }
]

[altezza04]

Thanks!

And how to display Image tag 'img', i can use slot: 'img' but I want the value from evaluatedProps

how will that possible? Thanks

[mesqueeb]

@altezza04 you can do 2 things:

• quick:

  {
    id: 'imgUrl',
    component: 'img',
    evaluatedProps: ['src'],
    src: (imgUrlValue) => imgUrlValue
  }

basically, if your formdata has a prop called imgUrl it will show up as image with this code.

• proper:

you can also create a vue file that simple takes value as prop and displays the image:

<template>
  <img :src="value" />
</template>

this would give the same result, but is easier maintainable in the long run and cleaner imo. In this can you could call your vue component something like FormImg and use it in Blitzar like so:

  {
    id: 'imgUrl',
    component: 'FormImg',
  }

[altezza04]

Thanks