Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 17cee8d

Browse filesBrowse files
woothuwoothu
committed
docs: added widget docs
1 parent 5e414ed commit 17cee8d
Copy full SHA for 17cee8d

File tree

Expand file treeCollapse file tree

8 files changed

+131
-0
lines changed
Filter options
Expand file treeCollapse file tree

8 files changed

+131
-0
lines changed

‎src/components/Widgets/Widget01.md

Copy file name to clipboard
+17Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
### Widget01
2+
3+
This widget style can be configured by changing variant property, which name is one of standard bootstrap classes (i.e. success, info, warning, danger). If you want to change background color of widget instead of changing progress bar style add background- prefix to class (i.e. 'background-success').
4+
5+
Value is the procentage value of displayed progress-bar.
6+
7+
prop | default
8+
--- | ---
9+
variant | `''`
10+
value | `25`
11+
header| `'header:string'`
12+
text | `'text:string'`
13+
footer | `'footer:string'`
14+
15+
#### Example:
16+
> <cui-widget01 header="12.124" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
17+
> variant="info" :value="30"/>

‎src/components/Widgets/Widget02.md

Copy file name to clipboard
+14Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
### Widget02
2+
This widget can be display with or without link. If you want to display link set showLink property to true.
3+
4+
prop | default
5+
--- | ---
6+
iconClasses | `'fa fa-cogs bg-primary'`
7+
showLink | `true`
8+
header| `'header:string'`
9+
text | `'text:string'`
10+
link | `'#'`
11+
12+
#### Example:
13+
> <cui-widget02 header="$1.999,50" iconClasses="fa fa-cogs bg-primary" text="Income"
14+
:showLink="true" link="#"/>

‎src/components/Widgets/Widget03.md

Copy file name to clipboard
+11Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
### Widget03
2+
This widget style depends classes attached to iconClasses property. If you want to get diffrent size of icon block just add padding utility classes (i.e. 'px-5').
3+
4+
prop | default
5+
--- | ---
6+
iconClasses | `'fa fa-cogs bg-primary'`
7+
header| `'header:string'`
8+
text | `'text:string'`
9+
10+
#### Example:
11+
> <cui-widget03 header="$1.999,50" text="Income" iconClasses="fa fa-cogs bg-primary px-5"/>

‎src/components/Widgets/Widget04.md

Copy file name to clipboard
+15Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
### Widget04
2+
This widget style depends on type property which defines which social widget background color and icon will be used (i.e facebook, twitter, linkedin, google-plus). Inside component there is default slot for placing data chart.
3+
4+
prop | default
5+
--- | ---
6+
type | `facebook`
7+
rightHeader | `'rightHeader:string'`
8+
rightFooter | `'rightFooter:string'`
9+
leftHeader | `'leftHeader:string'`
10+
leftFooter | `'leftFooter:string'`
11+
12+
13+
#### Example:
14+
> <cui-widget04 type="linkedin" rightHeader="500+" rightFooter="contracts"
15+
> leftHeader="292" leftFooter="feeds"/>

‎src/components/Widgets/Widget05.md

Copy file name to clipboard
+15Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
### Widget05
2+
3+
This widget style can be configured by changing variant property, which name is one of standard bootstrap classes (i.e. success, info, warning, danger). If you want to change background color of widget instead of changing progress bar style add background- prefix to class (i.e. 'background-success').
4+
5+
Value is the procentage value of displayed progress-bar.
6+
7+
prop | default
8+
--- | ---
9+
variant | `success`
10+
value | `30`
11+
iconClasses | `icon-people`
12+
header| `header:string`
13+
text | `text:string`
14+
15+
> <cui-widget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="background-warning"/>

‎src/components/Widgets/Widget06.md

Copy file name to clipboard
+21Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
### Widget06
2+
3+
This widget can style is defined by cardClasses. Inside component there is additional slot for chart (name="chart").
4+
5+
prop | default
6+
--- | ---
7+
cardClasses | `''`
8+
header| `header:string`
9+
text | `text:string`
10+
11+
> <cui-widget06 cardClasses="bg-primary" header="9.823" text="Members online">
12+
<b-dropdown class="float-right" variant="transparent p-0" right>
13+
<template slot="button-content">
14+
<i class="icon-settings"></i>
15+
</template>
16+
<b-dropdown-item>Action</b-dropdown-item>
17+
<b-dropdown-item>Another action</b-dropdown-item>
18+
<b-dropdown-item>Something else here...</b-dropdown-item>
19+
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
20+
</b-dropdown>
21+
</cui-widget06>

‎src/components/Widgets/Widget07.md

Copy file name to clipboard
+19Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
### Widget07
2+
3+
This widget can style is defined by cardClasses. Inside component there is default slot for additional data (i.e. chart).
4+
5+
prop | default
6+
--- | ---
7+
cardClasses | `'bg-primary'`
8+
rightHeader | `'rightHeader:string'`
9+
rightFooter | `'rightFooter:string'`
10+
leftHeader | `'leftHeader:string'`
11+
leftFooter | `'leftFooter:string'`
12+
13+
> <cui-widget07 rightHeader='SALE' rightFooter='Today 6:43 AM'
14+
leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
15+
<cui-simple-line-chart style="height:40px" chartId="cui-widget07_line1" label='Sales'
16+
:data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' />
17+
<cui-simple-bar-chart style="height:40px" chartId="cui-widget07_bar1" label='Sales'
18+
:data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'/>
19+
</cui-widget07>

‎src/components/Widgets/Widget08.md

Copy file name to clipboard
+19Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
### Widget08
2+
3+
This widget can style is defined by cardClasses. Inside component there is default slot for additional data (i.e. chart).
4+
5+
prop | default
6+
--- | ---
7+
cardClasses | `'bg-primary'`
8+
rightHeader | `'rightHeader:string'`
9+
rightFooter | `'rightFooter:string'`
10+
leftHeader | `'leftHeader:string'`
11+
leftFooter | `'leftFooter:string'`
12+
13+
> <cui-widget07 rightHeader='SALE' rightFooter='Today 6:43 AM'
14+
leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
15+
<cui-simple-line-chart style="height:40px" chartId="cui-widget07_line1" label='Sales'
16+
:data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' />
17+
<cui-simple-bar-chart style="height:40px" chartId="cui-widget07_bar1" label='Sales'
18+
:data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'/>
19+
</cui-widget07>

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.