Package Exports
- @forter/widget
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@forter/widget) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
fc-widget
An element by Forter
Usage
<script>
import '@forter/widget';
</script>
<fc-widget
widget-id="my-widget"
style="--fc-widget-secondary-kpi-color: var(--fc-red-500)"
main-title="Approval rate by payment method"
remark="Specified date range (optional) | By $"
remark-icon="forter"
kpi="99.87%"
secondary-kpi="0.13%"
kpi-remark="Total Approval Rate"
actions=[{"label":"View data by","id":"0","options":[{"label":"Show by number of TX","id":"0","selected":true},{"label":"Show by lala of TX","id":"1","selected":false},{"label":"Show by value of TX","id":"2","selected":false}]}]>
</fc-widget>Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
KPI |
KPI |
string |
"" | |
KPIIcon |
kpi-icon |
TemplateResult | null |
||
KPIRemark |
kpi-remark |
string |
"" | |
actions |
actions |
any[] |
||
fetching |
fetching |
boolean |
false | If the element is fetching new data |
mainTitle |
main-title |
string |
"" | |
remark |
remark |
string |
"" | |
remarkIcon |
remark-icon |
TemplateResult | null |
||
secondaryKPI |
secondary-kpi |
TemplateResult | null |
||
type |
type |
string |
||
widgetId |
widget-id |
string |
"" |
Events
| Event | Description |
|---|---|
action |
menu action click. |
CSS Custom Properties
| Property | Description |
|---|---|
--fc-widget-disabled-color |
color. |