StaticElement

Renders static HTML content or a component.

Basic Usage

<StaticElement> component can be used in a <Vueform> component:

vue
<template>
  <Vueform>
    <StaticElement name="static">
      <b>Hello, World!</b>
    </StaticElement>
  </Vueform>
</template>

Configuration options can be passed over as regular component props. Check out Options section for available configuration options.

Options

Find below the list of options that can use to configure StaticElement component. Options can be passed to the component via props in inline templates, or in the element's object when using schema.

content

  • Type: string|object|function
template
<StaticElement content="<b>Hello, World!</b>" ... />
<StaticElement label="World" :content="{ template: `<b>Hello, {{ el$.label }}!</b>`, props: ['el$'] }" ... />

The content of the static element. Can be defined as a Vue component object with a render function or string that can contain HTML. If it is a component it receives an el$ prop that gives access to element options & properties.

wrap

  • Type: boolean
  • Default: true
vue
<StaticElement :wrap="false" ... />

Whether the content should be wrapped in ElementLayout. If set to false, the label, description and other extras that depend on ElementLayout won't be rendered.

tag

  • Type: string
  • Default: undefined
vue
<StaticElement ... />
<StaticElement tag="h1" ... />
<StaticElement tag="h2" ... />
<StaticElement tag="h3" ... />
<StaticElement tag="h4" ... />
<StaticElement tag="p" ... />
<StaticElement tag="blockquote" ... />
<StaticElement tag="a" ... />
<StaticElement tag="img" ... />
<StaticElement tag="hr" ... />

The HTML tag type to use. When set the content will be placed within.

allowHtml

  • Type: boolean
  • Default: true
vue
<StaticElement content="<b>Content</b>" ... />
<StaticElement :allow-html="false" content="<b>Content</b>" ... />

Whether HTML tags should be allowed in content.

href

  • Type: string
  • Default: undefined
vue
<StaticElement href="https://vueform.com" tag="a" ... />
<StaticElement href="https://vueform.com" tag="img" ... />

When using an a or an img as tag this specifies the href attribute of the anchor.

target

  • Type: string
  • Default: undefined
vue
<StaticElement target="_blank" tag="a" ... />
<StaticElement target="_blank" tag="img" ... />

When using an a or an img with href as tag this specifies the target attribute of the anchor.

src

  • Type: string
  • Default: undefined
vue
<StaticElement src="https://vueform.com/images/logo.svg" tag="img" ... />

When using an img as tag this specifies the src attribute of the img tag.

alt

  • Type: string
  • Default: undefined
vue
<StaticElement alt="Vueform logo" tag="img" ... />

When using an img as tag this specifies the alt attribute of the img tag.

title

  • Type: string
  • Default: undefined
vue
<StaticElement title="Vueform logo" tag="img" ... />

When using an img as tag this specifies the title attribute of the img tag.

width

  • Type: string
  • Default: undefined
vue
<StaticElement :width="100" tag="img" ... />

When using an img as tag this specifies the width attribute of the img tag.

height

  • Type: string
  • Default: undefined
vue
<StaticElement :height="86" :width="100" tag="img" ... />

When using an img as tag this specifies the height attribute of the img tag. This will not affect actual height, it's only for SEO compilance. Height is calculated based on width to avoid distortion.

align

  • Type: string
  • Default: undefined
vue
<StaticElement align="left" tag="p" content="Left" ... />
<StaticElement align="center" tag="p" content="Center" ... />
<StaticElement align="right" tag="p" content="Right" ... />

How the content of the element should be aligned. Defaults to the global dir attribute.

top

  • Type: string|number
  • Default: 0
vue
<StaticElement ... />
<StaticElement :top="1" ... />
<StaticElement :top="2" ... />
<StaticElement :top="3" ... />

Specified the extra space above the element. The value can be 1, 2 or 3. The values default to 1rem, 2rem and 3rem consecutively. Use the following CSS vars to change them:

  • --vf-space-static-tag-1
  • --vf-space-static-tag-2
  • --vf-space-static-tag-3

