### 外观和感觉材料设计样式

**Inhaltsverzeichnis**

1. [Funktionsumfang](#1-funktionsumfang)
3. [Installation](#3-installation)
4. [Anleitung](#4-anleitung)
5. [Changelog](#5-changelog)
6. [Sonstiges](#6-sonstiges)


![Beispiel 1280x0720 Main](docs/MD_1280_1280x0720_Main.png?raw=true "Beispiel 1280x0720 Main")


### 1. Funktionsumfang
In oncloud.vis gestaltete Views können mit diesen CCS Anweisungen so dargestellt werden, dass sie ähnlich dem  Look & Feel des Material Design Styles von Google funktionieren. Dazu gehören:

* 应用程序栏
* 顶部导航（标签），底部导航，左侧和右侧导航（侧面板）
* 卡片和瓷砖
* 响应式设计（Grid, 13er/52er/156er Raster）
* 表，输入，标签，状​​态......

视频 [Demo-Film](docs/MaterialDesign4ioBroker.mp4) 


Beispiele: 1280 x 0720
* [Beispiel 1280x0720 Main](docs/MD_1280_1280x0720_Main.png?raw=true "Beispiel 1280x0720 Main")
* [Beispiel 1280x0720 Wohnzimmer](docs/MD_1280_1280x0720_WZ.png?raw=true "Beispiel 1280x0720 Wohnzimmer")
* [Beispiel 1280x0720 Demo Cards](docs/MD_1280_1280x0720_Demo_Cards.png?raw=true "Beispiel 1280x0720 Demo Cards")
* [Beispiel 1280x0720 Demo Labels](docs/MD_1280_1280x0720_Demo_Labels.png?raw=true "Beispiel 1280x0720 Demo Labels")
* [Beispiel 1280x0720 Demo Inputs](docs/MD_1280_1280x0720_Demo_Inputs.png?raw=true "Beispiel 1280x0720 Demo Inputs")

Beispiele: 0720 x 1280
* [Beispiel 0720x1280 Wohnzimmer](docs/MD_1280_0720x1280_WZ.png?raw=true "Beispiel 0720x1280 Wohnzimmer")
* [Beispiel 0720x1280 Demo Inputs](docs/MD_1280_0720x1280_Demo_Inputs.png?raw=true "Beispiel 0720x1280 Demo Inputs")


### 3. Installation
Keine. Die CSS Anweisungen müssen lediglich in einem ioBroker.vis Projekt unter "CSS / Projekt" eingefügt werden, die paar Zeilen Script unter "Skript". Beides am besten aus dem [Demo-Projekt]("ioBroker projects/MD_Demo.zip") entnehmen.


### 4. Anleitung

Siehe Dokument [Anleitung](docs/anleitung.pdf)

Beispiel-Projekte befinden sich im Ordner "ioBroker projects", einmal ein [Demo-Projekt]("ioBroker projects/MD_Demo.zip"), welches den Umfang zeigt und einmal ein [Simple-Projekt]("ioBroker projects/MD_Simple.zip"), welches als Basis für eigene vis-Projekte verwendet werden kann. Beide Projekte (ZIP-Dateien) lassen sich in ioBroker.vis importieren.

### 5. Changelog
V1.8 10.01.2018
Siehe [ChangeLog](./changelog.md).


### 6. Sonstiges


:copyright:2017ff Uhula, see [MIT license](./license.md).