#
Widgets
Pre-built widget components that you can integrate with your dashboards or social feeds.
Pages comes with 24 pre-built widget components that you can easily integrate with your dashboards in no time. These can be found in Components/ui/widget
folder and each widget folder is named after its Component's name.
#
Importing
Widgets are available throughout all the pre-built dashboards. But if you are planning use them outside you will have to import them as below.
//import ui widgets component
import GraphWidget from "../../ui/widget/GraphWidget/Component";
import GraphTitleWidget from "../../ui/widget/GraphTitleWidget/Component";
import PlainLiveWidget from "../../ui/widget/PlainLiveWidget/Component";
import GraphLiveWidget from "../../ui/widget/GraphLiveWidget/Component";
import BarDoubleWidget from "../../ui/widget/BarDoubleStackWidget/Component";
import LineAreaGraphWidget from "../../ui/widget/LineAreaGraphWidget/Component";
import ServerLoadWidget from "../../ui/widget/ServerLoadWidget/Component";
import SaleStackBar from "../../ui/widget/SaleStackBarWidget/Component";
import MapWidget from "../../ui/widget/MapWidget/Component";
#
Graph Live Widget
Features a looping vertical slider with stock market updates.
<GraphLiveWidget></GraphLiveWidget>
#
Graph Options Widget
Features a line chart with toggle buttons.
<GraphOptionsWidget></GraphOptionsWidget>
#
Graph Tile Flat Widget
Features a line chart with sales stats.
<GraphTileFlatWidget></GraphTileFlatWidget>
#
Graph Tile Widget
Features a line chart with area filled in.
<GraphTileWidget></GraphTileWidget>
#
Graph Widget
Features a line chart with multiple series of data.
<GraphTileWidget></GraphTileWidget>
#
#
Image Widget
Features a background image and an text overlay.
<ImageWidget></ImageWidget>
#
Image Basic Widget
Features a background image and an text overlay.
<ImageBasicWidget></ImageBasicWidget>
#
Plain Live Widget
Features a rotating text
<PlainLiveWidget></PlainLiveWidget>
#
Plain Widget
Features quick weather info
<PlainWidget></PlainWidget>
#
Progress Tile Flat Widget
Features a large title text and a progress bar
<ProgressTileFlat></ProgressTileFlat>
#
Project Progress Widget
Features multiple progress bars in a tab view.
<ProjectProgressWidget></ProjectProgressWidget>
#
Quick Stats Widget
Features quick stats in extra large text and a progress bar.
<QuickStatsWidget></QuickStatsWidget>
#
Real Time Widget
Designed to show live streaming data in a line chart. Demo widget represents sample data updated using a timer.
<RealTimeWidget></RealTimeWidget>
#
Social Image Title Widget
Shows an image in the style of a social feed post.
<SocialImageTitle></SocialImageTitle>
#
Social Post Title Widget
Shows a social post with text and an image.
<SocialPostTitle></SocialPostTitle>
#
Stacked Bar Widget
Features a tab component with stacked bar charts representing multiple data sources for quick comparison.
<StackedBarWidget></StackedBarWidget>
#
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.
<StatTile></StatTile>
#
Table Basic Widget
Features a basic table layout.
<TableBasicWidget></TableBasicWidget>
#
Table Widget
This is another variation of Table Basic Widget
.
<TableWidget></TableWidget>
#
Todo List Widget
Show todo-list items with checkboxes.
<TodoListWidget></TodoListWidget>
#
Weather Widget
Shows weekly weather data together with animated weather icons from Skycons.
<WeatherWidget></WeatherWidget>
#
Weekly Sales Widget
This is also another mini widget showing weekly sales data.
<WeeklySalesWidget></WeeklySalesWidget>