bottom

  • Type: string|number
  • Default: 0
vue
<StaticElement ... />
<StaticElement :bottom="1" ... />
<StaticElement :bottom="2" ... />
<StaticElement :bottom="3" ... />

Specified the extra space below the element. The value can be 1, 2 or 3. The values default to 1rem, 2rem and 3rem consecutively. Use the following CSS vars to change them:

  • --vf-space-static-tag-1
  • --vf-space-static-tag-2
  • --vf-space-static-tag-3

name

  • Type: string|number
  • Default: undefined
  • Required: true
vue
<StaticElement name="element" ... />

Sets the element's name.

id

  • Type: string
  • Default: null
vue
<StaticElement id="field-id" ... />

Sets the id attribute of the static content.

attrs

  • Type: object
  • Default: {}
vue
<StaticElement :attrs="{ class: 'text-red-500' }" tag="p" ... />

Assigns HTML attributes to the tag when tag is set.

label

  • Type: string|object|function
  • Default: null
  • Localizable: true

Sets a label for the element. Can be defined as a string, a Vue component object with a render function or as a function that receives el$ as its first a param.

Can also be defined via #label slot.

info

vue
<StaticElement label="Info" info="Info" ... />

Renders an ElementInfo component next to the element's label. By default the icon shows the value of info when hovered, which can contain plain text or HTML. The element needs to have a label defined in order for info to be rendered.

Can be also defined via #info slot.

infoPosition

  • Type: string
  • Default: right
vue
<StaticElement label="Top" info="Top" info-position="top" ... />
<StaticElement label="Right" info="Right" info-position="right" ... />
<StaticElement label="Left" info="Left" info-position="left" ... />
<StaticElement label="Bottom" info="Bottom" info-position="bottom" ... />

Sets the position of the info tooltip.

Can be also defined via #info slot.

description

vue
<StaticElement description="Lorem ipsum dolor sit amet" ... />

Renders the contents of description prop in the ElementDescription component below the static content. It can contain plain text or HTML.

Can be also defined via #description slot.

before

  • Type: object|string|number
  • Default: null
  • Localizable: true
vue
<StaticElement before="Before" ... />

Renders the contents of before in a ElementText component before the static content. It can contain plain text or HTML.

Can be also defined via #before slot.

between

  • Type: object|string|number
  • Default: null
  • Localizable: true
vue
<StaticElement description="Description" between="Between" ... />

Renders the contents of between in a ElementText component between the static content and the description. It can contain plain text or HTML.

Can be also defined via #between slot.

after

  • Type: object|string|number
  • Default: null
  • Localizable: true
vue
<StaticElement description="Description" rules="required" after="After" ... />

Renders the contents of after in a ElementText component after the description. It can contain plain text or HTML.

Can be also defined via #after slot.

conditions

  • Type: array
  • Default: []
vue
<!-- field1 - type 'show' -->
<TextElement name="field1" ... />

<!-- Static 1 - only if field1 == 'show' -->
<StaticElement :conditions="[['field1', 'show']]" ... />

<!-- Static 2 - only if field1 != 'show' -->
<StaticElement :conditions="[['field1', '!=', 'show']]" ... />

<!-- Static 3 - only if field1 == 'show' -->
<StaticElement :conditions="[
  (form$, el$) => form$.el$('field1')?.value === 'show'
]" ... />

Shows or hides an element based on the provided conditions.

If an element's conditions are unmet the element will be hidden and its available property will become false. If hidden, its value will not be part of requestData.

Conditions can be provided as an array, where each item has to be either an array or a function. The element will only become available if all the conditions are fulfilled.

If a condition is provided as an array, the first value must be the path of an other field which value should be watched. The second is an operator that defines the type of comparison. The third is the expected value of the other field.

vue
<StaticElement name="field" :conditions="[['other_field', '==', 'expected_value']]" ... />

Hint: In case you want to check for equality you might leave the operator and pass the expected value as the second param:

