Hauptmenü

ftui3 swiper Code-Problem

Begonnen von Marko1976, 03 September 2025, 12:43:31

Vorheriges Thema - Nächstes Thema

Marko1976

Hallo, ich habe ein Problem mit dem ftui3-Swipe Element.

Wie man auf dem Screenshot sieht möchte ich als Unterseite mit dem swipe zwischen verschiedenen Detailseiten hin und her wechseln können.
Das interessante ist, benutze ich die Vor-/Zurück-Buttons außen funktioniert es solange bis ich einen der anderen Buttons benutze. Die Testanzeige der ID für den Swiper (ganz oben zentriert) wird auch erst dann angezeigt, egal wie oft ich vor oder zurückblättere. Auch beim automatischen Blättern ändert sich der Wert nicht.

Ich kann also derzeit entweder oder aber nicht beide Möglichkeiten nutzen.

Hier ist der betreffende Code-Ausschnitt aus dem HTML:
<ftui-tab-view id="Settings_Allgemein" group="3">

<!-- ---------- Swiper ---------- -->
<ftui-grid-tile class="swipe" row="1" col="2.125" height="18.6" width="14">
<ftui-label [text]="local:swiper_settings_allgemein" size="5" class="Kontrollrahmen_red" color="white"></ftui-label>
<ftui-swiper width="100%" id="swiper_settings_allgemein" auto-play="true" interval="3" (value)="swiper_settings_allgemein_1" ([value])="local:swiper_settings_allgemein">

<!-- -------------------- Kachel #1 -------------------- -->
<ftui-content id="swiper_settings_allgemein_1" file="./content/settings/Allgemein_Content_page1.html" [hidden]="local:swiper_settings_allgemein | map('swiper_settings_allgemein_1:false, .*:true')"></ftui-content>

<!-- -------------------- Kachel #1 -------------------- -->
<ftui-content id="swiper_settings_allgemein_2" file="./content/settings/Allgemein_Content_page2.html" [hidden]="local:swiper_settings_allgemein | map('swiper_settings_allgemein_2:false, .*:true')"></ftui-content>

<!-- -------------------- Kachel #3 -------------------- -->
<ftui-content id="swiper_settings_allgemein_3" file="./content/settings/Allgemein_Content_page3.html" [hidden]="local:swiper_settings_allgemein | map('swiper_settings_allgemein_3:false, .*:true')"></ftui-content>

<!-- -------------------- Kachel #4 -------------------- -->
<ftui-content id="swiper_settings_allgemein_4" file="./content/settings/Allgemein_Content_page4.html" [hidden]="local:swiper_settings_allgemein | map('swiper_settings_allgemein_4:false, .*:true')"></ftui-content>

</ftui-swiper>
<!-- <ftui-content file="./content/settings/Allgemein.html"></ftui-content> -->
</ftui-grid-tile>

<!-- Auswahlbereich -->
<ftui-grid-tile class="swipe_select" row="19.5" col="2" height="1.5" width="14">
<ftui-row margin="0" align-items="around">
<ftui-icon name="arrow_left" class="size-6" margin="-0.25" @click="local:swiper_settings_allgemein.back()"></ftui-icon>
<ftui-button height="100%" Width="150px" (value)="local:swiper_settings_allgemein" states="swiper_settings_allgemein_1" [fill]="local:swiper_settings_allgemein | map('swiper_settings_allgemein_1:solid, .*:outline')" [color]="local:swiper_settings_allgemein | map('swiper_settings_allgemein_1:blue, .*:light')" class="size-2" margin="0px 0px 0px 0px">Marko</ftui-button>
<ftui-button height="100%" Width="150px" (value)="local:swiper_settings_allgemein" states="swiper_settings_allgemein_2" [fill]="local:swiper_settings_allgemein | map('swiper_settings_allgemein_2:solid, .*:outline')" [color]="local:swiper_settings_allgemein | map('swiper_settings_allgemein_2:blue, .*:light')" class="size-2" margin="0px 0px 0px 0px">Marion</ftui-button>
<ftui-button height="100%" Width="150px" (value)="local:swiper_settings_allgemein" states="swiper_settings_allgemein_3" [fill]="local:swiper_settings_allgemein | map('swiper_settings_allgemein_3:solid, .*:outline')" [color]="local:swiper_settings_allgemein | map('swiper_settings_allgemein_3:blue, .*:light')" class="size-2" margin="0px 0px 0px 0px">Aufgaben</ftui-button>
<!-- <ftui-button height="100%" Width="150px" (value)="local:swiper_settings_allgemein" states="swiper_settings_allgemein_4" [fill]="local:swiper_settings_allgemein | map('swiper_settings_allgemein_4:solid, .*:outline')" [color]="local:swiper_settings_allgemein | map('swiper_settings_allgemein_4:blue, .*:light')" class="size-2" margin="0px 0px 0px 0px">Marion</ftui-button> -->
<ftui-icon name="arrow_right" class="size-6" margin="-0.25" @click="local:swiper_settings_allgemein.next()"></ftui-icon>
</ftui-row>
</ftui-grid-tile>

</ftui-tab-view>

Könnte sich mal jemand den Code ansehen und mir den Denkfehler erklären?

Ich setze beim Aufrufen der Unterseite den Wert der ID und schreibe ihn anschließend in die locale Varibale. Die Pfile (back/next) setzen automatisch die vorherige/nächste Swipeseite aber offenbar ohne den Inhalt der lokalen Variable zu ändern. Die Buttons in der Mitte setzen hingegen die lokale Variable explezit auf einen fixen Wert. Dieser kann aber offenbar nicht für Vor/Zurück genutzt werden. Irgendwie verstehe ich die Logik nicht.