[FTUI3] tab-view und view-stage kombinieren

HAL2001 · 21 Oktober 2023, 09:07:47

Hallo zusammen,

ich kombiniere für eine mobile Anwendung die Konzepte von tab-view (Menü in der Fußzeile) und view-stage (Detailseiten). Anbei die verwendete Struktur:

Code Auswählen

<body>

   <ftui-view>
     
     <ftui-tab-view id="Licht">
  	<ftui-view-stage>
	  <ftui-view id="Licht_Ebene_1">
            <ftui-view-item target="Licht_EG">Erdgeschoss</ftui-view-item>
            <ftui-view-item target="Licht_OG">Obergeschoss</ftui-view-item>
	  
	    ...
	  
	  </ftui-view>

	 <ftui-view id="Licht_EG">
           <ftui-view-toolbar><ftui-nav-link slot="start"></ftui-nav-link></ftui-view-toolbar>
	   <ftui-view-section>
             <ftui-label slot="header">Wohnbereich</ftui-label>
             <ftui-view-item><ftui-label text="Lampe1"></ftui-label><ftui-switch [(value)]="light_lampe1" slot="end"></ftui-switch></ftui-view-item>
           
             ...
           
           </ftui-view-section>
         </ftui-view>

	 ...

	</ftui-view-stage> 
     </ftui-tab-view>
     
     <ftui-tab-view id="Rolladen">
     
       ...
     
     </ftui-tab-view>
    
   </ftui-view>


  <footer class="row fixed border-top">
    <ftui-tab fill="clear" direction="vertical" view="Licht" title="Licht" active><ftui-icon name="lightbulb"></ftui-icon><label class="small">Licht</label></ftui-tab>
    <ftui-tab fill="clear" direction="vertical" view="Rolladen" title="Rolladen"><ftui-icon name="window-shutter"></ftui-icon><label class="small">Rolladen</label></ftui-tab>
    
    ...
    
  </footer>

</body>

Mein Problem dabei: Die Titelleiste des Tab-Views überdeckt die Toolbar mit dem Navigationslink des View-Stages, d.h. der "Back"-Button ist hinter der Titelleiste und kann nicht angeklickt werden. Meine Frage: Kann ich die Titelleiste des Tab-Views einfach weglassen oder die Toolbar des View-Stages in der Vordergrund bringen?

Vielen Dank vorab für Eure Hilfe.

Viele Grüße, Jan

FHEM Forum

[FTUI3] tab-view und view-stage kombinieren

HAL2001