vue
<StaticElement name="field" :conditions="[['other_field', 'expected_value']]" ... />

Available operators:

  • == - expect equality
  • != - expect inequality
  • > - expect the other element's value(s) to be higher
  • >=- expect the other element's value(s) to be higher or equal
  • < - expect the other element's value(s) to be lower
  • <= - expect the other element's value(s) to be lower or equal
  • ^ - expect the other element's value to start with
  • $ - expect the other element's value to end with
  • * - expect the other element's value to contain
  • in - expect to be among an array of values
  • not_in - expect not to be among an array of values
  • today - expect to be today
  • before - expect to be before a date (value can be a YYYY-MM-DD date string or today)
  • after - expect to be after a date (value can be a YYYY-MM-DD date string or today)

The expected value can also be defined as an array in which case any of its values will fulfill the condition.

Conditions can be defined with OR relation or as function. Learn more about conditions here.

columns

  • Type: object|string|number
  • Default: null
vue
<StaticElement label="Label" :columns="{ container: 12, label: 3, wrapper: 12 }" ... />

Sets the size of the container, label and wrapper using the theme's grid system, where the:

  • container is the wrapper DOM that contains both label and wrapper
  • label contains the label
  • wrapper contains the static content.
container: 12
label: 3
wrapper: 12

The value of container defines the size of the element's container. 12 will result in full width, 6 in half, 4 in third and so on.

The value of label defines the amount of space the label should take up within the container. If the container is 12 and label is 6 the label is going to take up half the space and the static content will the other half (which is calculated automatically). If the container is 6 and label is 6, the label will only take up one forth and the static content the rest. In case the label has full width (12) the static content will also take up full space instead of becoming zero.

The value of wrapper defines the size of the static content wrapper within the space left for it in the container after subtracting the size of the label. If the container is 12 and label is 4 the space left for the static content is 8. In this case if the wrapper value is 12 it will take up the full space left for it (which is 8) while if it is changed to 6 it will only take up half the space left for it (4):

vue
<StaticElement label="Label" :columns="{ container: 12, label: 4, wrapper: 12 }" ... />
<StaticElement label="Label" :columns="{ container: 12, label: 4, wrapper: 6 }" ... />

Note that while the size of the static content wrapper changes, the size of extras like a description or error won't be limited to the wrapper's space. Instead it will take up the full space in the container left after subtracting the size of the label:

vue
<StaticElement
  label="Label"
  :columns="{ container: 12, label: 4, wrapper: 6 }" 
  description="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
... />

You can set the value of columns as a number in which case the container will receive its value without affecting the default settings of label and wrapper:

vue
<StaticElement label="Label" :columns="6" ... /> <!-- { container: 6, label: 3, wrapper: 12 } -->

You can as well define column values for different breakpoints using the theme system's breakpoints like sm, md, etc. as keys:

vue
<StaticElement label="Label" :columns="{
  xs: { container: 12, label: 12, wrapper: 12 },
  sm: { container: 12, label: 4, wrapper: 12 },
  md: 12,
  lg: { container: 12, label: 2, wrapper: 12 }
}" ... />

Default column sizes can be defined globally in vueform.config.js or on form level using columns.

inline

  • Type: boolean
  • Default: false
vue
<StaticElement :inline="true" ... />

Renders the element and all of its components in a single <span> without applying columns.

size

  • Type: string
  • Default: undefined
vue
<StaticElement size="sm" ... />
<StaticElement ... /> <!-- Default size: 'md' -->
<StaticElement size="lg" ... />

The size of the element and its child components.

view

  • Type: string
  • Default: undefined
vue
<StaticElement view="alt" ... />

The name of the view to be used for the element and by default for its child components. If undefined the default view will be used. Child component views can be overridden with views option.

Learn more about views here.

views

  • Type: object
  • Default: {}
vue
<StaticElement :views="{
  ComponentName: 'alt'
}" ... />

The name of the views for the child components.

Learn more about views here.

addClasses

  • Type: object|function
  • Default: {}
