Suche Ideen für ein Auswahlmenü

[mguenther]

Hallo Zusammen,
ich habe 4 View-"Unterseiten" und suche ein Auswahlmenü, um mir immer eine Unterseite anzeigen zu lassen. Aktuell versuche ich mich mit dem Slider-Tab Widget. Gibts sowas auch in "modern" und hübsch?

Danke
Marcus

[sigi234]

@mguenther

Material Design Widgets

[mguenther]

@sigi234
und was genau da? da habe ich auch schon geschaut, aber entweder war ich zu blöd oder hab mir das falsche angeschaut

[Glasfaser]

@mguenther

Material Design Widgets

Top App Bar

[mguenther]

@Glasfaser
das hatte ich, habs irgendwie nicht wirklich einbinden können. Ich schaus mir nochmal an...

[Glasfaser]

@mguenther
hier ist der Thread dazu !
Aber eigentlich ganz easy einzustellen .....

[mguenther]

@Glasfaser
da hatte ich mich eingelesen und es nicht hinbekommen... Ich habe 4 Newsfeed, die ich in eigenen Views habe, was nehme ich da? Muss ich mir noch nen Datenpunkt anlegen?

[Glasfaser]

@mguenther

Sie werden im Widget View in 8 ausgewählt :

Nimm mein Test-VIEW ist schon voreingestellt , brauchst nur dein View ändern auf die 4 Newsfeed

Spoiler

