gelöst [FTUI3] kann man auch nur einen Teilbereich eines Tabs lokal austauschen

[Medel]

Kann man auch nur einen Teilbereich eines Tabs austauschen?
z.B  2 Schaltflächen mit denen man dann nur die Inhalte der Zeilen 4 Spalte 5 bis Zeile 9 Spalte 8 austauschen kann.
Also die betreffenden Reihen sollen z.B. mit ftui-content aus einer anderen Datei ergänzt werden.
Durch drücken des Button 1 wird die datei 1 und mit Button 2 die andere  innerhalb diesem Bereich angezeigt

[Medel]

Hab die Lösung nun selbst gefunden. Funktioniert mittels ftui-segment und ftui-segment-button

[Medel]

Leider zu früh gefreut
wenn die Seite neu geladen wird werden beide content Seiten geladen. Erst nach dem umschalten geht es.
Wo ist der Fehler bzw kann man einen default setzen? Wenn Ja wie?

Code Auswählen Erweitern


...
    <ftui-grid-tile row="9" col="9" height="1" width="3" class="halbTransparent">
       <header class="size-2 headerTransparent"><ftui-label>Lichter</ftui-label></header>
      <ftui-segment [(value)]="Licht">
        <ftui-segment-button class="halbTransparent" value="1">
               <ftui-label color="yellow" text="Wohnzimmer"></ftui-label>
        </ftui-segment-button>
        <ftui-segment-button class="halbTransparent" value="2">
               <ftui-label color="yellow" text="Patrik"></ftui-label>
        </ftui-segment-button>
    </ftui-grid-tile>
   
    <ftui-tab-view id="View1" [hidden]="Licht | isNot('1')">
      <ftui-grid-tile row="10" col="9" height="2" width="3" class="halbTransparent">
        <ftui-content file="LightWz.html"></ftui-content>
      </ftui-grid-tile>
    </ftui-tab-view>
   
    <ftui-tab-view id="View1" [hidden]="Licht | isNot('2')">
      <ftui-grid-tile row="10" col="9" height="2" width="3" class="halbTransparent">
        <ftui-content file="LichtPatrik.html"></ftui-content>
      </ftui-grid-tile>
    </ftui-tab-view>
...


[Medel]

Dem Ziel wieder etwas näher:
Bereich wird jetzt lokal ausgetauscht, wird aber das Hauptmenü umgeschaltet und wieder zurück ist der Bereich leer da die Seite nicht neu geladen wird.

Code Auswählen Erweitern


...
<script>
  document.addEventListener('ftuiPageInitialized', () => {
    LichtWz.removeAttribute('hidden');
  });
</script>
...
    <ftui-grid-tile row="9" col="9" height="1" width="3" class="halbTransparent">
      <header class="size-2 headerTransparent"><ftui-label>Lichter</ftui-label></header>
      <ftui-segment (value)="Licht">
        <ftui-segment-button class="halbTransparent" value="1">
          <ftui-label color="yellow" text="Wohnzimmer"></ftui-label>
        </ftui-segment-button>
        <ftui-segment-button class="halbTransparent" value="2">
          <ftui-label color="yellow" text="Patrik"></ftui-label>
        </ftui-segment-button>
      </ftui-segment>
    </ftui-grid-tile>
   
    <ftui-tab-view  id="LichtWz" [hidden]="Licht | isNot('1')">
      <ftui-grid-tile row="10" col="9" height="2" width="3" class="halbTransparent">
        <ftui-content file="LightWz.html"></ftui-content>
      </ftui-grid-tile>
    </ftui-tab-view>
   
    <ftui-tab-view  id="LichtP" [hidden]="Licht | isNot('2')">
      <ftui-grid-tile row="10" col="9" height="2" width="3" class="halbTransparent">
        <ftui-content file="LichtPatrik.html"></ftui-content>
      </ftui-grid-tile>
    </ftui-tab-view>
...


[Medel]

Habe es jetzt so gelöst:

Code Auswählen Erweitern


...
  // vorauswahl beim neuladen/umschalten
  selTab = "LichtWz";
 
  // Stelle Vorauswahl Lichter her
  function onClick(segment) {
    var element1 = document.getElementById("LichtWz");
    var element2 = document.getElementById("LichtP");
    document.querySelectorAll('ftui-tab-view').forEach(elem => {
      if (elem.id !== "View1") {
        if (selTab == "LichtWz") {
          element1.removeAttribute('hidden');
          element2.setAttribute('hidden', '');
        } else {
          element1.setAttribute('hidden', '');
          element2.removeAttribute('hidden');
        }
      }
    });
  }
 
  // speichere Lichter Auswahl damit nach umschalten des Menüs diese wieder eingestellt wird
  function auswahl(ausw) {
    selTab = ausw;
  }
</script>
...
    <ftui-grid-tile row="9" col="9" height="1" width="3" class="halbTransparent">
      <header class="size-2 headerTransparent"><ftui-label>Lichter</ftui-label></header>
      <ftui-segment (value)="Licht">
        <ftui-segment-button class="halbTransparent" value="1" onclick="auswahl('LichtWz')">
          <ftui-label color="yellow" text="Wohnzimmer"></ftui-label>
        </ftui-segment-button>
        <ftui-segment-button class="halbTransparent" value="2" onclick="auswahl('LichtP')">
          <ftui-label color="yellow" text="Patrik"></ftui-label>
        </ftui-segment-button>
      </ftui-segment>
    </ftui-grid-tile>
   
    <ftui-tab-view  id="LichtWz" [hidden]="Licht | isNot('1')">
      <ftui-grid-tile row="10" col="9" height="2" width="3" class="halbTransparent">
        <ftui-content file="LightWz.html"></ftui-content>
      </ftui-grid-tile>
    </ftui-tab-view>
   
    <ftui-tab-view  id="LichtP" [hidden]="Licht | isNot('2')">
      <ftui-grid-tile row="10" col="9" height="2" width="3" class="halbTransparent">
        <ftui-content file="LichtPatrik.html"></ftui-content>
      </ftui-grid-tile>
    </ftui-tab-view>
...


[mr_petz]

Hi Medel.
Noch ein Vorschlag meinerseits
Bsp.:
der grid-tile im tab-view

Code Auswählen Erweitern


      <ftui-grid-tile row="5" col="15" height="4" width="3" class="halbTransparent" [hidden]="Licht | isNot('1')">
        <header class="size-2 headerTransparent"><ftui-label>Lichter</ftui-label></header>
        <ftui-content file="view/seite1.html"></ftui-content>
      </ftui-grid-tile>
      <ftui-grid-tile row="5" col="15" height="4" width="3" class="halbTransparent" [hidden]="Licht | isNot('2')" hidden="true">
        <header class="size-2 headerTransparent"><ftui-label>Lichter</ftui-label></header>
        <ftui-content file="view/seite2.html"></ftui-content>
      </ftui-grid-tile>


und dann die seite1:

Code Auswählen Erweitern


<ftui-segment [(value)]="Licht">
  <ftui-segment-button class="halbTransparent" value="1">
    <ftui-label color="yellow" text="Wohnzimmer"></ftui-label>
  </ftui-segment-button>
  <ftui-segment-button class="halbTransparent" value="2">
    <ftui-label color="yellow" text="Patrik"></ftui-label>
  </ftui-segment-button>
</ftui-segment>
<ftui-knob has-scale has-arc has-scale-text has-value-text has-needle
  [(value)]="test:test"
  value="25"
  [color]="test:test | step('0:success,20:warning,40:brown,60:danger')"
  value-size="20px"
  min="0"
  max="70"
  unit="°C"
  height="155"
  stroke-width="5"
  ticks="7"
  start-angle="90" end-angle="320"
  debounce=""
  readonly>
</ftui-knob>


und seite2:

Code Auswählen Erweitern


<ftui-segment [(value)]="Licht">
  <ftui-segment-button class="halbTransparent" value="1">
    <ftui-label color="yellow" text="Wohnzimmer"></ftui-label>
  </ftui-segment-button>
  <ftui-segment-button class="halbTransparent" value="2">
    <ftui-label color="yellow" text="Patrik"></ftui-label>
  </ftui-segment-button>
</ftui-segment>
<ftui-knob has-scale has-arc has-scale-text has-value-text has-needle
  [(value)]="test:test"
  value="65"
  [color]="test:test | step('0:success,20:warning,40:brown,60:danger')"
  value-size="20px"
  min="0"
  max="70"
  unit="°C"
  height="155"
  stroke-width="5"
  ticks="7"
  start-angle="90" end-angle="320"
  debounce=""
  readonly>
</ftui-knob>


im Anhang mal ein Anigif zum zeigen das es so funzt...
Auch nach refresh der Seite oder wechseln des view wird das erste content angezeigt (durch hidden="true") oder der getriggerte (durch [hidden]).
LG mr_petz

Edit:
Alternative über swiper:

Code Auswählen Erweitern


<ftui-grid-tile row="5" col="15" height="7" width="6" class="halbTransparent">
<header class="size-2 headerTransparent"><ftui-label>Lichter</ftui-label></header>
<ftui-segment [(value)]="Licht" value="1">
<ftui-segment-button class="halbTransparent" value="1">
<ftui-label color="yellow" text="Wohnzimmer"></ftui-label>
</ftui-segment-button>
<ftui-segment-button class="halbTransparent" value="2">
<ftui-label color="yellow" text="Patrik"></ftui-label>
</ftui-segment-button>
</ftui-segment>
<ftui-swiper id="swiper1" value="1">
<ftui-content id="1" [hidden]="Licht | isNot('1')" file="view/seite1.html"></ftui-content>
<ftui-content id="2" [hidden]="Licht | isNot('2')" file="view/seite2.html"></ftui-content>
</ftui-swiper>
</ftui-grid-tile>


[Medel]

Hallo,

vielen Dank, funktioniert beides und ist mir lieber als das mit dem Js script.

Kann man bei der Swiper Lösung den Schieber am unteren Rand ausblenden?

Habe gerade noch festgestellt dass bei der Swiper Lösung ein circlemenu das über die Grenzen ragt abgeschnitten wird.

[mr_petz]

...
Kann man bei der Swiper Lösung den Schieber am unteren Rand ausblenden?
...

Also wenn ich wieder hidden="true" im 2. content einfüge, dann ist die untere scrollbar weg.

Code Auswählen Erweitern


<ftui-grid-tile row="12" col="22" height="7" width="6" class="halbTransparent">
<header class="size-2 headerTransparent"><ftui-label>Lichter</ftui-label></header>
<ftui-segment [(value)]="Licht" value="1">
<ftui-segment-button class="halbTransparent" value="1">
<ftui-label color="yellow" text="Wohnzimmer"></ftui-label>
</ftui-segment-button>
<ftui-segment-button class="halbTransparent" value="2">
<ftui-label color="yellow" text="Patrik"></ftui-label>
</ftui-segment-button>
</ftui-segment>
<ftui-swiper id="swiper1" value="1">
<ftui-content id="1" [hidden]="Licht | isNot('1')" file="view/seite1.html"></ftui-content>
<ftui-content id="2" [hidden]="Licht | isNot('2')" hidden="true" file="view/seite2.html"></ftui-content>
</ftui-swiper>
</ftui-grid-tile>


Durch die [hidden] denkt der swiper es ist nur eine content-seite...
LG

Edit:
Für ein circle-menü muss man bestimmt den grid-tile größer machen. Habe bei mir keine Übergröße mit Standardcirclemenü.
Siehe Anhang.
zur Not noch den radius verringern:

Code Auswählen Erweitern


circle-radius="3"