vue
<StaticElement :add-classes="{
  ComponentName: {
    classname: 'class-value',
    classname: ['class-value'],
    classname: [{'class-value': true}],
  }
}" ... />

Adds classes to any component's class names. The classes can have string or array values. When Vue style classes are used object values must be wrapped in an array.

Conditional classes can be passed as a function with form$ param, eg.:

vue
<StaticElement :add-classes="(form$) => ({
  ComponentName: {
    classname: [
      { 'class-value': form$.el$('other_field')?.value === 'some_value' }
    ],
  }
})" ... />

Learn more about adding classes here.

addClass

  • Type: array|object|string|function
  • Default: null
vue
<StaticElement :add-class="{
  classname: 'class-value',
  classname: ['class-value'],
  classname: [{'class-value': true}],
}" ... />

Adds classes to any of StaticElement component's class names. Classes can have string or array values. When Vue style classes are used object values must be wrapped in an array.

Conditional classes can be passed as a function with form$ param, eg.:

vue
<StaticElement :add-class="(form$) => ({
  classname: [
    { 'class-value': form$.el$('other_field')?.value === 'some_value' }
  ],
})" ... />

Learn more about adding classes here.

removeClasses

  • Type: object|function
  • Default: {}
vue
<StaticElement :remove-classes="{
  ComponentName: {
    classname: ['class-value-1', 'class-value-2']
  }
}" ... />

Removes classes from any class names of any components. The classes to be removed must be listed in an array.

Conditional classes can be passed as a function with form$ param, eg.:

vue
<StaticElement :remove-classes="(form$) => ({
  ComponentName: {
    classname: form$.el$('other_field')?.value === 'some_value'
      ? ['class-value-1', 'class-value-2']
      : [],
  }
})" ... />

Learn more about removing classes here.

removeClass

  • Type: array|object|function
  • Default: null
vue
<StaticElement :remove-class="{
  classname: ['class-value-1', 'class-value-2']
}" ... />

Removes classes from any of StaticElement component's class names. The classes to be removed must be listed in an array.

Conditional classes can be passed as a function with form$ param, eg.:

vue
<StaticElement :remove-class="(form$) => ({
  classname: form$.el$('other_field')?.value === 'some_value'
    ? ['class-value-1', 'class-value-2']
    : [],
})" ... />

Learn more about removing classes here.

replaceClasses

  • Type: object|function
  • Default: {}
vue
<StaticElement :replace-classes="{
  ComponentName: {
    classname: {
      'from-class': 'to-class',
      'from-class': ['to-class'],
      'from-class': [{'to-class': true}],
    }
  }
}" ... />

Replaces classes of any class names of any component. The keys are the original class names and the values are the replacements. The keys can only be single classes, while values can contain multiple ones in string or an array. When Vue style classes are used object values must be wrapped in an array.

Conditional classes can be passed as a function with form$ param, eg.:

vue
<StaticElement :replace-classes="(form$) => ({
  ComponentName: {
    classname: form$.el$('other_field')?.value === 'some_value' ? {
      'from-class': 'to-class'
    } : {},
  }
})" ... />

Learn more about replacing classes here.

replaceClass

  • Type: object|function
  • Default: null
vue
<StaticElement :replace-class="{
  classname: {
    'from-class': 'to-class',
    'from-class': ['to-class'],
    'from-class': [{'to-class': true}],
  }
}" ... />

Replaces the classes of any class names of StaticElement component. The keys are the original class names and the values are the replacements. The keys can only be single classes, while values can contain multiple ones in string or an array. When Vue style classes are used object values must be wrapped in an array.

Conditional classes can be passed as a function with form$ param, eg.:

vue
<StaticElement :replace-class="(form$) => ({
  classname: form$.el$('other_field')?.value === 'some_value' ? {
    'from-class': 'to-class'
  } : {},
})" ... />

Learn more about replacing classes here.

overrideClasses

  • Type: object|function
  • Default: {}
