ioBroker Material Design Widgets are based on Google's material design guidelines. The adapter uses the following libraries:
- Google material components for the web
- Vuetify
- chartjs
- round-slider from thomasloven
- Material Design Icons
provided by iobroker.click, thanks to bluefox and iobroker.
If you have questions about the individual widgets, then first look at the topics of the individual widgets
https://developer.mozilla.org/en-US/docs/Web/API/Navigator/vibrate
not working at the moment, needs to be implemneted by app, see https://github.com/ioBroker/ioBroker.vis.cordova
Screenshot | Description |
---|---|
Some of the widgets support Material Design Icons library. You can pic up an icon from the list above or open the image picker by clicking the button on the right of the input field. Image colors only applies to the material design icons, not to an image! |
Settings that are not listed in the table below are self-explanatory.
Settings that are not listed in the table below are self-explanatory.
Settings that are not listed in the table below are self-explanatory.
Settings that are not listed in the table below are self-explanatory.
Top App Bar with Navigation Drawer can be combined with the view in widget 8.
Take a look at the Material Design Widgets example project to understand how it works.
Screenshot | Setting | Description |
---|---|---|
Object ID | must be set to a datapoint from typ number. For example this datapoint can be used by view in widget 8 | |
show index of navigation items | shows the index of navigation before the item label. This number can be used in view in widget 8 to define the view that should be shown if the item is selected | |
count of navigation items | Define the count of the navigations items |
Settings that are not listed in the table below are self-explanatory.
TODO
TODO
Settings that are not listed in the table below are self-explanatory.
Screenshot | Setting | Description |
---|---|---|
adapter instance | Instance for the sql or history adapter | |
aggregation | link | |
max. number of data points to be displayed | Number of maximum data points to display | |
time interval between the data points in [s] | Optional setting, overrides the 'count' setting. Distance between the individual data points in seconds. For example, if you want to display data points every minute, you have to enter 60 here |
|
controlling time interval using object | Id of a datapoint to change the time interval of the chart. If the datapoint is from type 'string' it must contain one of the linked values If the datapoint is from type 'number', it must contain the starting timestamp of the graph. For example, you can use a button here to change the display of the chart during runtime |
|
boolean object for update | Id of adatapoint to trigger a manual refresh of the chart. For example, you can use a button here to refresh the chart during runtime |
|
time formats of x-axis | Change the time format of the X-axis. Time formats must be entered for all time units, the following time units are permitted. Approved time formats must be entered according to the moment.js library, see link |
|
tooltip time formats | Change the time format of the tooltip. Time formats must be entered for all time units, the following time units are permitted. Approved time formats must be entered according to the moment.js library, see link |
Property | Description | Type | Values |
---|---|---|---|
axisLabels | axis label of graph | Array | numbers or string |
graphs | data of graphs | array[graph] | see graph |
Property | Description | Type | Values |
---|---|---|---|
data | data of graph or data with timestamp | Array[numbers] | Array[values with timestamp] | number |
type | type of graph | string | 'line', 'bar' |
legendText | text of legend | string | |
displayOrder | overlay order of graph | number | 1, 2, ... |
color | color of graph | color | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
use_gradient_color | use gradient color | boolean | false, true |
gradient_color | gradient color array | array[gradientColor] | [ { value: -20, color: '#7d3c98' }, { value: 0, color: '#2874a6' } ] |
tooltip_title | title of tooltip | string | |
tooltip_text | ovveride text of tooltip | string | |
tooltip_MinDigits | max decimals of tooltip value | number | 0, 1, 2, ... |
tooltip_MaxDigits | max decimals of tooltip value | number | 0, 1, 2, ... |
tooltip_AppendText | append text to tooltip value | string | |
datalabel_show | show data labels for graph | string | boolean | false, true, auto |
datalabel_anchor | anchor of data labels | string | center, start, end |
datalabel_align | position of the data label relative to the anchor point | string | left, start, center, end, right, top, bottom |
datalabel_offset | distance (in pixels) to pull the data label away from the anchor point | number | 0, 1, 2, ... |
datalabel_text_align | text aligment of the data label | string | left, start, center, end, right |
datalabel_rotation | clockwise rotation angle (in degrees) of the data label | number | 0, 1, 2, ... |
datalabel_steps | show data label every x step | number | 0, 1, 2, ... |
datalabel_minDigits | minimum decimals of data labels | number | 0, 1, 2, ... |
datalabel_maxDigits | maximum decimals of data labels | number | 0, 1, 2, ... |
datalabel_append | append text to data label | string | |
datalabel_color | data label color | color | array[colors] | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
datalabel_fontFamily | data label font family | string | |
datalabel_fontSize | data label font size | number | 1, 2, 5, ... |
datalabel_backgroundColor | data label background color | color | array[colors] | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
datalabel_borderColor | data label border color | color | array[colors] | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
datalabel_borderWidth | data label border width | number | 1, 2, 5, ... |
datalabel_borderRadius | data label border radius | number | 1, 2, 5, ... |
Property | Description | Type | Values |
---|---|---|---|
line_pointStyle | point style of line | string | circle, cross, crossRot, dash, line, rect, rectRounded, rectRot, star, triangle |
line_pointSize | point size of line | number | 1, 2, 3, ... |
line_pointSizeHover | point size of line | number | 1, 2, 3, ... |
line_PointColor | color of line point | color | array[colors] | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
line_PointColorBorder | border color of line point | color | array[colors] | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
line_PointColorHover | hover color of line point | color | array[colors] | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
line_PointColorBorderHover | border hover color of line point | color | array[colors] | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
line_spanGaps | draw lines if data has gaps | boolean | false, true |
line_steppedLine | enable stepped line | boolean | false, true |
line_Tension | smothness of line | number | 0 - 1 |
line_Thickness | thikness of line | number | 1, 2, 5, ... |
line_UseFillColor | use fill color under line | boolean | false, true |
line_FillColor | fill color under line | color | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
use_line_gradient_fill_color | use gradient fill color | boolean | false, true |
line_gradient_fill_color | gradient color array | array[gradientColor] | [ { value: -20, color: '#7d3c98' }, { value: 0, color: '#2874a6' } ] |
line_FillBetweenLines | fill color to next / previous line | string | '+1', '-1', '+2', ... |
Property | Description | Type | Values |
---|---|---|---|
barIsStacked | stacked bar | boolean | false, true |
barStackId | id of stack. Bar that should combine to a stack must have the same id | number | 1, 2, 5, ... |
barColorHover | hover color of bar | color | array[colors] | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
barBorderColor | border color of bar | color | array[colors] | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
barBorderWidth | thikness of bar border | number | 1, 2, 5, ... |
barBorderColorHover | border hover color of bar | color | array[colors] | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
barBorderWidthHover | hover thikness of bar border | number | 1, 2, 5, ... |
Property | Description | Type | Values |
---|---|---|---|
yAxis_id | id of y-axis. If you would like to use a common y-axis for multipl graph data, use the same id. | number | 1, 2, 5, ... |
yAxis_position | position of y-axis | string | left, right |
yAxis_show | show y-axis | boolean | false, true |
yAxis_title_text | y-axis title | string | |
yAxis_title_color | override y-axis title color | color | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
yAxis_title_fontFamily | override y-axis title font family | string | |
yAxis_title_fontSize | override y-axis title font size | number | 1, 2, 5, ... |
yAxis_min | minimum value of y-axis | number | 1, 2, 5, ... |
yAxis_max | maximum value of y-axis | number | 1, 2, 5, ... |
yAxis_step | steps of y-axis | number | 1, 2, 5, ... |
yAxis_minimumDigits | y-axis minimum number of decimal places | number | 1, 2, 5, ... |
yAxis_maximumDigits | y-axis maximum number of decimal places | number | 1, 2, 5, ... |
yAxis_maxSteps | maximum steps of y-axis | number | 1, 2, 5, ... |
yAxis_distance | override y-axis value distance to axis | number | 1, 2, 5, ... |
yAxis_appendix | append text to y-axis value | string | |
yAxis_color | override y-axis value color | color | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
yAxis_fontFamily | override y-axis value font family | string | |
yAxis_fontSize | override y-axis value font size | number | 1, 2, 5, ... |
yAxis_zeroLineWidth | width of y-axis zero line | number | 0.3, 1.5, 4, ... |
yAxis_zeroLineColor | y-axis zero line color | color | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
yAxis_gridLines_show | show y-axis grid lines | boolean | false, true |
yAxis_gridLines_color | color of y-axis grid lines | color | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
yAxis_gridLines_lineWidth | width of grid lines | number | 0 - 1 |
yAxis_gridLines_border_show | show border of y-axis grid lines | boolean | false, true |
yAxis_gridLines_ticks_show | show y-axis grid interval ticks | boolean | false, true |
yAxis_gridLines_ticks_length | length of y-axis grid ticks | number | 1, 2, 5, ... |
Property | Description | Type | Values |
---|---|---|---|
value | value where color should be applied | number | 1, 2, 5, ... |
color | color for value | color | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
JSON Chart supports data that have a timestamp. To use this the data array must have values for timestamp (x-axis value) and value (y-axis value).
Property | Description | Type | Values |
---|---|---|---|
t | timestamp - xAxis value | number | 1, 2, 5, ... |
y | value for timestamp - yAxis value | number | 1, 2, 5, ... |
Property | Description | Type | Values |
---|---|---|---|
xAxis_bounds | scale boundary strategy 'data': makes sure data are fully visible, labels outside are removed 'ticks': makes sure ticks are fully visible, data outside are truncated |
String | data, ticks |
xAxis_timeFormats | time formats for the x-axis | Object | Time formats must be entered for all time units, the following time units are permitted. Approved time formats must be entered according to the moment.js library, see link |
xAxis_tooltip_timeFormats | time formats for the x-axis | String | Approved time formats must be entered according to the moment.js library, see link |
Input data must be a json array of objects, example:
[
{
"img": "/vis.0/myImages/erlebnis_50.png",
"name": "Empire",
"betriebszeit": "4h 06m",
"funk": "5G",
"ip": "10.0.0.1"
},
{
"img": "/vis.0/myImages/erlebnis_100.png",
"name": "Handy",
"betriebszeit": "13m",
"funk": "5G",
"ip": "10.0.0.2"
},
{
"img": "/vis.0/myImages/erlebnis_100.png",
"name": "Harmony Hub - Wohnzimmer",
"betriebszeit": "18T 07h 21m",
"funk": "2G",
"ip": "10.0.0.3"
},
{
"img": "/vis.0/myImages/erlebnis_25.png",
"name": "MusicCast - Esszimmer (WX-030)",
"betriebszeit": "1h 57m",
"funk": "2G",
"ip": "10.0.0.4"
},
{
"img": "/vis.0/myImages/erlebnis_75.png",
"name": "MusicCast - K�che (ISX-18D)",
"betriebszeit": "4h 10m",
"funk": "2G",
"ip": "10.0.0.5"
}
]
Screenshot | Setting | Description |
---|---|---|
switch | Datapoint from type string with input data as shown above | |
data as JSON | Optional, input data as shown above if no oid datapoint is set | |
colType[x] | If image is selected, object property must have the path to the image (see above) | |
prefix[x] | Prefix for object property, internal object binding (see below) and html can be used | |
suffix[x] | Suffix for object property, internal object binding (see below) and html can be used | |
object name for sorting[x] | Here you can define an other object property that should be used for sorting. |
prefix & suffix supports table internal object binding -> you can access other properties of object by using
#[obj.'propertyName']
Example see see above.
Working Widget Example can be found
There are two widgets - Masonry Views and Grid Views - with which it is possible to create a repsonsive layout (a layout for desktop, tablet and mobile). Both Widgets has multiple view in widget
integrated.
Masonry Views has multiple view in widget
integrated, that will be ordered automatically depending of the width of the widget. With this widget it is possible to create a responsive layout (one layout for desktop, tablet and mobil).
Masonry views are especially useful if the views included have different heights.
Take a look at the Material Design Widgets example project to understand how it works.
Grid Views has multiple view in widget
integrated, that will be ordered automatically depending of the width of the widget. With this widget it is possible to create a responsive layout (one layout for desktop, tablet and mobil).
Grid views are especially useful if the views included have the same heights.
The Grid View widget has 12 columns in total. If you want a view to have a width of 4 columns, you have to set column span to 4 in the corresponding view[x]
Take a look at the Material Design Widgets example project to understand how it works.
Alerts widget can be used e.g. to display messages in the VIS, like it works with the pushover adapter, but directly in the VIS.
The Alerts widget requires a JSON string as object, which must be structured as follows:
[
{
"text": "we have a new message",
"backgroundColor": "",
"borderColor": "darkred",
"icon": "message-alert-outline",
"iconColor": "darkred",
"fontColor": "blue"
}, {
"text": "we have a new message",
"backgroundColor": "#e6b0aa",
"borderColor": "green",
"icon": "/vis/img/bulb_on.png",
"iconColor": "green",
"fontColor": "gold"
}, {
"text": "we have a new message",
"backgroundColor": "",
"borderColor": "gold",
"icon": "alert-outline",
"iconColor": "gold",
"fontColor": ""
}
]
With the following script you can send easy messages to datapoint that is used by the Alerts Widget. The script must put into global scripts. Then it is possible to send message with the following command
materialDesignWidgets.sendTo('datapoint_id', 'message', 'color');
var materialDesignWidgets = {};
materialDesignWidgets.sendTo = function (id, text, backgroundColor = '', borderColor = '', icon = '', iconColor = '', fontColor = '') {
let json = getState(id).val;
if (json) {
try {
json = JSON.parse(json);
} catch (e) {
json = [];
console.warn('Wert ist kein JSON string! Wert wird ersetzt!');
}
} else {
json = [];
}
json.push(
{
text: text,
backgroundColor: backgroundColor,
borderColor: borderColor,
icon: icon,
iconColor: iconColor,
fontColor: fontColor
}
)
setState(id, JSON.stringify(json), true);
}
The Calendar widget requires a JSON string as object, which must be structured as follows:
[
{
"name": "Event",
"color": "#e74c3c",
"colorText": "#FFFFFF",
"start": "2020-01-24",
"end": "2020-01-26"
},
{
"name": "Meeting",
"color": "#717d7e",
"colorText": "#FFFFFF",
"start": "2020-03-23 16:00",
"end": "2020-03-24 17:15"
}
]
Only hex and rgba can be used as colors!
Settings that are not listed in the table below are self-explanatory.
If you want to use the widget with the ical adapter, you can use the following script to convert the ical object to work with the widget.
// momentjs is required as dependecies in javascript adapter
const moment = require("moment");
var instances = $(`[id=ical.*.data.table]`);
instances.on(ical2CalendarWidget);
// remove this, if you know to use your own datapoint
let datapointId = 'materialdesignwidgets.calendar.ical2calendar'
createState(datapointId, "[]", {
read: true,
write: false,
desc: "JSON String for Calendar Widget",
type: "string",
def: "[]"
});
function ical2CalendarWidget() {
try {
let calList = [];
for (var inst = 0; inst <= instances.length - 1; inst++) {
let icalObj = getState(instances[inst]).val;
if (icalObj) {
for (var i = 0; i <= icalObj.length - 1; i++) {
let item = icalObj[i];
// extract calendar color
let calendarName = item._class.split(' ')[0].replace('ical_', '');
let startTime = moment(item._date);
let endTime = moment(item._end);
let start = startTime.format("YYYY-MM-DD HH:mm");
let end = endTime.format("YYYY-MM-DD HH:mm");
if (startTime.format('HH:mm') === '00:00' && endTime.format('HH:mm') === '00:00') {
// is full-day event
if (endTime.diff(startTime, 'hours') === 24) {
// full-day event, one day
start = startTime.format("YYYY-MM-DD");
end = startTime.format("YYYY-MM-DD");
} else {
// full-day event, multiple days
start = startTime.format("YYYY-MM-DD");
end = endTime.format("YYYY-MM-DD");
}
}
// create object for calendar widget
calList.push({
name: item.event,
color: getMyCalendarColor(calendarName),
colorText: getMyCalendarTextColor(calendarName),
start: start,
end: end
})
}
function getMyCalendarColor(calendarName) {
// assign colors via the calendar names, use calendar name as set in ical
if (calendarName === 'calendar1') {
return '#FF0000';
} else if (calendarName === 'calendar2') {
return '#44739e'
} else if (calendarName === 'calendar3') {
return '#32a852'
}
}
function getMyCalendarTextColor(calendarName) {
// assign colors via the calendar names, use calendar name as set in ical
if (calendarName === 'calendar1') {
return '#FFFFFF';
} else if (calendarName === 'calendar2') {
return '#FFFFFF'
} else if (calendarName === 'calendar3') {
return '#FFFFFF'
}
}
}
// Enter the destination data point that is to be used as object ID in the widget
setState(datapointId, JSON.stringify(calList), true);
}
} catch (e) {
console.error(`ical2MaterialDesignCalendarWidget: message: ${e.message}, stack: ${e.stack}`);
}
}
ical2CalendarWidget();
- (Scrounger): List Widget: subscribe for nested oids and bindings bug fix
- (Scrounger): Multi State Button Widgets added
- (Scrounger): checkbox: lock option added
- (Scrounger): switch: lock option added
- (Scrounger): bar & pie chart: option for distance between legends points added
- (Scrounger): bar, pie & json chart: tooltip title and value override options added
- (Scrounger): pie chart: orientation change bug fix
- (Scrounger): json & line history chart: stepped line option added
- (Scrounger): table: option for fixed table headline added
- (Scrounger): charts: newline bug fixed
- (Scrounger): charts: tooltip decimal places bug fix
- Input, Select, Autocomplete: default input controll buttons removed
- vuetify library updated to v2.2.26
- JSON Chart: auto mode to show values added
- Line History Chart: auto mode to show values added
- Bar Chart: auto mode to show values added
- Pie Chart: auto mode to show values added
- Button State: lock icon input field bug fix
- Select / AutoComplete Widget: Breaking Changes !!! separator for valuelist changed from comma to semicolon
- Pie Chart Widget: support for json string implemented
- Browser Edge: gradient color bug fix
- (Scrounger): css file bug fixes
- (Scrounger): Material Design Icons library updated to v5.1.45
- (Scrounger): Select & Autocomplete Widget: color option for menu items added
- (Scrounger): setState type bug fixes
- (Scrounger): small bug fixes
- (Scrounger): JSON Chart: error handling added
- (Scrounger): IconList: error handling added
- (Scrounger): Line History chart: debug mode & error handling added
- (Scrounger): Select Widget: handling for object with mulitstate added
- (Scrounger): Autocomplete Widget: handling for object with mulitstate added
- (Scrounger): bug fixes
- (Scrounger): deprecated Widgets Slider, TopAppBar, Select, Column View removed
- (Scrounger): JSON Chart Widget added
- (Scrounger): Line Chart Widget: starttime by object added
- (Scrounger): Bar Chart Widget: support for json string oid added
- (Scrounger): Chart Widget: min / max decimals for axis, labels and tooltip added
- (Scrounger): Masonry View Widget: sort order added
- (Scrounger): Grid View Widget: sort order added
- (Scrounger): new Dialog Widget added
- (Scrounger): bug fixes
- (Scrounger): IconListWidget: button layout options added
- (Scrounger): IconListWidget: lock option for toggle and state function added
- (Scrounger): Alert Widget: visibility depending on resoltuion added
- (Scrounger): Button Widgets: lock option for toggle and state button added
- (Scrounger): Material Design Icon Widget added
- (Scrounger): bug fixes
- (Scrounger): List Widget: binding bug fix
- (Scrounger): Select Widget: number bug fix
- (Scrounger): IconList Widget: object id for json string added, html input field removed from editor
- (Scrounger): Input Widget: clear & null bug fix
- (Scrounger): bug fixes
- (Scrounger): Buttons Toggle: option for push function added
- (Scrounger): IconList Widget added
- (Scrounger): Alerts Widget: show dummy message in Editor
- (Scrounger): Grid Views Widget added
- (Scrounger): List Widget: color option for switch added
- (Scrounger): List Widget: dynamic generate item using json string
- (Scrounger): Masonry Views Widget: visible condition added
- (Scrounger): Calendar Widget added
- (Scrounger): translation added
- (Scrounger): VIS Editor: Link to Forum widget threads added
- (Scrounger): bug fixes
- (Scrounger): new Select Widget added
- (Scrounger): Autocomplete Widget added
- (Scrounger): Alerts Widget added
- (Scrounger): use of Material Design Icons as images added
- (Scrounger): Perfomrance optimized
- (Scrounger): Input Widget added
- (Scrounger): Masonry Views Widget: settings options for mobile phone and tablet added
- (Scrounger): Masonry Views Widget: another chrome bug fix, option for distance between views added
- (Scrounger): Round Slider: vibrate on mobil devices added
- (Scrounger): bug fixes
- (Scrounger): Editor translation bug fix
- (Scrounger): Masonry Views Widget: alignment bug fix for chrome
- (Scrounger): Line History Chart Widget: layout option for line values added
- (Bluefox): Russian translation revised
- (Scrounger): Masonry Views Widget added
- (Scrounger): Select Widget: background color bug fix
- (Scrounger): Column Views Widget added
- (Scrounger): Button Widgets: icon height bug fix
- (Scrounger): Vuetify API bug fix
- (Scrounger): Chart Widgets: localization added
- (Scrounger): Line History Chart Widget: color options for each y-axis added
- (Scrounger): Line History Chart Widget: x-axis boundary options added
- (Scrounger): Line History Chart Widget: x-axis scaling bug fix
- (Scrounger): TopAppBar Widget:
view in widget 8
removed -> old TopAppBar Widget will be removed in version 0.3.x - (Scrounger): bug fixes
- (Scrounger): library material-components-web updated to v4.0.0
- (Scrounger): Table: support for objects added
- (Scrounger): List: layout checkbox disabled added
- (Scrounger): vuetify slider added -> old slider will be removed in version 0.3.x
- (Scrounger): vuetify library v2.1.15 added
- (Scrounger): bug fixes
- (Scrounger): translations added
- (Scrounger): select Widget: color options added
- (Scrounger): slider Widget: color options added
- (Scrounger): bug fixes
- (Scrounger): List Widget: types switch readonly, checkbox readonly & button toggle readonly added
- (Scrounger): Line History Chart Widget: bug fix for hide yaxis by legend click if common axis is set
- (Scrounger): Line History Chart Widget: option to append text to yAxis values added
- (Scrounger): Switch Widget: color options added
- (Scrounger): chartjs lib updated to v2.9.3
- (Scrounger): round-slider: lib updated to v0.3.7
- (Scrounger): Table Widget: wordwrap & width option added
- (Scrounger): Chart Widgets: option for background color of diagram area added
- (Scrounger): Round Slider Widget bug fixes
- (Scrounger): Line History Chart Widget: null value bug fix
- (Scrounger): Line History Chart Widget: tooltip bug fix
- (Scrounger): Line History Chart Widget: editor translation improved
- (Scrounger): Round Slider Widget added
- (Scrounger): Icon Button Adition Widget added
- (Scrounger): Button Adition Widget added
- (Scrounger): Line History Chart Widget added
- (Scrounger): Table Widget added
- (Scrounger): Dialog iFrame Widget added
- (Scrounger): Dialog View Widget added
- (Scrounger): Select Widget added
- (Scrounger): colorSchemes for Charts added
- (Scrounger): bug fixes
- (Scrounger): bar chart added
- (Scrounger): pie chart added
- (Scrounger): bug fixes
- (Scrounger): list: right label option added
- (Scrounger): slider: value text option for lees or greather than added
- (Scrounger): switch: support for non boolean values added
- (Scrounger): checkbox: support for non boolean values added
- (Scrounger): buttons: image position option added
- (Scrounger): toggle buttons: support for non boolean values added
- (Scrounger): topAppBar: z-Index added
- (Scrounger): haptic feedback (vibration) option for mobil browser added
- (Scrounger): editor text fields changed to html
- (Scrounger): mdc-typography font styles added
- (Scrounger): bug fixes
- (Scrounger): bug fixes
- (Scrounger): Top App Bar Submenu added
- (Scrounger): List added
- (Scrounger): Button vertical State, Link, Nav added
- (Scrounger): Icon Button State, Link, Nav added
- (Scrounger): initialize slider bug fixes
- (Scrounger): moved hard coded styling options to css
- (Scrounger): styling options extended
- (Scrounger): bug fixes
- (Scrounger): Top App Bar Layouts added
- (Scrounger): Top App Bar customizing options added
- (Scrounger): Top App Bar Navigation Drawer backdrop layout added
- (Scrounger): Button State added
- (Scrounger): Button Link added
- (Scrounger): Top App Bar with Navigation Drawer added
- (Scrounger): Checkbox added
- (Scrounger): bug fixes
- (Scrounger): icon button Toggle added
- (Scrounger): color pressed for buttons added
- (Scrounger): Slider bug fix & label for value <= min / >= max added
- (Scrounger): translation added
- (Scrounger): cards added
- (Scrounger): progress added
- (Scrounger): slider vertical added
- (Scrounger): switch added
- (Scrounger): button toggle added
- (Scrounger) initial release
MIT License
Copyright (c) 2020 Scrounger [email protected]
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.