Namespace: components

vcs.ui.components

These components can be used in any plugin html template, by adding them to them DOM using the class name (without the namespace of vcs.ui.Components) as a tag. See the docs for events fired by these components and properties that can be passed to them

Methods

vcs.ui.components.AccordionBox(title, tooltip, startOpen, slot, slot:title-slot)

A box with at title, which expands nicely and then shows the slot content

Name Type Description
title string
tooltip string
startOpen boolean
slot *

content

slot:title-slot *

additional title information (icons, buttons badges etc.)

vcs.ui.components.CloseButton()

A special button with an x, will always close a content window and go to the 'home' route

vcs.ui.components.ContentTile(slot)

The title in a content window, with a @link{vcs.ui.components.CloseButton}

Name Type Description
slot *

The title, rendered in an h2 tag

vcs.ui.components.LeadButton(clickOnEnter, slot)

Vcs lead button, a simple button. It also fires click on keyup.enter.

Name Type Default Description
clickOnEnter boolean false

if true pressing Enter will fire click event on keyUp

slot *
Fires:
  • click

vcs.ui.components.Loader(size, message)

A simple spinner for showing loading in progess.

Name Type Default Description
size number 3

the fontawesome size of the spinner

message string

A message to be displayed underneath the spinner

vcs.ui.components.MapContextButton(slot)

A button to set the lastSelectedLocation in the store. Once activated, a click into the map will set the location.

Name Type Description
slot *

if no slot is provided, a simple marker is drawn

vcs.ui.components.NavButton(deactivate, slot)

A button which can be deactivated, with a background color on hovering

Name Type Description
deactivate boolean

used to set the cursor to default when hovering

slot *

vcs.ui.components.NavHeaderButton(deactivate, slot)

A button mainly used for navigation

Name Type Description
deactivate boolean

used to set the cursor to default when hovering

slot *

vcs.ui.components.Pagination(list, name, per, slot)

A Pagination list component for re-rendering items

Name Type Default Description
list Array.<Object>

the list to be rendered

name string

the name of the list, must be unique for other paginations

per number 10

number of items per page

slot *

the element to render of each item. it is passed :item as a prop

vcs.ui.components.Query()

The Query Widget Component, needs a Query Widget in the Framework

vcs.ui.components.SubButton(deactivate, slot)

A standard sub-button.

Name Type Description
deactivate boolean

Set the cursor to default on hover

slot *
Fires:
  • click
  • mouseenter
  • mouseleave