{
 "settings": {
   "style": {
     "background_class": "",
     "color": "",
     "background-clip": "padding-box",
     "background-size": "cover",
     "background-image": "url(/vis.0/Wohnen/hintergrund.jpg)"
   },
   "theme": "black-tie",
   "sizex": "1123",
   "sizey": "702",
   "gridSize": "10",
   "useBackground": false,
   "snapType": 2,
   "alwaysRender": false
 },
 "widgets": {
   "e00001": {
     "tpl": "tplStatefulContainerView8",
     "data": {
       "oid": "javascript.0._NEU.VIS.VIS06.Vis06-MaterialDesignMenü",
       "g_fixed": false,
       "g_visibility": false,
       "g_css_font_text": false,
       "g_css_background": false,
       "g_css_shadow_padding": false,
       "g_css_border": false,
       "g_gestures": false,
       "g_signals": false,
       "g_last_change": false,
       "visibility-cond": "==",
       "visibility-val": 1,
       "visibility-groups-action": "hide",
       "count": "3",
       "signals-cond-0": "==",
       "signals-val-0": true,
       "signals-icon-0": "/vis/signals/lowbattery.png",
       "signals-icon-size-0": 0,
       "signals-blink-0": false,
       "signals-horz-0": 0,
       "signals-vert-0": 0,
       "signals-hide-edit-0": false,
       "signals-cond-1": "==",
       "signals-val-1": true,
       "signals-icon-1": "/vis/signals/lowbattery.png",
       "signals-icon-size-1": 0,
       "signals-blink-1": false,
       "signals-horz-1": 0,
       "signals-vert-1": 0,
       "signals-hide-edit-1": false,
       "signals-cond-2": "==",
       "signals-val-2": true,
       "signals-icon-2": "/vis/signals/lowbattery.png",
       "signals-icon-size-2": 0,
       "signals-blink-2": false,
       "signals-horz-2": 0,
       "signals-vert-2": 0,
       "signals-hide-edit-2": false,
       "lc-type": "last-change",
       "lc-is-interval": true,
       "lc-is-moment": false,
       "lc-format": "",
       "lc-position-vert": "top",
       "lc-position-horz": "right",
       "lc-offset-vert": 0,
       "lc-offset-horz": 0,
       "lc-font-size": "12px",
       "lc-font-family": "",
       "lc-font-style": "",
       "lc-bkg-color": "",
       "lc-color": "",
       "lc-border-width": "0",
       "lc-border-style": "",
       "lc-border-color": "",
       "lc-border-radius": 10,
       "lc-zindex": 0,
       "contains_view_0": "Testview",
       "contains_view_1": "Batterie_Status",
       "contains_view_2": "Status_IP_Netzwerk",
       "contains_view_3": "Status_TR064",
       "contains_view_4": "",
       "contains_view_5": "",
       "contains_view_6": "",
       "contains_view_7": "",
       "contains_view_8": "",
       "contains_view_9": "",
       "contains_view_10": "",
       "contains_view_11": "",
       "contains_view_12": "",
       "contains_view_13": ""
     },
     "style": {
       "left": "0px",
       "top": "0px",
       "width": "1400px",
       "height": "800px"
     },
     "widgetSet": "basic"
   },
   "e00002": {
     "tpl": "tplVis-materialdesign-TopAppBar-Navigation",
     "data": {
       "oid": "javascript.0._NEU.VIS.VIS06.Vis06-MaterialDesignMenü",
       "g_fixed": true,
       "g_visibility": false,
       "g_css_font_text": true,
       "g_css_background": false,
       "g_css_shadow_padding": false,
       "g_css_border": true,
       "g_gestures": false,
       "g_signals": false,
       "g_last_change": false,
       "visibility-cond": "==",
       "visibility-val": 1,
       "visibility-groups-action": "hide",
       "count": "3",
       "submenuCounts_0": "0",
       "submenuCounts_1": "0",
       "topAppBarLayout": "dense",
       "titleTopAppBar": "",
       "topAppBarZ_index": "998",
       "vibrateTopAppBarOnMobilDevices": "50",
       "drawerLayout": "modal",
       "drawerItemLayout": "standard",
       "listItemDividerStyle": "standard",
       "z_index": "1000",
       "showHeader": false,
       "headerLabel": "",
       "showLabels": true,
       "listItemAlignment": "left",
       "backdropLabelBackgroundHeight": "30",
       "vibrateDrawerOnMobilDevices": "0",
       "drawerSubItemLayout": "standard",
       "listSubItemAlignment": "left",
       "showSubItemsLabels": "true",
       "iconDrawer0": "/vis.0/dos/icons/rund/007-spa.png",
       "iconDrawer1": "/vis.0/dos/icons/rund/003-idea-1.png",
       "signals-cond-0": "==",
       "signals-val-0": true,
       "signals-icon-0": "/vis/signals/lowbattery.png",
       "signals-icon-size-0": 0,
       "signals-blink-0": false,
       "signals-horz-0": 0,
       "signals-vert-0": 0,
       "signals-hide-edit-0": false,
       "signals-cond-1": "==",
       "signals-val-1": true,
       "signals-icon-1": "/vis/signals/lowbattery.png",
       "signals-icon-size-1": 0,
       "signals-blink-1": false,
       "signals-horz-1": 0,
       "signals-vert-1": 0,
       "signals-hide-edit-1": false,
       "signals-cond-2": "==",
       "signals-val-2": true,
       "signals-icon-2": "/vis/signals/lowbattery.png",
       "signals-icon-size-2": 0,
       "signals-blink-2": false,
       "signals-horz-2": 0,
       "signals-vert-2": 0,
       "signals-hide-edit-2": false,
       "lc-type": "last-change",
       "lc-is-interval": true,
       "lc-is-moment": false,
       "lc-format": "",
       "lc-position-vert": "top",
       "lc-position-horz": "right",
       "lc-offset-vert": 0,
       "lc-offset-horz": 0,
       "lc-font-size": "12px",
       "lc-font-family": "",
       "lc-font-style": "",
       "lc-bkg-color": "",
       "lc-color": "",
       "lc-border-width": "0",
       "lc-border-style": "",
       "lc-border-color": "",
       "lc-border-radius": 10,
       "lc-zindex": 0,
       "labels0": "Startseite",
       "submenuCounts_2": "0",
       "submenuCounts_3": "0",
       "submenuCounts_4": "0",
       "submenuCounts_5": "0",
       "submenuCounts_6": "0",
       "iconDrawer2": "/vis.0/dos/icons/rund/003-idea-1.png",
       "iconDrawer3": "/vis.0/dos/icons/rund/003-idea-1.png",
       "iconDrawer4": "/vis.0/dos/thermostat_graphical_256.png",
       "iconDrawer5": "/vis.0/dos/shutters-65_graphical_256.png",
       "iconDrawer6": "/vis.0/dos/wireless_green.png",
       "labels1": "Licht",
       "labels2": "Licht Gruppen",
       "labels3": "Licht WZ Detail",
       "labels4": "",
       "labels5": "",
       "labels6": "",
       "colorTopAppBarBackground": "transparent",
       "colorTopAppBarTitle": "",
       "showSelectedItemAsTitle": false,
       "drawerWidth": "270",
       "drawerIconHeight": "30",
       "colorDrawerBackground": "#22242D",
       "colorDrawerHeaderBackground": "#22242D",
       "colorListItemHover": "#000",
       "colorListItemText": "#fff",
       "colorListItemTextSelected": "#fff",
       "listItemTextSize": "18px",
       "colorDrawerItemBackground": "",
       "colorListItemSelected": "#fff",
       "showIndexNum": true,
       "submenuCounts_7": "0",
       "iconDrawer7": "/vis/widgets/materialdesign/img/IoBroker_Logo.png",
       "labels7": "",
       "listItemHeaderTextSize": "",
       "submenuCounts_8": "0",
       "iconDrawer8": "/vis/widgets/materialdesign/img/IoBroker_Logo.png",
       "labels8": "",
       "submenuCounts_9": "0",
       "iconDrawer9": "/vis/widgets/materialdesign/img/IoBroker_Logo.png",
       "labels9": "",
       "submenuCounts_10": "0",
       "iconDrawer10": "/vis/widgets/materialdesign/img/IoBroker_Logo.png",
       "labels10": "",
       "submenuCounts_11": "0",
       "iconDrawer11": "/vis/widgets/materialdesign/img/IoBroker_Logo.png",
       "labels11": "",
       "submenuCounts_12": "0",
       "iconDrawer12": "/vis/widgets/materialdesign/img/IoBroker_Logo.png",
       "labels12": "",
       "submenuCounts_13": "0",
       "iconDrawer13": "/vis/widgets/materialdesign/img/IoBroker_Logo.png",
       "labels13": "",
       "colorDrawerSubBackground": "#fff",
       "navItemCount": "20",
       "submenuCounts_14": "0",
       "submenuCounts_15": "0",
       "submenuCounts_16": "0",
       "submenuCounts_17": "0",
       "submenuCounts_18": "0",
       "submenuCounts_19": "0",
       "submenuCounts_20": "0",
       "iconDrawer14": "/vis/widgets/materialdesign/img/IoBroker_Logo.png",
       "iconDrawer15": "/vis/widgets/materialdesign/img/IoBroker_Logo.png",
       "iconDrawer16": "/vis/widgets/materialdesign/img/IoBroker_Logo.png",
       "iconDrawer17": "/vis/widgets/materialdesign/img/IoBroker_Logo.png",
       "iconDrawer18": "/vis/widgets/materialdesign/img/IoBroker_Logo.png",
       "iconDrawer19": "/vis/widgets/materialdesign/img/IoBroker_Logo.png",
       "iconDrawer20": "/vis/widgets/materialdesign/img/IoBroker_Logo.png",
       "class": "mAppBar .mdc-drawer__content"
     },
     "style": {
       "left": "0px",
       "top": "0px",
       "width": "1123px",
       "font-family": "Jura-DemiBold",
       "height": "702px",
       "border-radius": ""
     },
     "widgetSet": "materialdesign"
   }
 },
 "name": "0_menu1",
 "filterList": []
}

