Fields

Olobase Admin field components allow specific and optimized display of specific resource properties. It is mainly designed for use in show and list views. It is used with the source and resource properties required to fetch and display data. Must be used with the VaShow component injector or an explicit item object via the item prop.

Field Wrapper

Unlike Olobase Admin entries, typed Olobase Admin fields do not contain any tagged wrapper, only a simple inline image formatter. You can use VaField for this. It takes the localized tag and initializes the appropriate field component via prop type, which prevents us from rewriting it to the default slot.

See more for more details.

Dot Representation Support

Olobase Admin fields accept dot notation for the source prop. This feature is useful for objects.

<template>
  <va-field source="address.street"></va-field>
  <va-field source="address.postcode"></va-field>
  <va-field source="address.city"></va-field>
</template>

Olobase Admin Fields

In this section, the Olobase Admin field representation components in the packages/admin/src/components/ui/fields folder will be discussed.

Text

Displays the value as simple text, creating a simple span. HTML tags are destroyed with the strip function.

Mixins

  • Field
  • Source
  • Resource

Properties

Property Type Description
source string The property of the resource to fetch the value to display. Supports dot display for slot used object.
item null Overrides the default element added by VaShow.
truncate number Shortens text.

Example

<template>
  <va-text-field source="name"></va-text-field>
</template>

Creates a simple span:

<span>Admin</span>

Email

Displays the value as a mailto link.

Mixins

  • Field
  • Source
  • Resource

Properties

Property Type Description
source string The property of the resource to fetch the value to display. Supports dot representation for slot used object.
item null Overrides the default element added by VaShow.

Example

<template>
  <va-email-field source="email"></va-email-field>
</template>

Creates a simple mailto link:

<a href="mailto:[email protected]">[email protected]</a>

Url

It displays the value as a simple http connection.

Mixins

  • Field
  • Source
  • Resource

Properties

Property Type Description
source string The property of the resource to fetch the value to display. Supports dot display for slot used object.
item null Overrides the default element added by VaShow.
target string The target value of the link is external by default.

Example

<template>
  <va-url-field source="url" target="_self"></va-url-field>
</template>
This documents is available for subscribers only

Get Full Accesss