Pages UI
v5.0.1 - Pages Angular
v5.0.1 - Pages Angular
  • Getting Started
  • Layouts
  • Routing
  • Styles
  • Layout Components
    • Header
    • Menu Items
    • Sidebar
    • Horizontal Menu
    • Secondary Sidebar
    • Quick View
    • Overlay Search
  • Directives
    • Parallax
    • Retina Image
  • Bootstrap Components
  • Forms
    • Checkbox and Radio
    • Form Group
    • Input Helpers
    • Switch Toggle
    • Select
    • Select FX
    • Typeahead
    • Date Picker
    • Time Picker
    • Quill Editor
    • File Uploader
  • UI Components
    • Progress Bar
    • List View
    • Cards
    • Social Cards
    • Collapse
    • Tabs
    • Tree View
    • Sliders
    • Notifications
  • Tables / Datatables
  • Maps
  • Session and other pages
  • Service
  • Dashboards
  • Widgets
  • Charts
  • Change log
Powered by GitBook
On this page
  • Importing
  • bar-tile-widget
  • graph-live-widget
  • graph-options-widget
  • graph-tile-flat-widget
  • graph-tile-widget
  • graph-widget
  • image-widget
  • image-widget-basic
  • plain-live-widget
  • plain-widget
  • progress-tile-flat-widget
  • project-progress-widget
  • quick-stats-widget
  • realtime-widget
  • social-image-tile-widget
  • social-post-tile-widget
  • stacked-bar-widget
  • stat-tile-widget
  • table-basic-widget
  • table-widget
  • todo-list-widget
  • weather-widget
  • weekly-sales-widget

Widgets

Pre-built widget components that you can integrate with your dashboards or social feeds.

PreviousDashboardsNextCharts

Last updated 6 years ago

Pages comes with 24 pre-built widget components that you can easily integrate with your dashboards in no time. These can be found in dashboard/widgetsfolder and each widget folder is named after its @Component's selector.Widgets are based off

Importing

Widgets are available throughout all the pre-built dashboards via dashboard.module.ts. But if you are planning use them outside you will have to import them as below.

// Using ImageWidgetComponent as an example. Same steps apply to other widgets
import { ImageWidgetComponent } from './widgets/image-widget/image-widget.component';
@NgModule({
  declarations: [ImageWidgetComponent,...]
})
export class AppModule(){}

bar-tile-widget

Features a stacked bar chart made with echarts component:

<bar-tile-widget></bar-tile-widget>

graph-live-widget

Features a looping vertical slider with stock market updates.

<graph-live-widget></graph-live-widget>

graph-options-widget

Features a line chart with toggle buttons.

<graph-options-widget></graph-options-widget>

graph-tile-flat-widget

Features a line chart with sales stats.

<graph-tile-flat-widget></graph-tile-flat-widget>

graph-tile-widget

Features a line chart with area filled in.

<graph-tile-widget></graph-tile-widget>

graph-widget

Features a line chart with multiple series of data.

<graph-widget></graph-widget>

Property

Description

Type

Default

IsAlt

Toggles three boxes with stock trading highlights and a search bar

boolean

false

image-widget

Features a background image and an text overlay.

<image-widget></image-widget>

image-widget-basic

Features a background image and a text overlay. Intended to use for showing minimal content.

<image-widget-basic></image-widget-basic>

plain-live-widget

Features a rotating text

<plain-live-widget></plain-live-widget>

plain-widget

Features quick weather info

<plain-widget></plain-widget>

progress-tile-flat-widget

Features a large title text and a progress bar

<progress-tile-flat-widget></progress-tile-flat-widget>

project-progress-widget

Features multiple progress bars in a tab view.

<project-progress-widget></project-progress-widget>

quick-stats-widget

Features quick stats in extra large text and a progress bar.

<quick-stats-widget></quick-stats-widget>

realtime-widget

Designed to show live streaming data in a line chart. Demo widget represents sample data updated using a timer.

<realtime-widget></realtime-widget>

social-image-tile-widget

Shows an image in the style of a social feed post.

<social-image-tile-widget></social-image-tile-widget>

social-post-tile-widget

Shows a social post with text and an image.

<social-post-tile-widget></social-post-tile-widget>

stacked-bar-widget

<stacked-bar-widget></stacked-bar-widget>

stat-tile-widget

This is also another mini widget similar to quick-stats-widget and progress-tile-flat widget. Sample widget illustrates stock trading stats

<stat-tile-widget></stat-tile-widget>

table-basic-widget

Features a basic table layout.

<table-basic-widget></table-basic-widget>

table-widget

This is another variation of table-basic-widget.

<table-widget></table-widget>

todo-list-widget

Show todo-list items with checkboxes.

<todo-list-widget></todo-list-widget>

weather-widget

<todo-list-widget></todo-list-widget>

Property

Description

Type

Default

Type

By default weather widget shows two highlighted columns with weather data to the right in extra large screens. Set this to "compact" to disable them.

string

undefined

weekly-sales-widget

This is also another mini widget showing weekly sales data.

<weekly-sales-widget></weekly-sales-widget>

Features a component with stacked bar charts representing multiple data sources for quick comparison.

Shows weekly weather data together with animated weather icons from .

pg-tabset
Skycons
pgcard component
Default view
With Type option set to "compact"
Default widget