[Negalein]

@mguenther sagte in Suche Ideen für ein Auswahlmenü:

Gibts sowas auch in "modern" und hübsch?

Sidebar von @Mic
https://forum.iobroker.net/topic/12723/einfach-mal-zeigen-will-teil-2/364

[mguenther]

@Negalein
auch gut, schau ich mir an...

[mguenther]

@Glasfaser
was ich noch nicht hinbekommen habe - kann ich die Höhe des Auswahlmenüs reduzieren? Ich habe 4 Menüpunkte, eingefadet wird aber das Menü über die gesamte Bildschirmhöhe...

[Glasfaser]

@mguenther

Meinst du so , geht aber nur per CSS.

[mguenther]

@Glasfaser
ja, genau, das meinte ich... was muss denn bei CSS hinterlegt werden?

[Glasfaser]

@mguenther
Bei CSS hinterlegen , mußt du dann mit den px spielen ,bis es bei dir passt .

/**Top App Bar , Hintergrundhöhe Bar ändern // by Glasfaser**/
.mdc-drawer {

    height: 500px !important;
}

[mguenther]

@Glasfaser
ja, passt - jetzt hab ich nur das Problem, dass das Menü hinter meinem Widget View in 8 liegt - ich habe nur noch im Kopf, dass bestimmte z-Werte eingestellt werden müssen, finde es gerade nicht.

[Glasfaser]

@mguenther sagte in Suche Ideen für ein Auswahlmenü:

Widget View in 8

Z-Index leer lassen bei diesem Widget

[mguenther]

Super - danke - passt jetzt