vimbo library

Angular2 UI library Last updated:6/28/2016 8:18:34 PM

###Components

• Calendar
• WorldMap
• ColorPicker
• Carousel
• DonutChart
• HighlightMatch
• MultiSelect
• NumericUpDown
• DataGrid
• TimeChart
• BreadCrumb
• Menu

####Future Components Planned

• BarChart
• DatePicker (using calendar)
• Menu
• Dialogservice
• TreeChart

world-map

Example

<calendar></calendar>

Note* alpha stage

world-map

Example

<world-map [pushpins]="favoriteSites"></world-map>

where pushpins is bounded to an array of objects that have three required properties: "latitude","longitude","name". Any additional properties will displayed when the user hovers over the pushpin

color-picker

Example

<colorpicker [colors]="myColors" (selected)="colormebaby($event)"></colorpicker>

where

this.myColors=[];

this.myColors.push("#03A9F4");

this.myColors.push("#009688");

highlight-match

Example

<match matchon="moon">{{Message}}</match>

where Message contains text that may have words we want to highlight

multi-select

Example <multi-select name="My Sports" [datasource]="sports" (closed)="multiselectclosed($event)"></multi-select>

where

sports:any[]=[{'name':'Swimming'},{'name':'Running'},{'name':'Cycling'},{'name':'Salsa Dancing'}];

and

public multiselectclosed(data:any):void

{

alert(JSON.stringify(this.sports));

}

donut-chart

Example

<donut-chart [data]="barData"></donut-chart>

where data is bound to an array of items that have name and value poperties.

barData:any[]= [

{name: "Locke", value: 4},

{name: "Reyes", value: 8},

{name: "Ford", value: 15}]

carousel

Example

<carousel [displayNumber]="1" [width]="600">

<carousel-item>insert picture, button, whatever here</carousel-item>

<carousel-item>insert picture, button, whatever here</carousel-item>

</carousel>

numeric-up-down

Example

<numeric-up-down [value]="myAge"></numeric-up-down>

where value is bound to a numeric property (MyAge in this example)

data-grid

Example <data-grid [datasource]="storeSales" [configuration]="storeSalesConfiguration" ></data-grid>

Where datasource property is bounded to any array of objects. and the configuration property is bounded to an object that specifies the columns.

For example datasource could be

  [{
    "store": "Boston",
    "salesPerson":"Cathy Castillo",
    "netSales": 4000000000,
    "orders": 5
  },
  {
    "store": "Boston",
    "salesPerson":"Dianna Frick",
    "netSales": 4000000000,
    "orders": 5
  }]

and to define that we want three columns and what is the corresponding property is we may define it as follows

{
"groups":"store",
"columns":[
    { "text": "Sales Person", "datafield": "salesPerson" },
    { "text": "Sales($)", "datafield": "netSales","aggregate":"SUM"  },
    { "text": "Orders(#)", "datafield": "orders","aggregate":"SUM" }  

}

Note* grouping has not been implemented yet

treeview

Example

<treeview [data]="furnishings" (selected)="nodeSelected($event)"></treeview>

where data is bounded to hierarchical data. The Data should have text and items properties. An Example of Data that conforms is below:

[
    { text: "Furniture", items: [
        { text: "Tables & Chairs" },
        { text: "Sofas" },
        { text: "Occasional Furniture" }
    ] },
    { text: "Decor", items: [
        { text: "Bed Linen" },
        { text: "Curtains & Blinds" },
        { text: "Carpets" }
    ] }
 ];

When the user clicks on a node the selected event will raised. Wire up any event handlers on the control.

timechart

Example

<timechart #tc [height]="400" width="800" ></timechart>

where in the code you add the series as below then call the draw function,

this.myTimeChart.addSeries(this.myData,{"name":"San Diego","dateField":"As of Date","valueField":"San Diego","color":"#BEDE6F"});

this.myTimeChart.addSeries(this.myData,{"name":"Miami","dateField":"As of Date","valueField":"Miami","color":"#23BDA5"});

this.myTimeChart.draw();

A legend will be added that is draggable.

bread-crumb

Example

<bread-crumb><crumb>Home</crumb><crumb>Account</crumb></bread-crumb>

which will display the hiearchy in a slick fashion

menu

Example

<menu name="main Characters">

<menu-item>Cersi</menu-item>

<menu-item>Sansa</menu-item>

</menu>

which will display the menu items once a user selects the menu