Standard UI Elements

Factor includes several standard UI elements and CSS files that can be used for common tasks.

Using Elements

All elements are made available from the @factor/ui module. Import them into your components, making sure to add them under components inside Vue options.

Link

Purpose

Add links between routes and to external resources.

Props

# Props
- path: The path to URL. If it's a route it will use Vue Router. If it includes a protocol (e.g. https..) then it will navigate like a normal link.
- query: Query parameters
- to: Standard Vue Router `to` parameter.
- btn: Turn Turn into a 'factor-btn' ('primary', 'default')
  - tip: Accepts attributes for 'factor-btn'

To Import

import { factorLink } from "@factor/ui"

In Template

<factor-link path="https://www.fiction.com">External Link</factor-link>
<factor-link path="/">Local Link</factor-link>
<factor-link btn="primary" path="/">Button</factor-link>
<factor-link btn="default" path="/">Button</factor-link>
<factor-link btn="primary" path="/" :loading="true">Button</factor-link>

Rendered

Spinner

Purpose

A universal loading indicator.

Props

- colorMode(string): primary, text, placeholder (default)
- size(string): Spinner width

To Import

import { factorSpinner } from "@factor/ui"

In Template

<factor-spinner />
<factor-spinner color-mode="primary" />
<factor-spinner color-mode="text" />

Rendered

Purpose

Standard modal.

Props

- vis.sync (boolean): Synced parameter. Set [true] to show modal.

To Import

import { factorModal } from "@factor/ui"

In Template

<factor-modal :vis.sync="vis">Your Modal Content</factor-modal>
<factor-btn @click="vis = !vis">Click Me</factor-btn>

Rendered

Button

Purpose

Standard buttons.

Props

- btn(string): primary, secondary, text, default
- loading(boolean): Show loading spinner.
- size(string): normal, small, tiny, large

To Import

import { factorBtn } from "@factor/ui"

In Template

<div class="row">
  <factor-btn btn="primary">Click Me</factor-btn>
  <factor-btn btn="secondary">Click Me</factor-btn>
  <factor-btn btn="default">Click Me</factor-btn>
  <factor-btn btn="text">Click Me</factor-btn>
</div>
<div class="row sizes">
  <factor-btn size="large">Click Me</factor-btn>
  <factor-btn size="small">Click Me</factor-btn>
  <factor-btn size="tiny">Click Me</factor-btn>
</div>
<div class="row loading">
  <factor-btn size="large" :loading="true">Click Me</factor-btn>
  <factor-btn size="small" :loading="true">Click Me</factor-btn>
  <factor-btn size="tiny" :loading="true">Click Me</factor-btn>
</div>

Rendered

Avatar

Purpose

User profile images with Gravatar fallback.

Props

- url(string): image URL
- user(object): Factor user object
- post-id(string): Post ID for an image in store
- loading(boolean): Loading spinner

To Import

import { factorAvatar } from "@factor/ui"

In Template

<factor-avatar :user="{email: `[email protected]`}" />
<factor-avatar email="[email protected]" />
<factor-avatar url="/icon.svg" />
<factor-avatar email="[email protected]" />
<factor-avatar :loading="true" />

Rendered

Icon

Purpose

Loads Font Awesome and displays an icon. Free version only and loads max once per page.

Props

- icon(string): A Font Awesome icon class

To Import

import { factorIcon } from "@factor/ui"

In Template

<factor-icon icon="fas fa-key" />
<factor-icon icon="far fa-trash-alt" />
<factor-icon icon="fas fa-map-marker-alt" />
<factor-icon icon="fas fa-camera x2" />
<factor-icon icon="fas fa-times x2" />
<factor-icon icon="fas fa-plus-square x2" />

Rendered

Purpose

Lightboxes images in full screen mode.

Props

- visible(boolean): Show lightbox
- imgs(array): Array of image urls
- index(number): Selected image index

Usage in Component

<template>
  <div class="example docs-component-example">
    <factor-lightbox :visible.sync="vis" :images="images" :selected="selected" />
    <factor-btn btn="primary" @click="vis = !vis">View Images Lightbox &rarr;</factor-btn>
  </div>
</template>
<script lang="ts">
  import { factorLightbox, factorBtn } from "@factor/ui"
  export default {
    components: { factorLightbox, factorBtn },
    data() {
      return {
        vis: false,
        selected: 0,
        images: [
          require("./img/icon-1.svg"),
          require("./img/icon-2.svg"),
          require("./img/icon-3.svg"),
          require("./img/icon-4.svg"),
        ],
      }
    },
    computed: {},
  }
</script>

Rendered

Standard Reset CSS

Most apps and themes will want to apply a CSS "reset" to help create consistency across browsers. Factor has one you can import as follows:

// global scope
@import "[email protected]/ui/css/standard-reset.less";

Standard Entry CSS

Long form text—similar to the text in this document—typically uses a common formatting pattern and style. To help you quickly format and style text like this, Factor provides you a CSS file for standard long form entries.

.my-entry-text {
  @import "[email protected]/ui/css/standard-entry.less";
}

post-19603c73.svg