vue
<StaticElement :override-classes="{
  ComponentName: {
    classname: 'class-value',
    classname: ['class-value'],
    classname: [{'class-value': true}],
  }
}" ... />

Overrides the classes of any component's class names. The classes can have string or array values. When Vue style classes are used object values must be wrapped in an array.

Conditional classes can be passed as a function with form$ param, eg.:

vue
<StaticElement :override-classes="(form$) => ({
  ComponentName: form$.el$('other_field')?.value === 'some_value' ? {
    classname: 'class-value'
  } : {}
})" ... />

Learn more about overriding classes here.

overrideClass

  • Type: array|object|string|function
  • Default: null
vue
<StaticElement :override-classes="{
  ComponentName: {
    classname: 'class-value',
    classname: ['class-value'],
    classname: [{'class-value': true}],
  }
}" ... />

Overrides the classes of any of StaticElement component's class names. The classes can have string or array values. When Vue style classes are used object values must be wrapped in an array.

Conditional classes can be passed as a function with form$ param, eg.:

vue
<StaticElement :override-class="(form$) => (form$.el$('other_field')?.value === 'some_value' ? {
  classname: 'class-value'
} : {})" ... />

Learn more about overriding classes here.

templates

  • Type: object
  • Default: {}
vue
<template>
  <div id="app">
    <Vueform>
      <StaticElement :templates="{ ElementError }" ... />
    </Vueform>
  </div>
</template>

<script>
import { markRaw } from 'vue'
import CustomElementError from './CustomElementError.vue'

export default {
  data() {
    return {
      ElementError: markRaw(CustomElementError),
    }
  }
}
</script>

Overrides templates used by the component.

Learn more about overriding templates here.

presets

  • Type: array
  • Default: []
vue
<StaticElement :presets="['preset1', 'preset2']" ... />

The presets to be applied for the component.

Learn more about presets classes here.

slots

  • Type: object
  • Default: {}
vue
<script>
import { Vueform, useVueform } from '@vueform/vueform';
import CustomDescriptionSlot from 'path/to/CustomDescriptionSlot.vue';

export default {
  mixins: [Vueform],
  setup: useVueform,
  data: () => ({
    vueform: {
      schema: {
        element: {
          type: 'static',
          slots: {
            label: '<span>Label</span>',
            description: CustomDescriptionSlot,
          }
        }
      }
    }
  })
}
</script>

With this option you can define slot values in a schema based form that you would normally just write inline. The value of a slot can be a plain string, HTML or a component with render function.

While this option can be also used in inline forms, it's primarily intended for schema based forms.

Properties

Properties include data, computed and inject properties of the component. You can use them by reaching the element's Vue component instance via form$'s el$(path) method or directly via this in options API or el$ in Composition API.

aria

  • Type: object
  • Group: computed

The aria-* attributes of the input.

resolvedContent

  • Type: any
  • Group: computed

The resolved content if it is a string or a function.

path

  • Type: string
  • Group: computed

The path of the element using dot . syntax.

parent

  • Type: VNode
  • Group: computed

The parent component of the element.

available

  • Type: boolean
  • Group: computed

Whether no conditions are defined or they are all fulfilled.

hidden

  • Type: boolean
  • Default: false
  • Group: data

Whether the element was hidden programmatically with show() or hide() methods.

visible

  • Type: boolean
  • Group: computed

Whether the element is visible. It's false when available or active is false or hidden is true.

container

  • Type: HTMLElement
  • Group: data

The ref to the outermost DOM of the element.

fieldId

  • Type: string
  • Group: computed

The id of the static content. If id is not provided path will be used.

hasLabel

  • Type: boolean
  • Group: computed

Whether the element has a label option, a #label slot or Vueform component's forceLabels option is true.

Size

  • Type: string
  • Group: computed

The resolved size of the element and all of its child components.

View

  • Type: string
  • Group: computed

The name of the resolved view for the component and the default view for its child components. Child component views can be overridden with views option. This one should be used to determine the component's view in class functions.

template

  • Type: object
  • Group: computed

The component's template.

classes

  • Type: object
  • Group: computed

