Skip to content

Commit 17cee8d

Browse files
woothuwoothu
committed
docs: added widget docs
1 parent 5e414ed commit 17cee8d

File tree

8 files changed

+131
-0
lines changed

8 files changed

+131
-0
lines changed

‎src/components/Widgets/Widget01.md

Lines 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

Lines 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

Lines 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

Lines 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

Lines 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

Lines 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

Lines 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

Lines 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)