vuesite-template

# Formatting components

This page demonstrates formatting components that can be used to present content in a consistent way.

# Card component

Wrap up some content in a box with a title.

Card Title

Card contents

<formatting-VuesiteCard title="Card Title">
  <p><Icon icon="warehouse" /> Card contents</p>
</formatting-VuesiteCard>

# Collapsed component

Hide content away in a collapsed component.

<formatting-VuesiteCollapsed title="Hidden section">
  <p><Icon icon="ambulance" /> Hidden card contents</p>
</formatting-VuesiteCollapsed>

# Error Formatter

Text formatting and advice for errors that might occur while using interactive components.

Network Error

Please check your internet connection!

<formatting-VuesiteErrorFormatter :error="{ message: 'Network Error' }" />

# Expiry

Format a date as a colour coded time relative to the current browser time.

Similar in function to the Relative Date component.

<formatting-VuesiteExpiry :date="new Date('2021-04-01')" />
<formatting-VuesiteExpiry :date="new Date('2022-04-01')" />
<formatting-VuesiteExpiry :date="new Date('2023-04-01')" />
<formatting-VuesiteExpiry :date="new Date('2024-04-01')" />
<formatting-VuesiteExpiry :date="new Date('2025-04-01')" />

# Messages

Format a list of items as a series of paragraphs.

Line 1

Line 2

Line 3

<formatting-VuesiteMessages :messages="['Line 1', 'Line 2', 'Line 3']" />

# Paginated Items

The paginated items formatter reduces the number of items to the page size, calculates the number of pages, and provides a filter to search for a specific item. It can be used to create a filterable, multi-page view of large datasets using a custom renderer.

Found 9 things
5 things / page; 5 in view of 9: 1 of 2
  • Apple
  • Orange
  • Banana
  • Grape
  • Pear
End of page 1 of 2 
<formatting-VuesitePaginatedItems :pageSize="5" itemTypePlural="things"
    :items="['Apple', 'Orange', 'Banana', 'Grape', 'Pear', 'Mango', 'Tomato', 'Carrot', 'Peas']">
  <template v-slot="{ paginatedItems }">
    <ul>
      <li v-for="item in paginatedItems" :key="item">{{ item }}</li>
    </ul>
  </template>
</formatting-VuesitePaginatedItems>

# Relative Date

Format a date as a colour coded time relative to the the current browser time.

Similar in function to the Expiry component.

<formatting-VuesiteCard>
  <formatting-VuesiteRelativeDate :date="new Date('2021-04-01')" />
  <formatting-VuesiteRelativeDate :date="new Date('2022-04-01')" />
  <formatting-VuesiteRelativeDate :date="new Date('2023-04-01')" />
  <formatting-VuesiteRelativeDate :date="new Date('2024-04-01')" />
  <formatting-VuesiteRelativeDate :date="new Date('2025-04-01')" />
</formatting-VuesiteCard>

# Response Formatter

Format a data object as prettified JSON.

{
  "some": "data"
}
<formatting-VuesiteResponseFormatter :response="{ some: 'data' }" />

# Icon component

Display an SVG icon matching the inline font-size.

Search using the Icon Browser; then use <Icon icon="name"> where you want the icon to show up.

Icon in Heading

Icon in Paragraph

  • Icon in List item
<h1><Icon icon="laptop-code" /> Icon in Heading</h1>
<p><Icon icon="laptop-code" /> Icon in Paragraph</p>
<ul>
  <li><Icon icon="laptop-code" /> Icon in List item</li>
</ul>

# Tabulation

Take a list of of objects and display them as an interactive table.

Can be customised with partial columns, and custom render logic on a per-cell basis.
Apple
#D20
30
Banana
#FC0
12
Potato
#
67
Carrot
orange
134 
<formatting-VuesiteTabulation :items="[
    { name: 'Apple', icon: 'shopping-bag', qty: 30 },
    { name: 'Banana', icon: 'shopping-basket', qty: 12 },
    { name: 'Potato', icon: 'shopping-basket', qty: 67 },
    { name: 'Carrot', icon: 'shopping-bag', qty: 134 }]" />

# TODO component

Mark up things still to be done in a standard box.

TODO: Item 1

TODO: Item 2

<formatting-VuesiteTodo>Item 1</formatting-VuesiteTodo>
<formatting-VuesiteTodo>Item 2</formatting-VuesiteTodo>

← Networking Components →