The component's classes.

theme

  • Type: object
  • Group: inject

The global theme object, which contains all the default templates and classes.

form$

  • Type: Vueform
  • Group: inject

The root form's component.

el$

  • Type: VueformElement
  • Group: computed

The element's component.

mounted

  • Type: boolean
  • Default: true
  • Group: data

Whether the element has been already mounted.

Methods

The methods of the component that you can use by reaching the element's Vue component instance via form$'s el$(path) method or directly via this in options API or el$ in Composition API.

on

  • Arguments:
    • {string} event* - name of the event to listen for
    • {function} callback* - callback to run when the event is triggered
  • Returns: void

Adds a listener for an event.

off

  • Arguments:
    • {string} event* - name of the event to remove
  • Returns: void

Removes all listeners for an event.

fire

  • Arguments:
    • {any} args* - list of arguments to pass over to the event callback
  • Returns: void

Fires and emits an event.

hide

  • Returns: void

Hides the element.

show

  • Returns: void

Shows the element if it was hidden with hide() method.

Events

With events you can subscribe to different events broadcasted by the element. It can be used inline as regular Vue event listeners with @event format. In schema it can be used in PascalCase format prefixed with on (eg. onChange).

vue
<template>
  <Vueform>
    <StaticElement @{eventName}="handler" ... />
  </Vueform>
</template>
vue
<script>
import { Vueform, useVueform } from '@vueform/vueform'

export default {
  mixins: [Vueform],
  setup: useVueform,
  data: () => ({
    vueform: {
      schema: {
        element: {
          type: 'static',
          on{EventName}() {
            // ...
          }
        }
      }
    }
  })
}
</script>

You can also use on(event, callback) method to subscribe to events.

beforeCreate

  • Params:
    • {component} el$ - the element's component

Triggered in beforeCreate hook.

created

  • Params:
    • {component} el$ - the element's component

Triggered in created hook.

beforeMount

  • Params:
    • {component} el$ - the element's component

Triggered in beforeMount hook.

mounted

  • Params:
    • {component} el$ - the element's component

Triggered in mounted hook.

beforeUpdate

  • Params:
    • {component} el$ - the element's component

Triggered in beforeUpdate hook.

updated

  • Params:
    • {component} el$ - the element's component

Triggered in updated hook.

beforeUnmount

  • Params:
    • {component} el$ - the element's component

Triggered in beforeUnmount (or beforeDestroy in Vue 2) hook.

unmounted

  • Params:
    • {component} el$ - the element's component

Triggered in unmounted (or destroyed in Vue 2) hook.

Slots

Slots can be used inline or in slots option object when used in schema:

vue
<template>
  <Vueform>
    <StaticElement ... >
      <template #{slot-name}="scope">
        <!-- ... --->
      </template>
    </StaticElement>
  </Vueform>
</template>
vue
<script>
import { Vueform, useVueform } from '@vueform/vueform'

export default {
  mixins: [Vueform],
  setup: useVueform,
  data: () => ({
    vueform: {
      schema: {
        element: {
          type: 'static',
          slots: {
            {slotName}: // implementation
          }
        }
      }
    }
  })
}
</script>

default

  • Scope:
    • {component} el$ - the element's component

Renders the content of the static element.

label

  • Scope:
    • {component} el$ - the element's component

Renders a label for the element in ElementLabel component.

info

  • Scope:
    • {component} el$ - the element's component

Renders an info icon in ElementInfo component next the the element label. When the icon is hovered it shows the content of this slot. The element needs to have a label to render this.

description

  • Scope:
    • {component} el$ - the element's component

Renders description for the element in ElementDescription component.

before

  • Scope:
    • {component} el$ - the element's component

Renders an ElementText component before the static content.

between

  • Scope:
    • {component} el$ - the element's component

Renders an ElementText component after the static content and before description.

after

  • Scope:
    • {component} el$ - the element's component

Renders an ElementText component after the description and error.

👋 Hire Vueform team for form customizations and developmentLearn more